ಆಧುನಿಕ ಸಿಎಸ್‌ಎಸ್ ಲೇಔಟ್‌ಗಳು: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಆಳವಾದ ನೋಟ

ಹಲವಾರು ವರ್ಷಗಳಿಂದ, ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಸ್ಪಂದನಾಶೀಲ ವೆಬ್ ವಿನ್ಯಾಸದ ಆಧಾರಸ್ತಂಭವಾಗಿವೆ. ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರದ ಆಧಾರದ ಮೇಲೆ ನಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಅವು ನಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಬ್ರೌಸರ್ ವಿಂಡೋದ ಅಳತೆಗಳ ಮೇಲೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಇದು ಕೆಲವೊಮ್ಮೆ, ವಿಶೇಷವಾಗಿ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, ವಿಚಿತ್ರವಾದ ಸಂದರ್ಭಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಇಲ್ಲಿಗೆ ಬರುತ್ತದೆ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು – ಇದು ಒಂದು ಕ್ರಾಂತಿಕಾರಕ ಸಿಎಸ್‌ಎಸ್ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಒಟ್ಟಾರೆ ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಬದಲಾಗಿ, ಅವುಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಎಂದರೇನು?

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು, ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಿಂದ ಅಧಿಕೃತವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದ್ದು, ಸ್ಪಂದನಾಶೀಲ ವಿನ್ಯಾಸಕ್ಕೆ ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್-ಕೇಂದ್ರಿತ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತವೆ. ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರವನ್ನು ಅವಲಂಬಿಸದೆ, ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಮ್ಮ ಪೋಷಕ ಕಂಟೇನರ್‌ನ ಅಳತೆಗಳ ಆಧಾರದ ಮೇಲೆ ತಮ್ಮ ನೋಟ ಮತ್ತು ನಡವಳಿಕೆಯನ್ನು ಸರಿಹೊಂದಿಸಲು ಅವು ಅಧಿಕಾರ ನೀಡುತ್ತವೆ. ಇದು ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳು ಮತ್ತು ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಹೆಚ್ಚಿನ ನಮ್ಯತೆ ಮತ್ತು ಮರುಬಳಕೆಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ.

ಒಂದು ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಅದು ಕಿರಿದಾದ ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ ಇರಿಸಲಾಗಿದೆಯೇ ಅಥವಾ ವಿಶಾಲವಾದ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶದಲ್ಲಿದೆಯೇ ಎಂಬುದನ್ನು ಅವಲಂಬಿಸಿ ವಿಭಿನ್ನವಾಗಿ ಪ್ರದರ್ಶಿಸಬೇಕಾಗುತ್ತದೆ. ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳೊಂದಿಗೆ, ನೀವು ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರವನ್ನು ಅವಲಂಬಿಸಬೇಕಾಗಬಹುದು ಮತ್ತು ಸಂಭಾವ್ಯವಾಗಿ ಸಿಎಸ್‌ಎಸ್ ನಿಯಮಗಳನ್ನು ನಕಲು ಮಾಡಬೇಕಾಗಬಹುದು. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ, ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ತನ್ನ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಸ್ಥಳದ ಆಧಾರದ ಮೇಲೆ ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಏಕೆ ಬಳಸಬೇಕು?

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸುವುದರ ಪ್ರಮುಖ ಅನುಕೂಲಗಳ ವಿವರಣೆ ಇಲ್ಲಿದೆ:

ಸುಧಾರಿತ ಕಾಂಪೊನೆಂಟ್ ಮರುಬಳಕೆ: ಕಾಂಪೊನೆಂಟ್‌ಗಳು ನಿಜವಾಗಿಯೂ ಸ್ವತಂತ್ರವಾಗುತ್ತವೆ ಮತ್ತು ನಿರ್ದಿಷ್ಟ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರಗಳಿಗೆ ಬಿಗಿಯಾಗಿ ಜೋಡಿಸಬೇಕಾದ ಅಗತ್ಯವಿಲ್ಲದೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿವಿಧ ಭಾಗಗಳಲ್ಲಿ ಮನಬಂದಂತೆ ಮರುಬಳಕೆ ಮಾಡಬಹುದು. ಒಂದು ಸುದ್ದಿ ಲೇಖನದ ಕಾರ್ಡ್ ಬಗ್ಗೆ ಯೋಚಿಸಿ: ಅದು ಕೇವಲ ಒಳಗೊಂಡಿರುವ ಕಾಲಮ್‌ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ, ಮುಖ್ಯ ಭಾಗಕ್ಕೆ ಹೋಲಿಸಿದರೆ ಸೈಡ್ ಕಾಲಮ್‌ನಲ್ಲಿ ವಿಭಿನ್ನವಾಗಿ ಪ್ರದರ್ಶಿಸಬಹುದು.
ಹೆಚ್ಚು ನಮ್ಯತೆಯ ಲೇಔಟ್‌ಗಳು: ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಮ್ಮ ಸಂದರ್ಭಕ್ಕೆ ಅನುಗುಣವಾಗಿ ವಿಭಿನ್ನವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾದ ಸಂಕೀರ್ಣ ವಿನ್ಯಾಸಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತವೆ. ಇ-ಕಾಮರ್ಸ್ ಉತ್ಪನ್ನ ಪಟ್ಟಿ ಪುಟವನ್ನು ಪರಿಗಣಿಸಿ. ನೀವು *ಸ್ಕ್ರೀನ್* ಅಗಲದ ಆಧಾರದ ಮೇಲೆ ಅಲ್ಲ, ಬದಲಿಗೆ *ಉತ್ಪನ್ನ ಪಟ್ಟಿ ಕಂಟೇನರ್*ನ ಅಗಲದ ಆಧಾರದ ಮೇಲೆ ಪ್ರತಿ ಸಾಲಿಗೆ ಐಟಂಗಳ ಸಂಖ್ಯೆಯನ್ನು ಬದಲಾಯಿಸಬಹುದು, ಅದು ಸ್ವತಃ ಬದಲಾಗಬಹುದು.
ಸಿಎಸ್‌ಎಸ್ ಬ್ಲೋಟ್ ಕಡಿಮೆ: ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಸ್ಪಂದನಾಶೀಲ ತರ್ಕವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ, ನೀವು ಸಿಎಸ್‌ಎಸ್ ನಿಯಮಗಳನ್ನು ನಕಲು ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಬಹುದು ಮತ್ತು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಸಂಘಟಿತ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ಪ್ರತಿ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ನಿರ್ದಿಷ್ಟ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರಗಳನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡು ಅನೇಕ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಹೊಂದುವ ಬದಲು, ನೀವು ನೇರವಾಗಿ ಕಾಂಪೊನೆಂಟ್‌ನ ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ಸ್ಪಂದನಾಶೀಲ ನಡವಳಿಕೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.
ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವ: ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಪ್ರಸ್ತುತಿಯನ್ನು ಅವುಗಳ ನಿರ್ದಿಷ್ಟ ಸಂದರ್ಭಕ್ಕೆ ತಕ್ಕಂತೆ ಹೊಂದಿಸುವ ಮೂಲಕ, ನೀವು ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ಹೆಚ್ಚು ಸ್ಥಿರ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ರಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನ್ಯಾವಿಗೇಷನ್ ಮೆನು ಚಿಕ್ಕ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಹೆಚ್ಚು ಕಾಂಪ್ಯಾಕ್ಟ್ ರೂಪಕ್ಕೆ ರೂಪಾಂತರಗೊಳ್ಳಬಹುದು, ಇದು ಸ್ಥಳ ಮತ್ತು ಉಪಯುಕ್ತತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುತ್ತದೆ.
ವರ್ಧಿತ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಸಾಮರ್ಥ್ಯಗಳು: ದೃಢವಾದ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರ್ಮಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ, ಇದು ವಿವಿಧ ಸಂದರ್ಭಗಳು ಮತ್ತು ಲೇಔಟ್‌ಗಳಿಗೆ ಮನಬಂದಂತೆ ಸಂಯೋಜಿಸುವ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುವುದು

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸುವುದು ಕೆಲವು ಪ್ರಮುಖ ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ:

ಕಂಟೇನರ್ ವ್ಯಾಖ್ಯಾನ: `container-type` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕಂಟೇನರ್ ಎಂದು ಗೊತ್ತುಪಡಿಸಿ. ಇದು ಕ್ವೆರಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಗಡಿಗಳನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ.
ಕ್ವೆರಿ ವ್ಯಾಖ್ಯಾನ: `@container` at-rule ಬಳಸಿ ಕ್ವೆರಿ ಷರತ್ತುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ. ಇದು `@media` ಗೆ ಹೋಲುತ್ತದೆ, ಆದರೆ ವ್ಯೂಪೋರ್ಟ್ ಪ್ರಾಪರ್ಟಿಗಳ ಬದಲಿಗೆ, ನೀವು ಕಂಟೇನರ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಕ್ವೆರಿ ಮಾಡುತ್ತೀರಿ.
ಶೈಲಿಗಳ ಅನ್ವಯ: ಕ್ವೆರಿ ಷರತ್ತುಗಳನ್ನು ಪೂರೈಸಿದಾಗ ಅನ್ವಯಿಸಬೇಕಾದ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಿ. ಈ ಶೈಲಿಗಳು ಕಂಟೇನರ್‌ನೊಳಗಿನ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಮಾತ್ರ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ.

1. ಕಂಟೇನರ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವುದು

ಮೊದಲ ಹಂತವೆಂದರೆ ಯಾವ ಎಲಿಮೆಂಟ್ ಕಂಟೇನರ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು. ಇದಕ್ಕಾಗಿ ನೀವು `container-type` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಬಹುದು. ಹಲವಾರು ಸಂಭಾವ್ಯ ಮೌಲ್ಯಗಳಿವೆ:

`size`: ಕಂಟೇನರ್ ಇನ್‌ಲೈನ್ (ಅಗಲ) ಮತ್ತು ಬ್ಲಾಕ್ (ಎತ್ತರ) ಎರಡೂ ಆಯಾಮಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ.
`inline-size`: ಕಂಟೇನರ್ ತನ್ನ ಇನ್‌ಲೈನ್ ಆಯಾಮವನ್ನು (ಸಾಮಾನ್ಯವಾಗಿ ಅಗಲ) ಮಾತ್ರ ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ. ಇದು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಯ್ಕೆಯಾಗಿದೆ.
`normal`: ಎಲಿಮೆಂಟ್ ಒಂದು ಕ್ವೆರಿ ಕಂಟೇನರ್ ಅಲ್ಲ (ಡೀಫಾಲ್ಟ್).

ಇಲ್ಲೊಂದು ಉದಾಹರಣೆ ಇದೆ:


.card-container {
  container-type: inline-size;
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `.card-container` ಎಲಿಮೆಂಟ್ ಅನ್ನು ಅದರ ಇನ್‌ಲೈನ್ ಗಾತ್ರವನ್ನು (ಅಗಲ) ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಕಂಟೇನರ್ ಆಗಿ ಗೊತ್ತುಪಡಿಸಲಾಗಿದೆ.

2. ಕಂಟೇನರ್ ಕ್ವೆರಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಮುಂದೆ, ನೀವು `@container` at-rule ಬಳಸಿ ಕ್ವೆರಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ. ಕ್ವೆರಿಯೊಳಗಿನ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ಪೂರೈಸಬೇಕಾದ ಷರತ್ತುಗಳನ್ನು ಇಲ್ಲಿ ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತೀರಿ.

ಕಂಟೇನರ್ ಕನಿಷ್ಠ 500 ಪಿಕ್ಸೆಲ್‌ಗಳಷ್ಟು ಅಗಲವಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುವ ಒಂದು ಸರಳ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:


@container (min-width: 500px) {
  .card {
    flex-direction: row; /* ಕಾರ್ಡ್ ಲೇಔಟ್ ಅನ್ನು ಬದಲಾಯಿಸಿ */
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `.card-container` ಎಲಿಮೆಂಟ್ ಕನಿಷ್ಠ 500 ಪಿಕ್ಸೆಲ್‌ಗಳಷ್ಟು ಅಗಲವಾಗಿದ್ದರೆ, `.card` ಎಲಿಮೆಂಟ್‌ನ `flex-direction` ಅನ್ನು `row` ಗೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ.

ನೀವು `max-width`, `min-height`, `max-height` ಅನ್ನು ಸಹ ಬಳಸಬಹುದು ಮತ್ತು `and` ಮತ್ತು `or` ನಂತಹ ತಾರ್ಕಿಕ ಆಪರೇಟರ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅನೇಕ ಷರತ್ತುಗಳನ್ನು ಸಂಯೋಜಿಸಬಹುದು.


@container (min-width: 300px) and (max-width: 700px) {
  .card-title {
    font-size: 1.2em;
  }
}

ಈ ಉದಾಹರಣೆಯು ಕಂಟೇನರ್‌ನ ಅಗಲ 300px ಮತ್ತು 700px ನಡುವೆ ಇದ್ದಾಗ ಮಾತ್ರ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.

3. ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುವುದು

`@container` at-rule ಒಳಗೆ, ನೀವು ಕಂಟೇನರ್‌ನೊಳಗಿನ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ನಿಮಗೆ ಬೇಕಾದ ಯಾವುದೇ ಸಿಎಸ್‌ಎಸ್ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಕ್ವೆರಿ ಷರತ್ತುಗಳನ್ನು ಪೂರೈಸಿದಾಗ ಮಾತ್ರ ಈ ಶೈಲಿಗಳು ಅನ್ವಯವಾಗುತ್ತವೆ.

ಎಲ್ಲಾ ಹಂತಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಸಂಪೂರ್ಣ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:



  
    Product Title
    A brief description of the product.
    Learn More


.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 1em;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-title {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.card-button {
  background-color: #007bff;
  color: white;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 5px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card-title {
    font-size: 1.8em;
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `.card-container` ಕನಿಷ್ಠ 500 ಪಿಕ್ಸೆಲ್‌ಗಳಷ್ಟು ಅಗಲವಾದಾಗ, `.card` ಎಲಿಮೆಂಟ್ ಅಡ್ಡವಾದ ಲೇಔಟ್‌ಗೆ ಬದಲಾಗುತ್ತದೆ, ಮತ್ತು `.card-title` ನ ಗಾತ್ರವು ಹೆಚ್ಚಾಗುತ್ತದೆ.

ಕಂಟೇನರ್ ಹೆಸರುಗಳು

ನೀವು `container-name: my-card;` ಬಳಸಿ ಕಂಟೇನರ್‌ಗಳಿಗೆ ಹೆಸರು ನೀಡಬಹುದು. ಇದು ನಿಮ್ಮ ಕ್ವೆರಿಗಳಲ್ಲಿ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾಗಿರಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ನೀವು ನೆಸ್ಟೆಡ್ ಕಂಟೇನರ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ.


.card-container {
  container-type: inline-size;
  container-name: my-card;
}

@container my-card (min-width: 500px) {
  /* "my-card" ಹೆಸರಿನ ಕಂಟೇನರ್ ಕನಿಷ್ಠ 500px ಅಗಲವಾದಾಗ ಅನ್ವಯಿಸುವ ಶೈಲಿಗಳು */
}

ನೀವು ಪುಟದಲ್ಲಿ ಅನೇಕ ಕಂಟೇನರ್‌ಗಳನ್ನು ಹೊಂದಿರುವಾಗ ಮತ್ತು ನಿಮ್ಮ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ನಿರ್ದಿಷ್ಟವಾದ ಒಂದನ್ನು ಗುರಿಯಾಗಿಸಲು ಬಯಸಿದಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿ ಯೂನಿಟ್‌ಗಳು

ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಂತೆಯೇ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ತಮ್ಮದೇ ಆದ ಯೂನಿಟ್‌ಗಳನ್ನು ಹೊಂದಿವೆ, ಅವು ಕಂಟೇನರ್‌ಗೆ ಸಂಬಂಧಿಸಿರುತ್ತವೆ. ಅವುಗಳೆಂದರೆ:

`cqw`: ಕಂಟೇನರ್‌ನ ಅಗಲದ 1%.
`cqh`: ಕಂಟೇನರ್‌ನ ಎತ್ತರದ 1%.
`cqi`: ಕಂಟೇನರ್‌ನ ಇನ್‌ಲೈನ್ ಗಾತ್ರದ 1% (ಅಡ್ಡ ಬರವಣಿಗೆಯ ಮೋಡ್‌ಗಳಲ್ಲಿ ಅಗಲ).
`cqb`: ಕಂಟೇನರ್‌ನ ಬ್ಲಾಕ್ ಗಾತ್ರದ 1% (ಅಡ್ಡ ಬರವಣಿಗೆಯ ಮೋಡ್‌ಗಳಲ್ಲಿ ಎತ್ತರ).
`cqmin`: `cqi` ಅಥವಾ `cqb` ನಲ್ಲಿ ಚಿಕ್ಕದು.
`cqmax`: `cqi` ಅಥವಾ `cqb` ನಲ್ಲಿ ದೊಡ್ಡದು.

ಈ ಯೂನಿಟ್‌ಗಳು ಕಂಟೇನರ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಗಾತ್ರಗಳು ಮತ್ತು ಅಂತರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಉಪಯುಕ್ತವಾಗಿವೆ, ಇದು ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳ ನಮ್ಯತೆಯನ್ನು ಮತ್ತಷ್ಟು ಹೆಚ್ಚಿಸುತ್ತದೆ.


.element {
  width: 50cqw;
  font-size: 2cqmin;
}

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನೀವು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದಕ್ಕೆ ಕೆಲವು ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:

1. ಸ್ಪಂದನಾಶೀಲ ನ್ಯಾವಿಗೇಷನ್ ಮೆನು

ಒಂದು ನ್ಯಾವಿಗೇಷನ್ ಮೆನು ತನ್ನ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಸ್ಥಳದ ಆಧಾರದ ಮೇಲೆ ತನ್ನ ಲೇಔಟ್ ಅನ್ನು ಹೊಂದಿಕೊಳ್ಳಬಹುದು. ಕಿರಿದಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ, ಅದು ಹ್ಯಾಂಬರ್ಗರ್ ಮೆನು ಆಗಿ ಕುಗ್ಗಬಹುದು, ಆದರೆ ವಿಶಾಲವಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ, ಅದು ಎಲ್ಲಾ ಮೆನು ಐಟಂಗಳನ್ನು ಅಡ್ಡಲಾಗಿ ಪ್ರದರ್ಶಿಸಬಹುದು.

2. ಹೊಂದಿಕೊಳ್ಳುವ ಉತ್ಪನ್ನ ಪಟ್ಟಿ

ಇ-ಕಾಮರ್ಸ್ ಉತ್ಪನ್ನ ಪಟ್ಟಿಯು ತನ್ನ ಕಂಟೇನರ್‌ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಪ್ರತಿ ಸಾಲಿನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾದ ಉತ್ಪನ್ನಗಳ ಸಂಖ್ಯೆಯನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು. ವಿಶಾಲವಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ, ಇದು ಪ್ರತಿ ಸಾಲಿಗೆ ಹೆಚ್ಚಿನ ಉತ್ಪನ್ನಗಳನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು, ಆದರೆ ಕಿರಿದಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ, ಜನದಟ್ಟಣೆಯನ್ನು ತಪ್ಪಿಸಲು ಕಡಿಮೆ ಉತ್ಪನ್ನಗಳನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು.

3. ನಮ್ಯತೆಯುಳ್ಳ ಲೇಖನ ಕಾರ್ಡ್

ಒಂದು ಲೇಖನ ಕಾರ್ಡ್ ಲಭ್ಯವಿರುವ ಸ್ಥಳದ ಆಧಾರದ ಮೇಲೆ ತನ್ನ ಲೇಔಟ್ ಅನ್ನು ಬದಲಾಯಿಸಬಹುದು. ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ, ಅದು ಸಣ್ಣ ಥಂಬ್‌ನೇಲ್ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ವಿವರಣೆಯನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು, ಆದರೆ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶದಲ್ಲಿ, ಅದು ದೊಡ್ಡ ಚಿತ್ರ ಮತ್ತು ಹೆಚ್ಚು ವಿವರವಾದ ಸಾರಾಂಶವನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು.

4. ಡೈನಾಮಿಕ್ ಫಾರ್ಮ್ ಎಲಿಮೆಂಟ್‌ಗಳು

ಫಾರ್ಮ್ ಎಲಿಮೆಂಟ್‌ಗಳು ಕಂಟೇನರ್ ಅನ್ನು ಆಧರಿಸಿ ತಮ್ಮ ಗಾತ್ರ ಮತ್ತು ಲೇಔಟ್ ಅನ್ನು ಹೊಂದಿಕೊಳ್ಳಬಹುದು. ಉದಾಹರಣೆಗೆ, ಹುಡುಕಾಟ ಬಾರ್ ವೆಬ್‌ಸೈಟ್‌ನ ಹೆಡರ್‌ನಲ್ಲಿ ಅಗಲವಾಗಿರಬಹುದು ಮತ್ತು ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ ಕಿರಿದಾಗಿರಬಹುದು.

5. ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ವಿಜೆಟ್‌ಗಳು

ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ವಿಜೆಟ್‌ಗಳು ತಮ್ಮ ಕಂಟೇನರ್‌ನ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ತಮ್ಮ ವಿಷಯ ಮತ್ತು ಪ್ರಸ್ತುತಿಯನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು. ಗ್ರಾಫ್ ವಿಜೆಟ್ ದೊಡ್ಡ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಹೆಚ್ಚಿನ ಡೇಟಾ ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಮತ್ತು ಸಣ್ಣ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಕಡಿಮೆ ಡೇಟಾ ಪಾಯಿಂಟ್‌ಗಳನ್ನು ತೋರಿಸಬಹುದು.

ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸುವಾಗ, ನಿಮ್ಮ ವಿನ್ಯಾಸದ ಆಯ್ಕೆಗಳ ಜಾಗತಿಕ ಪರಿಣಾಮಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯ.

ಸ್ಥಳೀಕರಣ: ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳು ವಿವಿಧ ಭಾಷೆಗಳಿಗೆ ಮತ್ತು ಪಠ್ಯ ನಿರ್ದೇಶನಗಳಿಗೆ ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಕೆಲವು ಭಾಷೆಗಳಿಗೆ ಇತರರಿಗಿಂತ ಹೆಚ್ಚು ಸ್ಥಳಾವಕಾಶ ಬೇಕಾಗಬಹುದು, ಆದ್ದರಿಂದ ವಿಭಿನ್ನ ಪಠ್ಯದ ಉದ್ದಗಳಿಗೆ ಸರಿಹೊಂದಬಲ್ಲ ನಮ್ಯತೆಯ ಲೇಔಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು ಮುಖ್ಯ.
ಪ್ರವೇಶಿಸುವಿಕೆ: ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಪ್ರವೇಶಿಸುವಿಕೆಗೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರದಂತೆ ನೋಡಿಕೊಳ್ಳಿ. ಅಂಗವಿಕಲರಿಗೆ ಅವುಗಳು ಬಳಸಲು ಯೋಗ್ಯವಾಗಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.
ಕಾರ್ಯಕ್ಷಮತೆ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಗಮನಾರ್ಹ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತವೆಯಾದರೂ, ಅವುಗಳನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸುವುದು ಮುಖ್ಯ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದರಿಂದ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಸಂಭಾವ್ಯವಾಗಿ ಪರಿಣಾಮ ಬೀರಬಹುದು.
ಬಲದಿಂದ ಎಡಕ್ಕೆ (RTL) ಭಾಷೆಗಳು: ಅರೇಬಿಕ್ ಅಥವಾ ಹೀಬ್ರೂ ನಂತಹ RTL ಭಾಷೆಗಳಿಗಾಗಿ ವಿನ್ಯಾಸ ಮಾಡುವಾಗ, ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಲೇಔಟ್ ಮಿರರಿಂಗ್ ಅನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. `margin-left` ಮತ್ತು `margin-right` ನಂತಹ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸರಿಹೊಂದಿಸಬೇಕಾಗಬಹುದು.

ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಪಾಲಿಫಿಲ್‌ಗಳು

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು Chrome, Firefox, Safari, ಮತ್ತು Edge ಸೇರಿದಂತೆ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಉತ್ತಮ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ. ಆದಾಗ್ಯೂ, ನೀವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕಾದರೆ, ನೀವು @container-style/container-query ನಂತಹ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಬಳಸಬಹುದು. ಈ ಪಾಲಿಫಿಲ್ ಸ್ಥಳೀಯವಾಗಿ ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಬೆಂಬಲವನ್ನು ಸೇರಿಸುತ್ತದೆ.

ಉತ್ಪಾದನಾ ಪರಿಸರದಲ್ಲಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸುವ ಮೊದಲು, ಪ್ರಸ್ತುತ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಪರಿಶೀಲಿಸುವುದು ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಪಾಲಿಫಿಲ್ ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸುವುದು ಯಾವಾಗಲೂ ಒಳ್ಳೆಯದು.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ನೆನಪಿನಲ್ಲಿಡಬೇಕಾದ ಕೆಲವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:

ಮೊಬೈಲ್-ಫಸ್ಟ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ: ಮೊದಲು ಸಣ್ಣ ಕಂಟೇನರ್‌ಗಳಿಗಾಗಿ ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ ಮತ್ತು ನಂತರ ದೊಡ್ಡ ಕಂಟೇನರ್‌ಗಳಿಗಾಗಿ ಅವುಗಳನ್ನು ಹೆಚ್ಚಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ. ಈ ವಿಧಾನವು ಎಲ್ಲಾ ಸಾಧನಗಳಲ್ಲಿ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಅರ್ಥಪೂರ್ಣ ಕಂಟೇನರ್ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ಓದಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಮಾಡಲು ವಿವರಣಾತ್ಮಕ ಕಂಟೇನರ್ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ.
ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.
ಸರಳವಾಗಿಡಿ: ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ರಚಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ನಿಮ್ಮ ಕ್ವೆರಿಗಳು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದಷ್ಟೂ, ಅವುಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಕಷ್ಟವಾಗುತ್ತದೆ.
ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಗಮನಾರ್ಹ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತವೆಯಾದರೂ, ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ಗಮನ ಹರಿಸುವುದು ಮುಖ್ಯ. ಒಂದೇ ಪುಟದಲ್ಲಿ ಹಲವಾರು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ, ಮತ್ತು ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು vs. ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು: ಒಂದು ಹೋಲಿಕೆ

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಮತ್ತು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಎರಡನ್ನೂ ಸ್ಪಂದನಾಶೀಲ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಬಳಸಲಾಗುತ್ತದೆಯಾದರೂ, ಅವು ವಿಭಿನ್ನ ತತ್ವಗಳ ಮೇಲೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಮತ್ತು ವಿಭಿನ್ನ ಸನ್ನಿವೇಶಗಳಿಗೆ ಸೂಕ್ತವಾಗಿವೆ.

ವೈಶಿಷ್ಟ್ಯ	ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು	ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು
ಗುರಿ	ಕಂಟೇನರ್ ಗಾತ್ರ	ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರ
ವ್ಯಾಪ್ತಿ	ಕಾಂಪೊನೆಂಟ್-ಮಟ್ಟ	ಜಾಗತಿಕ
ಮರುಬಳಕೆ	ಹೆಚ್ಚು	ಕಡಿಮೆ
ನಿರ್ದಿಷ್ಟತೆ	ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟ	ಕಡಿಮೆ ನಿರ್ದಿಷ್ಟ
ಬಳಕೆಯ ಪ್ರಕರಣಗಳು	ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ಸಂದರ್ಭಕ್ಕೆ ಹೊಂದಿಸುವುದು	ಒಟ್ಟಾರೆ ಲೇಔಟ್ ಅನ್ನು ವಿವಿಧ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಸುವುದು

ಸಾಮಾನ್ಯವಾಗಿ, ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಅವುಗಳ ಸಂದರ್ಭಕ್ಕೆ ಹೊಂದಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಉತ್ತಮವಾಗಿವೆ, ಆದರೆ ಒಟ್ಟಾರೆ ಲೇಔಟ್ ಅನ್ನು ವಿವಿಧ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಸಲು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಉತ್ತಮವಾಗಿವೆ. ನೀವು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಲೇಔಟ್‌ಗಳಿಗಾಗಿ ಎರಡನ್ನೂ ಸಂಯೋಜಿಸಬಹುದು.

ಸಿಎಸ್‌ಎಸ್ ಲೇಔಟ್‌ಗಳ ಭವಿಷ್ಯ

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಸಿಎಸ್‌ಎಸ್ ಲೇಔಟ್‌ಗಳ ವಿಕಾಸದಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಹೆಜ್ಜೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಮ್ಮ ಕಂಟೇನರ್ ಅನ್ನು ಆಧರಿಸಿ ಹೊಂದಿಕೊಳ್ಳಲು ಅಧಿಕಾರ ನೀಡುವ ಮೂಲಕ, ಅವು ಹೆಚ್ಚು ನಮ್ಯ, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ, ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಕೋಡ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತವೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸುಧಾರಿಸುತ್ತಿದ್ದಂತೆ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅತ್ಯಗತ್ಯ ಸಾಧನವಾಗಲಿವೆ.

ತೀರ್ಮಾನ

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಸಿಎಸ್‌ಎಸ್ ಜಗತ್ತಿಗೆ ಒಂದು ಶಕ್ತಿಯುತ ಸೇರ್ಪಡೆಯಾಗಿದ್ದು, ಸ್ಪಂದನಾಶೀಲ ವಿನ್ಯಾಸಕ್ಕೆ ಹೆಚ್ಚು ಕಾಂಪೊನೆಂಟ್-ಕೇಂದ್ರಿತ ವಿಧಾನವನ್ನು ನೀಡುತ್ತವೆ. ಅವು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಮತ್ತು ಅವುಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್ ಲೇಔಟ್‌ಗಳಲ್ಲಿ ಹೊಸ ಮಟ್ಟದ ನಮ್ಯತೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ!