CSS ಕಂಟೇನರ್ ಕ್ವೆರಿ ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳ (and, or, not) ಶಕ್ತಿಯನ್ನು ಅನ್ವೇಷಿಸಿ, ಕಂಟೇನರ್ ಗಾತ್ರಕ್ಕೆ ತಕ್ಕಂತೆ ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಅಡಾಪ್ಟಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಿ, ಎಲ್ಲಾ ಸಾಧನಗಳಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಿ.
ಸುಧಾರಿತ ಲೇಔಟ್‌ಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುವುದು: CSS ಕಂಟೇನರ್ ಕ್ವೆರಿ ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಪ್ರಗತಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ, ಇದು ಕೇವಲ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲವನ್ನು ಅವಲಂಬಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ, ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಮ್ಮ ಪೋಷಕ ಕಂಟೇನರ್‌ನ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ತಮ್ಮ ಶೈಲಿಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ನಿಜವಾಗಿಯೂ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ UI ಅಂಶಗಳನ್ನು ರಚಿಸಲು ಅಪ್ರತಿಮ ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಅವುಗಳ ಸುಧಾರಿತ ಕಾರ್ಯಚಟುವಟಿಕೆಯ ತಿರುಳಿನಲ್ಲಿ ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳಾದ and, or, ಮತ್ತು not ಗಳ ಶಕ್ತಿ ಅಡಗಿದೆ. ಈ ಆಪರೇಟರ್‌ಗಳು ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಗೆ ಸಂಕೀರ್ಣ ಮತ್ತು ಸೂಕ್ಷ್ಮವಾದ ಷರತ್ತುಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ, ಇದರಿಂದಾಗಿ ನೀವು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಕಂಟೇನರ್ ಗಾತ್ರಗಳು ಮತ್ತು ಸಂದರ್ಭಗಳಿಗೆ ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು.
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಒಂದು ತ್ವರಿತ ಪುನರಾವಲೋಕನ
ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳ ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳುವ ಮೊದಲು, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಯಾವುವು ಮತ್ತು ಅವು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಪುನರಾವಲೋಕಿಸೋಣ. ಒಟ್ಟಾರೆ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಪುಟದೊಳಗಿನ ನಿರ್ದಿಷ್ಟ ಕಂಟೇನರ್ ಎಲಿಮೆಂಟ್‌ನ ಆಯಾಮಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ. ಇದು ಸೈಟ್‌ನಲ್ಲಿ ಬಹು ಸ್ಥಳಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ, ಪ್ರತಿಯೊಂದೂ ಸಂಭಾವ್ಯವಾಗಿ ವಿಭಿನ್ನ ಕಂಟೇನರ್ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ.
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಲು, ನೀವು ಮೊದಲು ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕಂಟೇನರ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಎಂದು ಗೊತ್ತುಪಡಿಸಬೇಕು. ಇದನ್ನು container-type ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ ಮಾಡಲಾಗುತ್ತದೆ. ಸಾಮಾನ್ಯ ಮೌಲ್ಯಗಳೆಂದರೆ size (ಅಗಲ ಮತ್ತು ಎತ್ತರ ಎರಡಕ್ಕೂ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ), inline-size (ಅಗಲಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ), ಮತ್ತು block-size (ಎತ್ತರಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ).
.container {
container-type: inline-size;
}
ಒಮ್ಮೆ ನೀವು ಕಂಟೇನರ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಹೊಂದಿದ್ದರೆ, ಕಂಟೇನರ್ ನಿರ್ದಿಷ್ಟ ಷರತ್ತುಗಳನ್ನು ಪೂರೈಸಿದಾಗ ಅನ್ವಯಿಸಲಾಗುವ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನೀವು @container ಅಟ್-ರೂಲ್ ಅನ್ನು ಬಳಸಬಹುದು:
@container (min-width: 400px) {
.element-inside-container {
font-size: 1.2em;
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .element-inside-container ನ ಫಾಂಟ್ ಗಾತ್ರವು ಅದರ ಕಂಟೇನರ್‌ನ ಅಗಲವು ಕನಿಷ್ಠ 400px ಇದ್ದಾಗ ಮಾತ್ರ 1.2em ಆಗಿರುತ್ತದೆ.
ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳ ಶಕ್ತಿ
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ನಿಜವಾದ ಮ್ಯಾಜಿಕ್ ನೀವು ಅವುಗಳನ್ನು ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ ಅನಾವರಣಗೊಳ್ಳುತ್ತದೆ. ಈ ಆಪರೇಟರ್‌ಗಳು ನಿಮಗೆ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಷರತ್ತುಗಳನ್ನು ರಚಿಸಲು ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ, ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ನಿಜವಾಗಿಯೂ ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಮತ್ತು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡುತ್ತದೆ.
and ಆಪರೇಟರ್
and ಆಪರೇಟರ್ ನಿಮಗೆ ಬಹು ಷರತ್ತುಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಶೈಲಿಗಳು ಅನ್ವಯವಾಗಲು ಎಲ್ಲಾ ಷರತ್ತುಗಳು ಸತ್ಯವಾಗಿರಬೇಕು. ನಿರ್ದಿಷ್ಟ ಗಾತ್ರದ ನಿರ್ಬಂಧಗಳು ಅಥವಾ ಇತರ ಮಾನದಂಡಗಳನ್ನು ಪೂರೈಸುವ ಕಂಟೇನರ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ನೀವು ಬಯಸಿದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
ಉದಾಹರಣೆ: ನಿಮ್ಮ ಬಳಿ ಒಂದು ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಇದೆ ಎಂದು ಭಾವಿಸೋಣ, ಅದರ ಕಂಟೇನರ್ ಸಾಕಷ್ಟು ಅಗಲ ಮತ್ತು ಎತ್ತರವಾಗಿದ್ದಾಗ ಅದನ್ನು ವಿಭಿನ್ನವಾಗಿ ಸ್ಟೈಲ್ ಮಾಡಲು ನೀವು ಬಯಸುತ್ತೀರಿ. ಇದನ್ನು ಸಾಧಿಸಲು ನೀವು and ಆಪರೇಟರ್ ಅನ್ನು ಬಳಸಬಹುದು:
.card {
/* Default styles */
display: flex;
flex-direction: column;
}
@container (min-width: 300px) and (min-height: 200px) {
.card {
flex-direction: row; /* Change to horizontal layout */
}
.card__image {
width: 40%;
}
.card__content {
width: 60%;
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಕಾರ್ಡ್ ಅದರ ಕಂಟೇನರ್ ಕನಿಷ್ಠ 300px ಅಗಲ ಮತ್ತು ಕನಿಷ್ಠ 200px ಎತ್ತರವಾಗಿದ್ದಾಗ ಮಾತ್ರ ಸಮತಲ ಲೇಔಟ್‌ಗೆ ಬದಲಾಗುತ್ತದೆ. ಎರಡರಲ್ಲಿ ಒಂದು ಷರತ್ತು ಪೂರೈಸದಿದ್ದರೆ, ಕಾರ್ಡ್ ತನ್ನ ಡೀಫಾಲ್ಟ್ ಲಂಬ ಲೇಔಟ್ ಅನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಬಳಕೆ: ಇ-ಕಾಮರ್ಸ್ ಉತ್ಪನ್ನ ಪಟ್ಟಿ
ಒಂದು ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್ ಉತ್ಪನ್ನ ಪಟ್ಟಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತಿದೆ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಸಣ್ಣ ಪರದೆಗಳಲ್ಲಿ, ಉತ್ಪನ್ನದ ಚಿತ್ರ ಮತ್ತು ವಿವರಣೆ ಲಂಬವಾಗಿ ಜೋಡಿಸಬಹುದು. ಆದರೆ ದೊಡ್ಡ ಪರದೆಗಳಲ್ಲಿ, ಕಂಟೇನರ್ ಅಗಲ ಮತ್ತು ಎತ್ತರವಾಗಿರುವಲ್ಲಿ, ಅವುಗಳನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವುದು ಹೆಚ್ಚು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿರುತ್ತದೆ. and ಆಪರೇಟರ್ ಈ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್ ಅನ್ನು ಸುಲಭವಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಜಾಗತಿಕ ಉದಾಹರಣೆ: ವಿಭಿನ್ನ ಸಾಧನ ಓರಿಯಂಟೇಶನ್‌ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವುದು
ಜಾಗತಿಕವಾಗಿ ಬಳಸಲಾಗುವ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಕೆಲವು ಪ್ರದೇಶಗಳಲ್ಲಿ, ಬಳಕೆದಾರರು ಮುಖ್ಯವಾಗಿ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಲ್ಯಾಂಡ್‌ಸ್ಕೇಪ್ ಮೋಡ್‌ನಲ್ಲಿ ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳಲ್ಲಿ ಪ್ರವೇಶಿಸುತ್ತಾರೆ, ಆದರೆ ಇತರರಲ್ಲಿ, ಪೋರ್ಟ್ರೇಟ್ ಮೋಡ್ ಹೆಚ್ಚು ಸಾಮಾನ್ಯವಾಗಿದೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿಯಲ್ಲಿ orientation: landscape ಅಥವಾ orientation: portrait ಮೀಡಿಯಾ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ and ಅನ್ನು ಬಳಸುವುದು ಪ್ರತಿ ಪ್ರದೇಶದಲ್ಲಿನ ಪ್ರಚಲಿತ ಬಳಕೆಯ ಮಾದರಿಗೆ ಲೇಔಟ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
or ಆಪರೇಟರ್
or ಆಪರೇಟರ್ ಒಂದು ಪರ್ಯಾಯ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ, ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಷರತ್ತುಗಳಲ್ಲಿ ಕನಿಷ್ಠ ಒಂದು ಸತ್ಯವಾಗಿದ್ದರೆ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ವಿಭಿನ್ನ ಗಾತ್ರಗಳ ವ್ಯಾಪ್ತಿಯಲ್ಲಿ ಬರುವ ಅಥವಾ ಹಲವಾರು ಮಾನದಂಡಗಳಲ್ಲಿ ಒಂದನ್ನು ಪೂರೈಸುವ ಕಂಟೇನರ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ನೀವು ಬಯಸಿದಾಗ ಇದು ಸಹಾಯಕವಾಗಿರುತ್ತದೆ.
ಉದಾಹರಣೆ: ಕಂಟೇನರ್ ತುಂಬಾ ಅಗಲ ಅಥವಾ ತುಂಬಾ ಎತ್ತರವಾಗಿದ್ದರೆ ನಿಮ್ಮ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಹೆಚ್ಚು ಪ್ರಮುಖವಾದ ಕಾಲ್-ಟು-ಆಕ್ಷನ್ ಬಟನ್ ಅನ್ನು ಒದಗಿಸಲು ನೀವು ಬಯಸುತ್ತೀರಿ ಎಂದು ಹೇಳೋಣ. ನೀವು or ಆಪರೇಟರ್ ಅನ್ನು ಈ ರೀತಿ ಬಳಸಬಹುದು:
.card__button {
/* Default styles */
padding: 0.5em 1em;
}
@container (min-width: 600px) or (min-height: 400px) {
.card__button {
padding: 1em 2em; /* Make the button bigger */
font-size: 1.2em;
}
}
ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಕಂಟೇನರ್ ಕನಿಷ್ಠ 600px ಅಗಲ ಅಥವಾ ಕನಿಷ್ಠ 400px ಎತ್ತರವಾಗಿದ್ದರೆ ಕಾಲ್-ಟು-ಆಕ್ಷನ್ ಬಟನ್ ದೊಡ್ಡದಾಗುತ್ತದೆ. ಎರಡೂ ಷರತ್ತುಗಳು ಪೂರೈಸದಿದ್ದರೆ, ಬಟನ್ ತನ್ನ ಡೀಫಾಲ್ಟ್ ಶೈಲಿಗಳನ್ನು ಬಳಸುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಬಳಕೆ: ಹೊಂದಿಕೊಳ್ಳುವ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳು
ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳು ಲಭ್ಯವಿರುವ ಸ್ಥಳವನ್ನು ಆಧರಿಸಿ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ. ಕಂಟೇನರ್ ಸಾಕಷ್ಟು ಅಗಲವಾಗಿದ್ದರೆ, ನೀವು ಮೆನು ಐಟಂಗಳನ್ನು ಸಮತಲವಾಗಿ ಪ್ರದರ್ಶಿಸಬಹುದು. ಅದು ಕಿರಿದಾಗಿದ್ದರೆ, ನೀವು ಲಂಬ ಮೆನು ಅಥವಾ ಹ್ಯಾಂಬರ್ಗರ್ ಮೆನುಗೆ ಬದಲಾಯಿಸಬಹುದು. or ಆಪರೇಟರ್ ವಿಭಿನ್ನ ಕಂಟೇನರ್ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಹೊಂದಿಕೊಳ್ಳುವ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಜಾಗತಿಕ ಉದಾಹರಣೆ: ಬಲದಿಂದ-ಎಡಕ್ಕೆ ಮತ್ತು ಎಡದಿಂದ-ಬಲಕ್ಕೆ ಭಾಷೆಗಳಿಗೆ ಬೆಂಬಲ
ಅರೇಬಿಕ್ ಅಥವಾ ಹೀಬ್ರೂ ನಂತಹ ಬಲದಿಂದ-ಎಡಕ್ಕೆ (RTL) ಭಾಷೆಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಬಹು ಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸುವ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಡಾಕ್ಯುಮೆಂಟ್‌ನ ದಿಕ್ಕನ್ನು ಆಧರಿಸಿ ಕೆಲವು ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಲೇಔಟ್ ಅನ್ನು ನೀವು ಸರಿಹೊಂದಿಸಬೇಕಾಗಬಹುದು. ಡಾಕ್ಯುಮೆಂಟ್ RTL ಅಥವಾ LTR ಮೋಡ್‌ನಲ್ಲಿದೆಯೇ ಎಂಬುದನ್ನು ಆಧರಿಸಿ ವಿಭಿನ್ನ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು dir ಆಟ್ರಿಬ್ಯೂಟ್ ಸೆಲೆಕ್ಟರ್‌ನೊಂದಿಗೆ or ಆಪರೇಟರ್ ಅನ್ನು ಬಳಸಬಹುದು.
/* Default LTR styles */
.component {
margin-left: 10px;
}
@container (dir=rtl) or [dir=rtl] {
.component {
margin-left: auto; /* Reset LTR margin */
margin-right: 10px; /* Apply RTL margin */
}
}
not ಆಪರೇಟರ್
not ಆಪರೇಟರ್ ಒಂದು ಷರತ್ತು ಪೂರೈಸದಿದ್ದಾಗ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಒಂದು ನಿರ್ದಿಷ್ಟ ಗಾತ್ರಕ್ಕಿಂತ ಚಿಕ್ಕದಾದ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರದ ಕಂಟೇನರ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
ಉದಾಹರಣೆ: ನಿಮ್ಮ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಕಂಟೇನರ್ ಸಾಕಷ್ಟು ಅಗಲ ಇಲ್ಲದಿದ್ದಾಗ ಅದಕ್ಕೆ ವಿಭಿನ್ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸಲು ನೀವು ಬಯಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ.
.card {
/* Default styles */
background-color: #fff;
}
@container not (min-width: 500px) {
.card {
background-color: #f0f0f0; /* Change background color */
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಕಾರ್ಡ್‌ನ ಕಂಟೇನರ್ 500px ಗಿಂತ ಕಡಿಮೆ ಅಗಲವಾಗಿದ್ದಾಗ ಅದಕ್ಕೆ ತಿಳಿ ಬೂದು ಹಿನ್ನೆಲೆ ಬಣ್ಣವಿರುತ್ತದೆ. ಇಲ್ಲದಿದ್ದರೆ, ಅದಕ್ಕೆ ಡೀಫಾಲ್ಟ್ ಬಿಳಿ ಹಿನ್ನೆಲೆ ಬಣ್ಣವಿರುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಬಳಕೆ: ಪ್ರಮುಖ ಮಾಹಿತಿಯನ್ನು ಹೈಲೈಟ್ ಮಾಡುವುದು
ಸ್ಥಳ ಸೀಮಿತವಾಗಿದ್ದಾಗ ಪ್ರಮುಖ ಮಾಹಿತಿಯನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ನೀವು not ಆಪರೇಟರ್ ಅನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಒಂದು ಕಂಟೇನರ್ ಉತ್ಪನ್ನದ ಎಲ್ಲಾ ವಿವರಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ತುಂಬಾ ಕಿರಿದಾಗಿದ್ದರೆ, ನೀವು ಒಂದು ಪ್ರಮುಖ ಎಚ್ಚರಿಕೆ ಸಂದೇಶವನ್ನು ಅಥವಾ ಮೀಸಲಾದ ವಿವರಗಳ ಪುಟಕ್ಕೆ ಲಿಂಕ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು.
ಜಾಗತಿಕ ಉದಾಹರಣೆ: ವಿವಿಧ ಭಾಷೆಗಳಲ್ಲಿನ ವಿಭಿನ್ನ ಪಠ್ಯದ ಉದ್ದವನ್ನು ನಿಭಾಯಿಸುವುದು
ಪಠ್ಯದ ಉದ್ದಗಳು ವಿವಿಧ ಭಾಷೆಗಳಲ್ಲಿ ಗಮನಾರ್ಹವಾಗಿ ಬದಲಾಗಬಹುದು. ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ ಒಂದು ಚಿಕ್ಕ ನುಡಿಗಟ್ಟು ಜರ್ಮನ್ ಅಥವಾ ಜಪಾನೀಸ್‌ನಲ್ಲಿ ಹೆಚ್ಚು ಉದ್ದವಾಗಿರಬಹುದು. ಅಂದಾಜು ಪಠ್ಯದ ಉದ್ದವನ್ನು ಆಧರಿಸಿ ಲೇಔಟ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಲು not ಆಪರೇಟರ್ ಅನ್ನು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಒಂದು ಕಂಟೇನರ್ ನಿರ್ದಿಷ್ಟ ಪ್ರಮಾಣದ ಪಠ್ಯವನ್ನು સમાવવા માટે ಸಾಕಷ್ಟು ಅಗಲ ಇಲ್ಲದಿದ್ದರೆ, ನೀವು ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು ಅಥವಾ ಎಲಿಪ್ಸಿಸ್‌ನೊಂದಿಗೆ ಪಠ್ಯವನ್ನು ಮೊಟಕುಗೊಳಿಸಬಹುದು.
ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು: ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳನ್ನು ಅನಾವರಣಗೊಳಿಸುವುದು
ಕಂಟೇನರ್ ಕ್ವೆರಿ ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳ ನಿಜವಾದ ಶಕ್ತಿಯು ಅವುಗಳನ್ನು ಸಂಯೋಜಿಸಿ ಇನ್ನಷ್ಟು ಸಂಕೀರ್ಣ ಮತ್ತು ಸೂಕ್ಷ್ಮವಾದ ಷರತ್ತುಗಳನ್ನು ರಚಿಸುವುದರಿಂದ ಬರುತ್ತದೆ. ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸನ್ನಿವೇಶಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಸಂಕೀರ್ಣ ನಿಯಮಗಳನ್ನು ರಚಿಸಲು ನೀವು ಆಪರೇಟರ್‌ಗಳನ್ನು ನೆಸ್ಟ್ ಮಾಡಬಹುದು.
ಉದಾಹರಣೆ: ಹಲವಾರು ಅಂಶಗಳ ಆಧಾರದ ಮೇಲೆ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಲೇಔಟ್ ಅನ್ನು ಬದಲಾಯಿಸಲು ನೀವು ಬಯಸುತ್ತೀರಿ ಎಂದು ಹೇಳೋಣ:
- ಕಂಟೇನರ್ ಕನಿಷ್ಠ 400px ಅಗಲ ಮತ್ತು ಕನಿಷ್ಠ 300px ಎತ್ತರವಾಗಿದ್ದರೆ, ಸಮತಲ ಲೇಔಟ್ ಬಳಸಿ.
- ಕಂಟೇನರ್ 300px ಗಿಂತ ಕಡಿಮೆ ಅಗಲವಾಗಿದ್ದರೆ, ಒಂದು ಪ್ರಮುಖ ಎಚ್ಚರಿಕೆ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಿ.
- ಇಲ್ಲದಿದ್ದರೆ, ಡೀಫಾಲ್ಟ್ ಲಂಬ ಲೇಔಟ್ ಬಳಸಿ.
.card {
/* Default styles (vertical layout) */
display: flex;
flex-direction: column;
}
@container (min-width: 400px) and (min-height: 300px) {
.card {
flex-direction: row; /* Horizontal layout */
}
}
@container not (min-width: 300px) {
.card::before {
content: "Warning: This component may not display correctly on smaller screens.";
color: red;
font-weight: bold;
}
}
ಈ ಉದಾಹರಣೆಯು ವಿಭಿನ್ನ ಕಂಟೇನರ್ ಗಾತ್ರಗಳಿಗೆ ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸಲು ನೀವು and ಮತ್ತು not ಅನ್ನು ಹೇಗೆ ಸಂಯೋಜಿಸಬಹುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
ಕಂಟೇನರ್ ಕ್ವೆರಿ ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
ಕಂಟೇನರ್ ಕ್ವೆರಿ ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳು ಅಪಾರ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತವೆಯಾದರೂ, ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಮತ್ತು ನಿರ್ವಹಿಸಲು ಕಷ್ಟಕರವಾದ CSS ಅನ್ನು ರಚಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು ಅವುಗಳನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸುವುದು ಮುಖ್ಯ. ಇಲ್ಲಿ ಕೆಲವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ನೆನಪಿನಲ್ಲಿಡಬೇಕು:
- ಸರಳವಾಗಿಡಿ: ಆಳವಾಗಿ ನೆಸ್ಟ್ ಮಾಡಲಾದ ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳೊಂದಿಗೆ ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಷರತ್ತುಗಳನ್ನು ರಚಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ನಿಮ್ಮ ಷರತ್ತುಗಳು ತುಂಬಾ ಜಟಿಲವಾದರೆ, ಅವುಗಳನ್ನು ಚಿಕ್ಕ, ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ತುಣುಕುಗಳಾಗಿ ವಿಭಜಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
- ಅರ್ಥಪೂರ್ಣ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ನಿಮ್ಮ ಕಂಟೇನರ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ಗಳು ಮತ್ತು ಶೈಲಿಗಳಿಗೆ ಅವುಗಳ ಉದ್ದೇಶವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸುವ ವಿವರಣಾತ್ಮಕ ಹೆಸರುಗಳನ್ನು ನೀಡಿ. ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
- ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಪರದೆಯ ಗಾತ್ರಗಳಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ. ಎಡ್ಜ್ ಕೇಸ್‌ಗಳು ಮತ್ತು ಅನಿರೀಕ್ಷಿತ ಕಂಟೇನರ್ ಗಾತ್ರಗಳಿಗೆ ನಿರ್ದಿಷ್ಟ ಗಮನ ಕೊಡಿ.
- ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಆದ್ಯತೆ ನೀಡಿ: ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರದಂತೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ವಿಕಲಚೇತನರು ಸಹ ಅವುಗಳನ್ನು ಬಳಸಲು ಸಾಧ್ಯವಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.
- ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೊಂದಿದ್ದರೂ, ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಷರತ್ತುಗಳು ಸಂಭಾವ್ಯವಾಗಿ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮತ್ತು ಯಾವುದೇ ಸಂಭಾವ್ಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸುವಾಗ, ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟ ಲೇಔಟ್ ಮತ್ತು ವಿಷಯದಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ವಿಕಲಾಂಗ ಬಳಕೆದಾರರ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರದಂತೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಈ ಅಂಶಗಳನ್ನು ಪರಿಗಣಿಸಿ:
- ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್: ಕಂಟೇನರ್ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ, ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆಯ ನಡುವೆ ಸಾಕಷ್ಟು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಪಠ್ಯದ ಗಾತ್ರ ಬದಲಾವಣೆ: ಪ್ರತಿ ಕಂಟೇನರ್ ಗಾತ್ರದಲ್ಲಿ ಪಠ್ಯವು ಓದಬಲ್ಲ ಮತ್ತು ಮರುಗಾತ್ರಗೊಳಿಸಬಲ್ಲದು ಎಂದು ಪರಿಶೀಲಿಸಿ.
- ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್: ಎಲ್ಲಾ ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳು ಕೀಬೋರ್ಡ್ ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಮತ್ತು ಲೇಔಟ್ ಬದಲಾವಣೆಗಳ ನಂತರ ಫೋಕಸ್ ಆರ್ಡರ್ ತಾರ್ಕಿಕವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಸೆಮ್ಯಾಂಟಿಕ್ HTML: ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗೆ ರಚನೆ ಮತ್ತು ಸಂದರ್ಭವನ್ನು ಒದಗಿಸಲು ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಅಂಶಗಳನ್ನು ಸೂಕ್ತವಾಗಿ ಬಳಸಿ.
ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸದ ಜಾಗತಿಕ ದೃಷ್ಟಿಕೋನಗಳು
ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸವು ಒಂದು ಸಾರ್ವತ್ರಿಕ ಪರಿಕಲ್ಪನೆಯಾಗಿದೆ, ಆದರೆ ಅದರ ಅನುಷ್ಠಾನವು ಸಾಂಸ್ಕೃತಿಕ ಮತ್ತು ಪ್ರಾದೇಶಿಕ ಪರಿಗಣನೆಗಳನ್ನು ಆಧರಿಸಿ ಬದಲಾಗಬಹುದು. ಉದಾಹರಣೆಗೆ:
- ಬಲದಿಂದ-ಎಡಕ್ಕೆ (RTL) ಭಾಷೆಗಳು: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು RTL ಭಾಷೆಗಳಲ್ಲಿ ಲೇಔಟ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ನಿಭಾಯಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಅಕ್ಷರ ಸೆಟ್‌ಗಳು: ವಿಭಿನ್ನ ಅಕ್ಷರ ಸೆಟ್‌ಗಳ ಪರಿಣಾಮವನ್ನು ಪಠ್ಯ ಲೇಔಟ್ ಮೇಲೆ ಪರಿಗಣಿಸಿ ಮತ್ತು ಕಂಟೇನರ್‌ಗಳು ವಿವಿಧ ಅಕ್ಷರ ಉದ್ದಗಳನ್ನು સમાವಿಸಬಲ್ಲವು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಪ್ರಾದೇಶಿಕ ಆದ್ಯತೆಗಳು: ವಿಷಯದ ಸಾಂದ್ರತೆ ಮತ್ತು ದೃಶ್ಯ ಶ್ರೇಣಿಗಾಗಿ ಪ್ರಾದೇಶಿಕ ಆದ್ಯತೆಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ಲೇಔಟ್‌ಗಳನ್ನು ಹೊಂದಿಸಿ.
ತೀರ್ಮಾನ: ಕಂಟೇನರ್ ಕ್ವೆರಿ ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ
CSS ಕಂಟೇನರ್ ಕ್ವೆರಿ ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳು ನಿಜವಾಗಿಯೂ ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಅಡಾಪ್ಟಿವ್ ವೆಬ್ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವನ್ನು ಒದಗಿಸುತ್ತವೆ. and, or, ಮತ್ತು not ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಅವುಗಳ ಕಂಟೇನರ್ ಗಾತ್ರಕ್ಕೆ ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು, ಎಲ್ಲಾ ಸಾಧನಗಳು ಮತ್ತು ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಬಹುದು. ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ ಸರಳತೆಗೆ ಆದ್ಯತೆ ನೀಡಲು, ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಲು, ಮತ್ತು ಯಾವಾಗಲೂ ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಲು ನೆನಪಿಡಿ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಹೆಚ್ಚು ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತವಾಗುತ್ತಿದ್ದಂತೆ, ಅವು ನಿಸ್ಸಂದೇಹವಾಗಿ ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಹೆಚ್ಚು ಪ್ರಮುಖ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತವೆ.
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಲಾಜಿಕಲ್ ಆಪರೇಟರ್‌ಗಳ ಸೂಕ್ಷ್ಮ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಸಾಧನ ಅಥವಾ ಪರದೆಯ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿರುವುದಲ್ಲದೆ, ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿಯಾಗಿರುವ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು.