ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸದ ಮುಂದಿನ ಹಂತವಾದ ಸಿಎಸ್‌ಎಸ್‌ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅನ್ವೇಷಿಸಿ. ಕೇವಲ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರವಲ್ಲ, ಕಂಟೇನರ್ ಗಾತ್ರದ ಆಧಾರದ ಮೇಲೆ ಹೊಂದಿಕೊಳ್ಳುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಹೇಗೆಂದು ತಿಳಿಯಿರಿ.
ಸಿಎಸ್‌ಎಸ್‌ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು: ಎಲಿಮೆಂಟ್-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಕ್ರಾಂತಿ
ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸವು ಒಂದು ದಶಕದಿಂದಲೂ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಮೂಲಾಧಾರವಾಗಿದೆ. ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ, ನಾವು ವ್ಯೂಪೋರ್ಟ್‌ನ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ನಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳ ಮೇಲೆ ಅವಲಂಬಿತರಾಗಿದ್ದೇವೆ. ಆದಾಗ್ಯೂ, ಈ ವಿಧಾನವು ಕೆಲವೊಮ್ಮೆ ಸೀಮಿತವೆನಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ, ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ವಿನ್ಯಾಸಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ. ಇದಕ್ಕಾಗಿಯೇ ಬಂದಿದೆ ಸಿಎಸ್‌ಎಸ್‌ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು – ಇದು ಕೇವಲ ವ್ಯೂಪೋರ್ಟ್‌ನ ಗಾತ್ರವಲ್ಲ, ಬದಲಿಗೆ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಮ್ಮ ಕಂಟೇನಿಂಗ್ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಲು ಅನುವು ಮಾಡಿಕೊಡುವ ಒಂದು ಶಕ್ತಿಯುತ ಹೊಸ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ.
ಸಿಎಸ್‌ಎಸ್‌ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಎಂದರೇನು?
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಒಂದು ಗೇಮ್-ಚೇಂಜರ್, ಏಕೆಂದರೆ ಅವುಗಳು ಎಲಿಮೆಂಟ್-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸವನ್ನು ಸಾಧ್ಯವಾಗಿಸುತ್ತವೆ. "ಸ್ಕ್ರೀನ್ ಗಾತ್ರ ಎಷ್ಟು?" ಎಂದು ಕೇಳುವ ಬದಲು, "ಈ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಎಷ್ಟು ಸ್ಥಳ ಲಭ್ಯವಿದೆ?" ಎಂದು ನೀವು ಕೇಳಬಹುದು. ಇದು ನಿಜವಾಗಿಯೂ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಹೊಸ ಸಾಧ್ಯತೆಗಳ ಜಗತ್ತನ್ನು ತೆರೆಯುತ್ತದೆ.
ಒಂದು ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಬಗ್ಗೆ ಯೋಚಿಸಿ, ಅದು ವಿವಿಧ ಸಂದರ್ಭಗಳಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳಬಹುದು: ಕಿರಿದಾದ ಸೈಡ್‌ಬಾರ್, ವಿಶಾಲವಾದ ಹೀರೋ ವಿಭಾಗ, ಅಥವಾ ಬಹು-ಕಾಲಮ್ ಗ್ರಿಡ್. ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳೊಂದಿಗೆ, ವ್ಯೂಪೋರ್ಟ್ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಈ ಪ್ರತಿಯೊಂದು ಸನ್ನಿವೇಶಕ್ಕೂ ನೀವು ನಿರ್ದಿಷ್ಟ ನಿಯಮಗಳನ್ನು ಬರೆಯಬೇಕಾಗುತ್ತದೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ, ಒಟ್ಟಾರೆ ಪರದೆಯ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ ಕಾರ್ಡ್ ತನ್ನ ಪೋಷಕ ಕಂಟೇನರ್‌ನ ಆಯಾಮಗಳ ಆಧಾರದ ಮೇಲೆ ತನ್ನ ಲೇಔಟ್ ಮತ್ತು ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಸರಿಹೊಂದಿಸಬಹುದು.
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಏಕೆ ಬಳಸಬೇಕು?
ಸಾಂಪ್ರದಾಯಿಕ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಹಲವಾರು ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತವೆ:
- ಸುಧಾರಿತ ಕಾಂಪೊನೆಂಟ್ ಮರುಬಳಕೆ: ಸಂಕೀರ್ಣ ಮೀಡಿಯಾ ಕ್ವೆರಿ ತರ್ಕದ ಅಗತ್ಯವಿಲ್ಲದೆ, ವಿಭಿನ್ನ ಲೇಔಟ್‌ಗಳಿಗೆ ಮನಬಂದಂತೆ ಹೊಂದಿಕೊಳ್ಳುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಿ.
- ಸರಳೀಕೃತ ಕೋಡ್: ರೆಸ್ಪಾನ್ಸಿವ್ ನಡವಳಿಕೆಯನ್ನು ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲೇ ಅಳವಡಿಸುವ ಮೂಲಕ ಅಗತ್ಯವಿರುವ ಸಿಎಸ್‌ಎಸ್‌ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡಿ.
- ವರ್ಧಿತ ನಿರ್ವಹಣೆ: ರೆಸ್ಪಾನ್ಸಿವ್ ತರ್ಕವನ್ನು ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಪ್ರತ್ಯೇಕಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಕೋಡ್‌ಬೇಸ್ ಅನ್ನು ನವೀಕರಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭಗೊಳಿಸಿ.
- ಹೆಚ್ಚು ಸಹಜವಾದ ವಿನ್ಯಾಸ: ತಮ್ಮ ತಕ್ಷಣದ ಪರಿಸರಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ, ಇದು ಹೆಚ್ಚು ಸಹಜ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.
- ಹೆಚ್ಚಿನ ನಮ್ಯತೆ: ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಂದ ಮಾತ್ರ ಸಾಧಿಸಲು ಕಷ್ಟಕರವಾದ ಅಥವಾ ಅಸಾಧ್ಯವಾದ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮತ್ತು ಸೂಕ್ಷ್ಮವಾದ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ಸಾಧಿಸಿ.
ಸಿಎಸ್‌ಎಸ್‌ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸುವ ಪ್ರಾಯೋಗಿಕ ಅಂಶಗಳನ್ನು ನೋಡೋಣ. ಮೊದಲ ಹಂತವೆಂದರೆ ಕಂಟೇನರ್ ಅನ್ನು ಘೋಷಿಸುವುದು. ನೀವು ಇದನ್ನು ಪೋಷಕ ಎಲಿಮೆಂಟ್ ಮೇಲೆ container-type ಪ್ರಾಪರ್ಟಿ ಬಳಸಿ ಮಾಡಬಹುದು:
1. ಕಂಟೇನರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು
container-type ಪ್ರಾಪರ್ಟಿಯು ಹಲವಾರು ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ:
size: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಕಂಟೇನರ್‌ನ ಇನ್‌ಲೈನ್ ಮತ್ತು ಬ್ಲಾಕ್ ಆಯಾಮಗಳೆರಡಕ್ಕೂ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ.inline-size: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಕೇವಲ ಕಂಟೇನರ್‌ನ ಇನ್‌ಲೈನ್ (ಸಮತಲ ಬರವಣಿಗೆಯ ಮೋಡ್‌ಗಳಲ್ಲಿ ಅಗಲ) ಆಯಾಮಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ. ಇದು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮತ್ತು ಉಪಯುಕ್ತ ಆಯ್ಕೆಯಾಗಿದೆ.block-size: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಕೇವಲ ಕಂಟೇನರ್‌ನ ಬ್ಲಾಕ್ (ಸಮತಲ ಬರವಣಿಗೆಯ ಮೋಡ್‌ಗಳಲ್ಲಿ ಎತ್ತರ) ಆಯಾಮಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ.normal: ಎಲಿಮೆಂಟ್ ಒಂದು ಕ್ವೆರಿ ಕಂಟೇನರ್ ಅಲ್ಲ. ಇದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದೆ.style: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳು ಮತ್ತು ಕಂಟೇನರ್ ನೇಮ್ ಕ್ವೆರಿಗಳಿಗೆ (ನಂತರ ವಿವರಿಸಲಾಗುವುದು) ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ, ಕಂಟೇನರ್‌ನಲ್ಲಿ ಸೆಟ್ ಮಾಡಲಾದ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಕ್ವೆರಿ ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಇನ್‌ಲೈನ್ ಗಾತ್ರಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಕಂಟೇನರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
.card-container {
container-type: inline-size;
}
ನೀವು container ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ container-type ಮತ್ತು container-name ಎರಡನ್ನೂ (ನಾವು ನಂತರ ಚರ್ಚಿಸುತ್ತೇವೆ) ಒಂದೇ ಘೋಷಣೆಯಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು:
.card-container {
container: card / inline-size;
}
ಈ ಸಂದರ್ಭದಲ್ಲಿ, 'card' ಎಂಬುದು ಕಂಟೇನರ್ ಹೆಸರು.
2. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬರೆಯುವುದು
ಒಮ್ಮೆ ನೀವು ಕಂಟೇನರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದ ನಂತರ, ನಿಮ್ಮ ಕ್ವೆರಿಗಳನ್ನು ಬರೆಯಲು ನೀವು @container ಅಟ್-ರೂಲ್ ಅನ್ನು ಬಳಸಬಹುದು. ಸಿಂಟ್ಯಾಕ್ಸ್ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಂತೆಯೇ ಇರುತ್ತದೆ, ಆದರೆ ವ್ಯೂಪೋರ್ಟ್ ಆಯಾಮಗಳನ್ನು ಗುರಿಯಾಗಿಸುವ ಬದಲು, ನೀವು ಕಂಟೇನರ್‌ನ ಆಯಾಮಗಳನ್ನು ಗುರಿಯಾಗಿಸುತ್ತೀರಿ:
@container card (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
}
.card__content {
width: 50%;
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು "card" ಕಂಟೇನರ್ ಅನ್ನು ಗುರಿಯಾಗಿಸುತ್ತಿದ್ದೇವೆ ಮತ್ತು ಕಂಟೇನರ್‌ನ ಅಗಲ ಕನಿಷ್ಠ 400px ಇದ್ದಾಗ .card, .card__image, ಮತ್ತು .card__content ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತಿದ್ದೇವೆ. `(min-width: 400px)` ಗಿಂತ ಮೊದಲು `card` ಇರುವುದನ್ನು ಗಮನಿಸಿ. ನೀವು `container-name` ಅಥವಾ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ `container` ಪ್ರಾಪರ್ಟಿ ಬಳಸಿ ನಿಮ್ಮ ಕಂಟೇನರ್‌ಗೆ ಹೆಸರಿಸಿದಾಗ ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.
ನೀವು ನಿಮ್ಮ ಕಂಟೇನರ್‌ಗೆ ಹೆಸರಿಸದಿದ್ದರೆ, ನೀವು ಕಂಟೇನರ್ ಹೆಸರನ್ನು ಬಿಟ್ಟುಬಿಡಬಹುದು:
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
}
.card__content {
width: 50%;
}
}
ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಲ್ಲಿ ಲಭ್ಯವಿರುವ min-width, max-width, min-height, max-height, ಮತ್ತು orientation ನಂತಹ ಅದೇ ಶ್ರೇಣಿಯ ಮೀಡಿಯಾ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀವು ಬಳಸಬಹುದು.
3. ಕಂಟೇನರ್ ಹೆಸರುಗಳು
ನಿಮ್ಮ ಕಂಟೇನರ್‌ಗಳಿಗೆ ಹೆಸರಿಸುವುದು ಸಹಾಯಕವಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ನೆಸ್ಟೆಡ್ ಕಂಟೇನರ್‌ಗಳು ಅಥವಾ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ. ನೀವು container-name ಪ್ರಾಪರ್ಟಿ ಬಳಸಿ ಕಂಟೇನರ್‌ಗೆ ಹೆಸರನ್ನು ನಿಯೋಜಿಸಬಹುದು:
.card-container {
container-name: card;
container-type: inline-size;
}
ನಂತರ, ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಲ್ಲಿ, ನೀವು ಅದರ ಹೆಸರಿನಿಂದ ಕಂಟೇನರ್ ಅನ್ನು ಗುರಿಯಾಗಿಸಬಹುದು:
@container card (min-width: 400px) {
/* 'card' ಕಂಟೇನರ್‌ಗಾಗಿ ಸ್ಟೈಲ್‌ಗಳು */
}
4. ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳು
ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳು ನಿಮ್ಮ ಕಂಟೇನರ್‌ನ ಗಾತ್ರದ ಬದಲು ಅದರ ಸ್ಟೈಲ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ. ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಶಕ್ತಿಯುತವಾಗಿರುತ್ತದೆ. ಮೊದಲು, ನೀವು ನಿಮ್ಮ ಕಂಟೇನರ್ ಅನ್ನು container-type: style ನೊಂದಿಗೆ ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು:
.component-container {
container-type: style;
}
ನಂತರ ನೀವು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ --theme ನ ಮೌಲ್ಯವನ್ನು ಕ್ವೆರಿ ಮಾಡಲು @container style(--theme: dark) ಅನ್ನು ಬಳಸಬಹುದು:
.component-container {
--theme: light;
}
@container style(--theme: dark) {
.component {
background-color: black;
color: white;
}
}
ಇದು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರದ ಬದಲಿಗೆ ಸಿಎಸ್‌ಎಸ್‌ ಮೂಲಕ ಸೆಟ್ ಮಾಡಲಾದ ಕಾನ್ಫಿಗರೇಶನ್‌ಗೆ ಅನುಗುಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಥೀಮಿಂಗ್ ಮತ್ತು ಡೈನಾಮಿಕ್ ಸ್ಟೈಲಿಂಗ್‌ಗೆ ಉತ್ತಮ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ.
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು
ನೈಜ-ಪ್ರಪಂಚದ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ಸ್ಪಷ್ಟ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ:
ಉದಾಹರಣೆ 1: ಒಂದು ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್
ಒಂದು ಉತ್ಪನ್ನದ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಪ್ರದರ್ಶಿಸುವ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಕಿರಿದಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ, ನಾವು ಚಿತ್ರ ಮತ್ತು ವಿಷಯವನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಲು ಬಯಸಬಹುದು. ವಿಶಾಲವಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ, ನಾವು ಅವುಗಳನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಬಹುದು.
HTML:
<div class="card-container">
<div class="card">
<img class="card__image" src="product.jpg" alt="Product Image">
<div class="card__content">
<h3 class="card__title">Product Title</h3>
<p class="card__description">Product description goes here.</p>
<a href="#" class="card__link">Learn More</a>
</div>
</div>
</div>
CSS:
.card-container {
container-type: inline-size;
}
.card {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
padding: 16px;
}
.card__image {
width: 100%;
margin-bottom: 16px;
}
.card__content {
width: 100%;
}
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
margin-bottom: 0;
}
.card__content {
width: 50%;
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಕಾರ್ಡ್ ಆರಂಭದಲ್ಲಿ ಚಿತ್ರ ಮತ್ತು ವಿಷಯವನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಕಂಟೇನರ್‌ನ ಅಗಲ 400px ತಲುಪಿದಾಗ, ಕಾರ್ಡ್ ಸಮತಲ ಲೇಔಟ್‌ಗೆ ಬದಲಾಗುತ್ತದೆ.
ಉದಾಹರಣೆ 2: ಒಂದು ನ್ಯಾವಿಗೇಷನ್ ಮೆನು
ಲಭ್ಯವಿರುವ ಸ್ಥಳಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾದ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವನ್ನು ಪರಿಗಣಿಸಿ. ಕಿರಿದಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ (ಉದಾ., ಮೊಬೈಲ್ ಸೈಡ್‌ಬಾರ್), ನಾವು ಮೆನು ಐಟಂಗಳನ್ನು ಲಂಬ ಪಟ್ಟಿಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಬಯಸಬಹುದು. ವಿಶಾಲವಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ (ಉದಾ., ಡೆಸ್ಕ್‌ಟಾಪ್ ಹೆಡರ್), ನಾವು ಅವುಗಳನ್ನು ಸಮತಲವಾಗಿ ಪ್ರದರ್ಶಿಸಬಹುದು.
HTML:
<nav class="nav-container">
<ul class="nav">
<li class="nav__item"><a href="#">Home</a></li>
<li class="nav__item"><a href="#">Products</a></li>
<li class="nav__item"><a href="#">Services</a></li>
<li class="nav__item"><a href="#">About</a></li>
<li class="nav__item"><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
.nav-container {
container-type: inline-size;
}
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav__item {
margin-bottom: 8px;
}
.nav__item a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: #333;
}
@container (min-width: 600px) {
.nav {
display: flex;
}
.nav__item {
margin-right: 16px;
margin-bottom: 0;
}
.nav__item a {
display: inline-block;
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನ್ಯಾವಿಗೇಷನ್ ಮೆನು ಆರಂಭದಲ್ಲಿ ಐಟಂಗಳನ್ನು ಲಂಬ ಪಟ್ಟಿಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಕಂಟೇನರ್‌ನ ಅಗಲ 600px ತಲುಪಿದಾಗ, ಮೆನು ಸಮತಲ ಲೇಔಟ್‌ಗೆ ಬದಲಾಗುತ್ತದೆ.
ಉದಾಹರಣೆ 3: ಫೀಚರ್ಡ್ ಇಮೇಜ್‌ನೊಂದಿಗೆ ಲೇಖನ ಲೇಔಟ್
ಅದನ್ನು ಎಲ್ಲಿ ಇರಿಸಲಾಗಿದೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾದ ಲೇಖನದ ಲೇಔಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಸಣ್ಣ ಪೂರ್ವವೀಕ್ಷಣೆ ವಿಭಾಗದಲ್ಲಿದ್ದರೆ, ಚಿತ್ರವು ಪಠ್ಯದ ಮೇಲೆ ಇರಬೇಕು. ಅದು ಮುಖ್ಯ ಲೇಖನವಾಗಿದ್ದರೆ, ಚಿತ್ರವು ಪಕ್ಕದಲ್ಲಿರಬಹುದು.
HTML
<article class="article-container">
<div class="article">
<img src="article-image.jpg" alt="Article Image" class="article-image">
<div class="article-content">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>
</article>
CSS
.article-container {
container-type: inline-size;
}
.article {
display: flex;
flex-direction: column;
}
.article-image {
width: 100%;
margin-bottom: 10px;
}
.article-content {
width: 100%;
}
@container (min-width: 768px) {
.article {
flex-direction: row;
}
.article-image {
width: 40%;
margin-right: 20px;
margin-bottom: 0;
}
.article-content {
width: 60%;
}
}
ಬ್ರೌಸರ್ ಬೆಂಬಲ
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಈಗ Chrome, Firefox, Safari, ಮತ್ತು Edge ಸೇರಿದಂತೆ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಅತ್ಯುತ್ತಮವಾಗಿದೆ. ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಬೆಂಬಲದ ಮಾಹಿತಿಗಾಗಿ Can I Use ಅನ್ನು ಪರಿಶೀಲಿಸುವುದು ಮುಖ್ಯ, ಏಕೆಂದರೆ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಅನುಷ್ಠಾನದ ವಿವರಗಳು ಬದಲಾಗಬಹುದು.
ಪರಿಗಣನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
- ಕಾರ್ಯಕ್ಷಮತೆ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಗಮನಾರ್ಹ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತವೆಯಾದರೂ, ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ಗಮನ ಹರಿಸುವುದು ಮುಖ್ಯ. ಸಂಕೀರ್ಣ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಅತಿಯಾದ ಬಳಕೆಯು ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು, ವಿಶೇಷವಾಗಿ ಹಳೆಯ ಸಾಧನಗಳಲ್ಲಿ. ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಅಗತ್ಯವಿದ್ದಂತೆ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ.
- ನೆಸ್ಟಿಂಗ್: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ನೆಸ್ಟ್ ಮಾಡಬಹುದು, ಇದು ಇನ್ನಷ್ಟು ಸಂಕೀರ್ಣ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ಅತಿಯಾಗಿ ಸಂಕೀರ್ಣಗೊಳಿಸದಂತೆ ಜಾಗರೂಕರಾಗಿರಿ, ಏಕೆಂದರೆ ಇದು ಅವುಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಕಷ್ಟಕರವಾಗಿಸಬಹುದು.
- ನಿರ್ದಿಷ್ಟತೆ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಗಿಂತ ಹೆಚ್ಚಿನ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಹೊಂದಿರುತ್ತವೆ, ಆದ್ದರಿಂದ ಅವು ಇತರ ಸಿಎಸ್‌ಎಸ್‌ ನಿಯಮಗಳೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹನ ನಡೆಸುತ್ತವೆ ಎಂಬುದರ ಬಗ್ಗೆ ತಿಳಿದಿರಲಿ. ನೀವು ಅನಿರೀಕ್ಷಿತ ಸ್ಟೈಲಿಂಗ್ ನಡವಳಿಕೆಯನ್ನು ಎದುರಿಸಿದರೆ ಸಿಎಸ್‌ಎಸ್‌ ನಿರ್ದಿಷ್ಟತೆ ಉಪಕರಣಗಳನ್ನು ಬಳಸಿ.
- ಪ್ರಗತಿಪರ ವರ್ಧನೆ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಪ್ರಗತಿಪರ ವರ್ಧನೆಯಾಗಿ ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಲ್ಲದೆ ಚೆನ್ನಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಮೂಲ ಲೇಔಟ್ ಅನ್ನು ಒದಗಿಸಿ, ಮತ್ತು ನಂತರ ಅವುಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಲೇಔಟ್ ಅನ್ನು ಹೆಚ್ಚಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ.
- ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳು: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳಲ್ಲಿ ಬಳಸಲು ವಿಶೇಷವಾಗಿ ಸೂಕ್ತವಾಗಿವೆ. ಅವು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಿಗೆ ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಬಲ್ಲ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ.
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು vs. ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು: ಯಾವುದನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು?
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಗೆ ಶಕ್ತಿಯುತ ಪರ್ಯಾಯವನ್ನು ನೀಡುತ್ತವೆಯಾದರೂ, ಪ್ರತಿಯೊಂದು ವಿಧಾನವು ಯಾವಾಗ ಹೆಚ್ಚು ಸೂಕ್ತವಾಗಿದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯ.
- ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು: ಒಟ್ಟಾರೆ ಪರದೆಯ ಗಾತ್ರ ಅಥವಾ ಸಾಧನದ ಗುಣಲಕ್ಷಣಗಳ (ಉದಾ., ಓರಿಯಂಟೇಶನ್, ರೆಸಲ್ಯೂಶನ್) ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ಲೇಔಟ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಬೇಕಾದಾಗ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ. ವಿಭಿನ್ನ ಸಾಧನಗಳಲ್ಲಿ ನಿಮ್ಮ ಲೇಔಟ್ ಬಳಸಲು ಯೋಗ್ಯವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವ್ಯಾಪಕ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಲು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಸೂಕ್ತವಾಗಿವೆ.
- ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು: ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಲಭ್ಯವಿರುವ ಸ್ಥಳದ ಆಧಾರದ ಮೇಲೆ ಅವುಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಬೇಕಾದಾಗ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಿಗೆ ಮನಬಂದಂತೆ ಹೊಂದಿಕೊಳ್ಳಬಲ್ಲ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಸೂಕ್ತವಾಗಿವೆ.
ಅನೇಕ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನೀವು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಮತ್ತು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳೆರಡರ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸುವ ಸಾಧ್ಯತೆಯಿದೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಒಟ್ಟಾರೆ ಲೇಔಟ್ ಅನ್ನು ಸ್ಥಾಪಿಸಲು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ, ಮತ್ತು ನಂತರ ಆ ಲೇಔಟ್‌ನಲ್ಲಿ ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ನೋಟ ಮತ್ತು ನಡವಳಿಕೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ.
ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸದ ಭವಿಷ್ಯ
ಸಿಎಸ್‌ಎಸ್‌ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸದ ವಿಕಾಸದಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಹೆಜ್ಜೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಎಲಿಮೆಂಟ್-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವ ಮೂಲಕ, ಅವು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ನಮ್ಯ, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತವೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸುಧಾರಿಸುತ್ತಾ ಹೋದಂತೆ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಪ್ರತಿಯೊಬ್ಬ ವೆಬ್ ಡೆವಲಪರ್‌ನ ಶಸ್ತ್ರಾಗಾರದಲ್ಲಿ ಅತ್ಯಗತ್ಯ ಸಾಧನವಾಗಲು ಸಿದ್ಧವಾಗಿವೆ.
ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು
ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ, ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪರಿಗಣಿಸಿ:
- ಪಠ್ಯದ ದಿಕ್ಕು: ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಎಡದಿಂದ-ಬಲಕ್ಕೆ (LTR) ಮತ್ತು ಬಲದಿಂದ-ಎಡಕ್ಕೆ (RTL) ಎರಡೂ ಪಠ್ಯ ದಿಕ್ಕುಗಳೊಂದಿಗೆ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
leftಮತ್ತುrightನಂತಹ ಭೌತಿಕ ಪ್ರಾಪರ್ಟಿಗಳ ಬದಲಿಗೆinline-startಮತ್ತುinline-endನಂತಹ ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ. - ಫಾಂಟ್ ಗಾತ್ರಗಳು: ವಿಭಿನ್ನ ಭಾಷೆಗಳಿಗೆ ಅತ್ಯುತ್ತಮ ಓದುವಿಕೆಗಾಗಿ ವಿಭಿನ್ನ ಫಾಂಟ್ ಗಾತ್ರಗಳು ಬೇಕಾಗಬಹುದು. ನಿಮ್ಮ ಪಠ್ಯವು ಸೂಕ್ತವಾಗಿ ಅಳೆಯಲ್ಪಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಾಪೇಕ್ಷ ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು (ಉದಾ.,
em,rem) ಬಳಸಿ. - ವಿಷಯದ ಉದ್ದ: ಕೆಲವು ಭಾಷೆಗಳು ಇಂಗ್ಲಿಷ್‌ನಂತೆಯೇ ಅದೇ ಮಾಹಿತಿಯನ್ನು ವ್ಯಕ್ತಪಡಿಸಲು ಹೆಚ್ಚು ಸ್ಥಳಾವಕಾಶದ ಅಗತ್ಯವಿರಬಹುದು. ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ವಿಭಿನ್ನ ವಿಷಯದ ಉದ್ದಗಳನ್ನು ಸರಿಹೊಂದಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ವಿಭಿನ್ನ ಭಾಷೆಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ.
- ಸಾಂಸ್ಕೃತಿಕ ಸಂಪ್ರದಾಯಗಳು: ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವಾಗ ಸಾಂಸ್ಕೃತಿಕ ಸಂಪ್ರದಾಯಗಳ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ಉದಾಹರಣೆಗೆ, ಚಿತ್ರಗಳು ಮತ್ತು ಪಠ್ಯದ ಸ್ಥಾನವು ವಿವಿಧ ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ ಬದಲಾಗಬಹುದು.
ತೀರ್ಮಾನ
ನಿಜವಾಗಿಯೂ ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಿಎಸ್‌ಎಸ್‌ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ. ಎಲಿಮೆಂಟ್-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಿಗೆ ಮನಬಂದಂತೆ ಹೊಂದಿಕೊಳ್ಳುವ, ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸುವ, ಮತ್ತು ಒಟ್ಟಾರೆ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಬೆಳೆಯುತ್ತಾ ಹೋದಂತೆ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಮೂಲಭೂತ ಭಾಗವಾಗಲು ಸಿದ್ಧವಾಗಿವೆ. ಈ ತಂತ್ರಜ್ಞಾನವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ, ಅದರ ಸಾಮರ್ಥ್ಯಗಳೊಂದಿಗೆ ಪ್ರಯೋಗಿಸಿ, ಮತ್ತು ನಿಮ್ಮ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳಲ್ಲಿ ಹೊಸ ಮಟ್ಟದ ನಮ್ಯತೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ಈ ವಿಧಾನವು ಉತ್ತಮ ಕಾಂಪೊನೆಂಟ್ ಮರುಬಳಕೆ, ನಿರ್ವಹಣೆ, ಮತ್ತು ಹೆಚ್ಚು ಸಹಜವಾದ ವಿನ್ಯಾಸ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಇದು ಪ್ರಪಂಚದಾದ್ಯಂತದ ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅಮೂಲ್ಯ ಆಸ್ತಿಯಾಗಿದೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಗೆ ಪರಿವರ್ತನೆಯು ವಿನ್ಯಾಸಕ್ಕೆ ಹೆಚ್ಚು ಕಾಂಪೊನೆಂಟ್-ಕೇಂದ್ರಿತ ವಿಧಾನವನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ, ಇದರ ಪರಿಣಾಮವಾಗಿ ಜಗತ್ತಿನಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ವೆಬ್ ಅನುಭವಗಳು ಲಭಿಸುತ್ತವೆ.