CSS @container ಕುರಿತಾದ ಸಮಗ್ರ ಅನ್ವೇಷಣೆ, ಅದರ ವ್ಯಾಖ್ಯಾನ, ಸಿಂಟ್ಯಾಕ್ಸ್, ಮತ್ತು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ನಿಜವಾಗಿಯೂ ಹೊಂದಿಕೊಳ್ಳುವ ಹಾಗೂ ಮಾಡ್ಯುಲರ್ ವೆಬ್ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ರಚಿಸಲು ಅದರ ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು.
CSS @container: ಆಧುನಿಕ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು
ವೆಬ್ ವಿನ್ಯಾಸದ ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವ ಕ್ಷೇತ್ರದಲ್ಲಿ, ಕೇವಲ ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಬದಲಾಗಿ, ತಮ್ಮ ತಕ್ಷಣದ ಪರಿಸರಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳುವ ನಿಜವಾದ ರೆಸ್ಪಾನ್ಸಿವ್ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ಸಾಧಿಸುವುದು ದೀರ್ಘಕಾಲದ ಆಕಾಂಕ್ಷೆಯಾಗಿದೆ. ಐತಿಹಾಸಿಕವಾಗಿ, CSS ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸದ ಮೂಲಾಧಾರವಾಗಿದ್ದು, ಬ್ರೌಸರ್ ವಿಂಡೋದ ಆಯಾಮಗಳನ್ನು ಆಧರಿಸಿ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಸರಿಹೊಂದಿಸಲು ನಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಟ್ಟಿವೆ. ಆದಾಗ್ಯೂ, ಒಂದು ದೊಡ್ಡ ಲೇಔಟ್‌ನೊಳಗೆ ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವಾಗ ಈ ವಿಧಾನವು ಮಿತಿಗಳನ್ನು ಒಡ್ಡುತ್ತದೆ. ಇಲ್ಲಿ CSS @container ಪ್ರವೇಶಿಸುತ್ತದೆ, ಇದು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವ ಮೂಲಕ ನಾವು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸವನ್ನು ಸಂಪರ್ಕಿಸುವ ರೀತಿಯಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟುಮಾಡುವ ಒಂದು ಶಕ್ತಿಯುತ ಹೊಸ ನಿಯಮವಾಗಿದೆ.
ವ್ಯೂಪೋರ್ಟ್-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್‌ನ ಮಿತಿಗಳು
ವರ್ಷಗಳಿಂದ, ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರೆಸ್ಪಾನ್ಸಿವ್ ಆಗಿ ಮಾಡಲು ಪ್ರಮುಖ ವಿಧಾನವು ವ್ಯೂಪೋರ್ಟ್-ಆಧಾರಿತ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಅವಲಂಬಿಸಿದೆ. @media (min-width: 768px) ನಂತಹ ಈ ಕ್ವೆರಿಗಳು, ಬ್ರೌಸರ್ ವಿಂಡೋದ ಅಗಲವನ್ನು ಅವಲಂಬಿಸಿ ಡೆವಲಪರ್‌ಗಳಿಗೆ ವಿಭಿನ್ನ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ. ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್ ಮಾನಿಟರ್‌ಗಳಿಂದ ಹಿಡಿದು ಸಣ್ಣ ಮೊಬೈಲ್ ಸಾಧನಗಳವರೆಗೆ ವಿವಿಧ ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ.
ಆದಾಗ್ಯೂ, ಒಂದು ಪ್ರಾಡಕ್ಟ್ ಕಾರ್ಡ್ ಅಥವಾ ಸೈಡ್‌ಬಾರ್ ವಿಜೆಟ್‌ನಂತಹ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ನೀವು ಹೊಂದಿರುವ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ, ಅದು ಒಂದು ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ನಲ್ಲಿ ತಾನು ಆಕ್ರಮಿಸಿಕೊಂಡಿರುವ ಸ್ಥಳವನ್ನು ಆಧರಿಸಿ ವಿಭಿನ್ನವಾಗಿ ಪ್ರದರ್ಶಿಸಬೇಕಾಗುತ್ತದೆ. ಕೇವಲ ವ್ಯೂಪೋರ್ಟ್-ಆಧಾರಿತ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಂದ, ಈ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಸ್ಟೈಲ್ ಮಾಡುವುದು ಸವಾಲಿನ ಸಂಗತಿಯಾಗುತ್ತದೆ. ಒಂದು ಪ್ರಾಡಕ್ಟ್ ಕಾರ್ಡ್ ಡೆಸ್ಕ್‌ಟಾಪ್‌ನಲ್ಲಿ ವಿಶಾಲವಾದ, ಬಹು-ಕಾಲಮ್ ಲೇಔಟ್‌ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಂಡರೆ, ಅದು ಟ್ಯಾಬ್ಲೆಟ್‌ನಲ್ಲಿ ಕಿರಿದಾದ, ಏಕ-ಕಾಲಮ್ ಲೇಔಟ್‌ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಂಡಾಗ ವಿಭಿನ್ನ ಪ್ರದರ್ಶನದ ಅಗತ್ಯವಿರಬಹುದು, ಒಟ್ಟಾರೆ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲವು ಒಂದೇ ಆಗಿದ್ದರೂ ಸಹ. ಏಕೆಂದರೆ ಕಾಂಪೊನೆಂಟ್‌ನ ಕಂಟೇನರ್ ಅದರ ಅತ್ಯುತ್ತಮ ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಿರ್ದೇಶಿಸುತ್ತದೆ, ಕೇವಲ ಜಾಗತಿಕ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರವಲ್ಲ.
ಕಾಂಪೊನೆಂಟ್-ಮಟ್ಟದ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್‌ನ ಅಗತ್ಯವು, ಎಲಿಮೆಂಟ್‌ಗಳ ಆಯಾಮಗಳನ್ನು ಅಳೆಯಲು ಮತ್ತು ಕ್ಲಾಸ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುವುದು, ಅಥವಾ ನಿರ್ವಹಿಸಲಾಗದಷ್ಟು ಸಂಕೀರ್ಣವಾದ CSS ನೆಸ್ಟಿಂಗ್‌ನಂತಹ ಪರ್ಯಾಯ ಮಾರ್ಗಗಳಿಗೆ ಕಾರಣವಾಗಿದೆ. CSS @container ಈ ಸಮಸ್ಯೆಗಳನ್ನು ಸ್ಥಳೀಯ CSS ಪರಿಹಾರವನ್ನು ಪರಿಚಯಿಸುವ ಮೂಲಕ ಪರಿಹರಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ.
CSS @container ಪರಿಚಯ: ಕಂಟೇನರ್ ಕ್ವೆರಿ ನಿಯಮ
CSS @container ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಪರಿಕಲ್ಪನೆಯನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ. ವ್ಯೂಪೋರ್ಟ್‌ನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಕ್ವೆರಿ ಮಾಡುವ ಬದಲು, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಪೂರ್ವಜ ಕಂಟೇನರ್‌ನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಕ್ವೆರಿ ಮಾಡಲು ನಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ, ಇದನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಕ್ವೆರಿ ಕಂಟೇನರ್ ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ.
ಇದನ್ನು ಈ ರೀತಿ ಯೋಚಿಸಿ: "ಬ್ರೌಸರ್ ವಿಂಡೋ ಎಷ್ಟು ಅಗಲವಿದೆ?" ಎಂದು ಕೇಳುವ ಬದಲು, ನಾವು ಈಗ "ಈ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಎಲಿಮೆಂಟ್ ಎಷ್ಟು ಅಗಲವಿದೆ?" ಎಂದು ಕೇಳಬಹುದು. ಇದು ಗಮನವನ್ನು ಜಾಗತಿಕ ಸಂದರ್ಭದಿಂದ (ವ್ಯೂಪೋರ್ಟ್) ಸ್ಥಳೀಯ ಸಂದರ್ಭಕ್ಕೆ (ಪೋಷಕ ಎಲಿಮೆಂಟ್ ಅಥವಾ ಗೊತ್ತುಪಡಿಸಿದ ಕಂಟೇನರ್) ಬದಲಾಯಿಸುತ್ತದೆ.
ಕ್ವೆರಿ ಕಂಟೇನರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಲು, ನೀವು ಮೊದಲು HTML ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕ್ವೆರಿ ಕಂಟೇನರ್ ಎಂದು ಗೊತ್ತುಪಡಿಸಬೇಕು. ಇದನ್ನು container-type ಪ್ರಾಪರ್ಟಿ ಬಳಸಿ ಸಾಧಿಸಲಾಗುತ್ತದೆ. ಈ ಪ್ರಾಪರ್ಟಿಯು ಬ್ರೌಸರ್‌ಗೆ ಈ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಅದರ ವಂಶಸ್ಥರನ್ನು ಗುರಿಯಾಗಿಸುವ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಗೆ ಒಂದು ಉಲ್ಲೇಖ ಬಿಂದುವಾಗಿ ಪರಿಗಣಿಸಬೇಕು ಎಂದು ಹೇಳುತ್ತದೆ.
container-type ಗೆ ಸಾಮಾನ್ಯ ಮೌಲ್ಯವೆಂದರೆ normal. ಆದಾಗ್ಯೂ, ಸ್ಟೈಲಿಂಗ್ ಉದ್ದೇಶಗಳಿಗಾಗಿ, ನೀವು ಹೆಚ್ಚಾಗಿ inline-size ಅಥವಾ size ಅನ್ನು ಬಳಸುತ್ತೀರಿ.
container-type: normal;: ಇದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದೆ. ಇದು ಒಂದು ಕ್ವೆರಿ ಕಂಟೇನರ್ ಅನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ ಆದರೆ ಪೊಸಿಷನಿಂಗ್‌ಗಾಗಿ ಹೊಸ ಕಂಟೈನಿಂಗ್ ಬ್ಲಾಕ್ ಅನ್ನು ರಚಿಸಬೇಕೆಂದೇನಿಲ್ಲ, ಮತ್ತು ಇದು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಸೈಜ್ ಕ್ವೆರಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವುದಿಲ್ಲ. ಪೂರ್ಣ ಕಾರ್ಯಚಟುವಟಿಕೆಗಾಗಿ ನೀವು ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಇತರ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬೇಕಾಗುತ್ತದೆ.container-type: inline-size;: ಇದು ರೆಸ್ಪಾನ್ಸಿವ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ ಅತಿ ಹೆಚ್ಚು ಬಳಸಲಾಗುವ ಮೌಲ್ಯವಾಗಿದೆ. ಇದು ಅದರ ಇನ್‌ಲೈನ್ ಆಯಾಮ (ಸಮತಲ ಬರವಣಿಗೆಯ ವಿಧಾನಗಳಲ್ಲಿ ಅಗಲ, ಅಥವಾ ಲಂಬ ಬರವಣಿಗೆಯ ವಿಧಾನಗಳಲ್ಲಿ ಎತ್ತರ) ಆಧರಿಸಿ ಕ್ವೆರಿ ಮಾಡಬಹುದಾದ ಒಂದು ಕ್ವೆರಿ ಕಂಟೇನರ್ ಅನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ. ತಮ್ಮ ಸಮತಲ ಸ್ಥಳವನ್ನು ಆಧರಿಸಿ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಇದು ಪರಿಪೂರ್ಣವಾಗಿದೆ.container-type: size;: ಇದು ಅದರ ಇನ್‌ಲೈನ್ ಆಯಾಮ ಮತ್ತು ಅದರ ಬ್ಲಾಕ್ ಆಯಾಮ (ಸಮತಲ ಬರವಣಿಗೆಯ ವಿಧಾನಗಳಲ್ಲಿ ಎತ್ತರ, ಲಂಬ ಬರವಣಿಗೆಯ ವಿಧಾನಗಳಲ್ಲಿ ಅಗಲ) ಎರಡನ್ನೂ ಆಧರಿಸಿ ಕ್ವೆರಿ ಮಾಡಬಹುದಾದ ಒಂದು ಕ್ವೆರಿ ಕಂಟೇನರ್ ಅನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ. ಅಗಲ ಮತ್ತು ಎತ್ತರದ ನಿರ್ಬಂಧಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
ನೀವು container-name ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಕಂಟೇನರ್ ಹೆಸರು ಅನ್ನು ಸಹ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ನೀವು ಅನೇಕ ಕ್ವೆರಿ ಕಂಟೇನರ್‌ಗಳನ್ನು ಹೊಂದಿರುವಾಗ, ಉದ್ದೇಶಿಸದ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ತಡೆಯಲು ಇದು ನಿಮಗೆ ನಿರ್ದಿಷ್ಟ ಕಂಟೇನರ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ.
ಉದಾಹರಣೆ: ಕ್ವೆರಿ ಕಂಟೇನರ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವುದು
.product-card-container {
container-type: inline-size;
container-name: product-card;
width: 50%; /* Example width for the container itself */
margin: 20px;
border: 1px solid #ccc;
padding: 15px;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .product-card-container ಕ್ಲಾಸ್ ಹೊಂದಿರುವ ಎಲಿಮೆಂಟ್ ಈಗ 'product-card' ಹೆಸರಿನ ಕ್ವೆರಿ ಕಂಟೇನರ್ ಆಗಿದೆ, ಮತ್ತು ಅದರ ಇನ್‌ಲೈನ್ ಗಾತ್ರವನ್ನು (ಅಗಲ) ಕ್ವೆರಿ ಮಾಡಬಹುದು.
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬರೆಯುವುದು
ಒಮ್ಮೆ ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕ್ವೆರಿ ಕಂಟೇನರ್ ಎಂದು ಗೊತ್ತುಪಡಿಸಿದ ನಂತರ, ಕಂಟೇನರ್‌ನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಆಧರಿಸಿ ಅದರ ವಂಶಸ್ಥರಿಗೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು @container ನಿಯಮವನ್ನು ಬಳಸಬಹುದು. ಸಿಂಟ್ಯಾಕ್ಸ್ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಗೆ ಹೋಲುತ್ತದೆ ಆದರೆ media ಕೀವರ್ಡ್ ಬದಲು container ಅನ್ನು ಬಳಸುತ್ತದೆ.
ಸಿಂಟ್ಯಾಕ್ಸ್:
@container [<name> | <family>] <condition> {
/* CSS rules to apply */
}
[<name> | <family>](ಐಚ್ಛಿಕ): ಕ್ವೆರಿ ಮಾಡಬೇಕಾದ ಕಂಟೇನರ್‌ನ ಹೆಸರು ಅಥವಾ ಕುಟುಂಬವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇದನ್ನು ಬಿಟ್ಟರೆ,container-typeವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಯಾವುದೇ ಕಂಟೇನರ್ ಅನ್ನು ಇದು ಕ್ವೆರಿ ಮಾಡುತ್ತದೆ.<condition>: ಇಲ್ಲಿ ನೀವು ಕ್ವೆರಿ ಮಾಡಲು ಬಯಸುವ ಕಂಟೇನರ್‌ನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತೀರಿ. ಸಾಮಾನ್ಯ ಕಂಡಿಷನ್‌ಗಳಲ್ಲಿwidth,height,inline-size,block-size,aspect-ratio,orientation, ಮತ್ತುresolutionಸೇರಿವೆ.
ಉದಾಹರಣೆ: ಅದರ ಕಂಟೇನರ್‌ನೊಳಗೆ ಒಂದು ಪ್ರಾಡಕ್ಟ್ ಕಾರ್ಡ್‌ಗೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವುದು
.product-card {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Querying the container named 'product-card' */
@container product-card (min-width: 400px) {
.product-card {
flex-direction: row;
text-align: left;
align-items: flex-start;
}
.product-card img {
margin-right: 20px;
margin-bottom: 0;
}
}
@container product-card (min-width: 600px) {
.product-card {
padding: 30px;
}
.product-card h3 {
font-size: 1.8em;
}
}
ಈ ಸಮಗ್ರ ಉದಾಹರಣೆಯಲ್ಲಿ:
.product-card-containerಅನ್ನು ಕ್ವೆರಿ ಕಂಟೇನರ್ ಆಗಿ ಹೊಂದಿಸಲಾಗಿದೆ.- ಅದರೊಳಗಿನ
.product-cardಎಲಿಮೆಂಟ್ ಡೀಫಾಲ್ಟ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಪಡೆಯುತ್ತದೆ. .product-card-container400px ಅಗಲ ಅಥವಾ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚು ಇದ್ದಾಗ,.product-cardಸಾಲು-ಆಧಾರಿತ ಫ್ಲೆಕ್ಸ್ ಲೇಔಟ್‌ಗೆ ಬದಲಾಗುತ್ತದೆ, ಪಠ್ಯವನ್ನು ಎಡಕ್ಕೆ ಜೋಡಿಸುತ್ತದೆ, ಮತ್ತು ಚಿತ್ರದ ಮಾರ್ಜಿನ್‌ಗಳನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ..product-card-container600px ಅಗಲ ಅಥವಾ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚು ಇದ್ದಾಗ,.product-cardನ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಹೆಡಿಂಗ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಮತ್ತಷ್ಟು ಸರಿಹೊಂದಿಸಲಾಗುತ್ತದೆ.
ಇದು ಒಟ್ಟಾರೆ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರವನ್ನು ಅವಲಂಬಿಸದೆ, ತನ್ನ ಪೋಷಕ ಕಂಟೇನರ್‌ನೊಳಗೆ ಲಭ್ಯವಿರುವ ಸ್ಥಳವನ್ನು ಆಧರಿಸಿ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ತನ್ನ ಆಂತರಿಕ ಲೇಔಟ್ ಮತ್ತು ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಹೇಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
ಪ್ರಮುಖ ಕಂಟೇನರ್ ಕ್ವೆರಿ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಪ್ರಾಪರ್ಟಿಗಳು
ಮೂಲ @container ನಿಯಮ ಮತ್ತು container-type ಹೊರತಾಗಿ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಶಕ್ತಿಯನ್ನು ಹೆಚ್ಚಿಸುವ ಹಲವಾರು ಇತರ ಸಂಬಂಧಿತ ಪ್ರಾಪರ್ಟಿಗಳು ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳಿವೆ:
1. container-name
ಮೊದಲೇ ಹೇಳಿದಂತೆ, container-name ನಿಮಗೆ ಕ್ವೆರಿ ಕಂಟೇನರ್‌ಗೆ ಒಂದು ಅನನ್ಯ ಗುರುತಿಸುವಿಕೆಯನ್ನು ನಿಯೋಜಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ನೀವು ನೆಸ್ಟೆಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಅಥವಾ ಪುಟದಲ್ಲಿ ಅನೇಕ ಸ್ವತಂತ್ರ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿರುವಾಗ ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ, ಪ್ರತಿಯೊಂದೂ ತನ್ನದೇ ಆದ ಕಂಟೇನರ್ ಕ್ವೆರಿ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಹೊಂದಿರಬಹುದು.
ಉದಾಹರಣೆ:
.sidebar {
container-type: inline-size;
container-name: sidebar-queries;
}
.main-content {
container-type: inline-size;
container-name: main-content-queries;
}
@container sidebar-queries (min-width: 200px) {
/* Styles for elements within the sidebar container */
}
@container main-content-queries (min-width: 700px) {
/* Styles for elements within the main content container */
}
2. ವಿಭಿನ್ನ ಕಂಟೇನರ್ ಆಕ್ಸಿಸ್‌ಗಳನ್ನು ಕ್ವೆರಿ ಮಾಡುವುದು
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಕೇವಲ ಇನ್‌ಲೈನ್ (ಸಾಮಾನ್ಯವಾಗಿ ಅಗಲ) ಆಯಾಮವನ್ನು ಮಾತ್ರವಲ್ಲದೆ, ಕಂಟೇನರ್‌ನ ಬ್ಲಾಕ್ (ಸಾಮಾನ್ಯವಾಗಿ ಎತ್ತರ) ಆಯಾಮಗಳನ್ನೂ ಗುರಿಯಾಗಿಸಬಹುದು. ಅಗಲ ಮತ್ತು ಎತ್ತರದ ನಿರ್ಬಂಧಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
width/inline-size: ಕಂಟೇನರ್‌ನ ಸಮತಲ ಆಯಾಮವನ್ನು ಆಧರಿಸಿ ಕ್ವೆರಿ ಮಾಡುತ್ತದೆ.height/block-size: ಕಂಟೇನರ್‌ನ ಲಂಬ ಆಯಾಮವನ್ನು ಆಧರಿಸಿ ಕ್ವೆರಿ ಮಾಡುತ್ತದೆ.aspect-ratio: ಕಂಟೇನರ್‌ನ ಅಗಲ ಮತ್ತು ಎತ್ತರದ ಅನುಪಾತವನ್ನು ಆಧರಿಸಿ ಕ್ವೆರಿ ಮಾಡುತ್ತದೆ.orientation: ಕಂಟೇನರ್‌ನinline-sizeಅದರblock-sizeಗಿಂತ ದೊಡ್ಡದಾಗಿದೆಯೇ ಅಥವಾ ಸಮವಾಗಿದೆಯೇ (portrait) ಅಥವಾ ಕಡಿಮೆ ಇದೆಯೇ (landscape) ಎಂಬುದನ್ನು ಆಧರಿಸಿ ಕ್ವೆರಿ ಮಾಡುತ್ತದೆ.
block-size ಬಳಸಿ ಉದಾಹರಣೆ:
.chart-container {
container-type: size;
container-name: chart;
height: 300px;
}
.chart {
/* Default chart styles */
}
@container chart (min-height: 250px) {
.chart {
/* Adjustments for taller charts */
font-size: 1.1em;
}
}
@container chart (orientation: landscape) {
.chart {
/* Adjustments for wider-than-tall charts */
transform: rotate(90deg);
}
}
3. ಕಂಟೇನರ್ ಕ್ವೆರಿ ಯೂನಿಟ್‌ಗಳು
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಹೊಸ CSS ಯೂನಿಟ್‌ಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತವೆ, ಇವು ವ್ಯೂಪೋರ್ಟ್ ಯೂನಿಟ್‌ಗಳಿಗೆ (vw, vh) ಸಮಾನವಾಗಿ, ಕ್ವೆರಿ ಕಂಟೇನರ್‌ನ ಆಯಾಮಗಳಿಗೆ ಸಂಬಂಧಿಸಿರುತ್ತವೆ ಆದರೆ ಕಂಟೇನರ್‌ಗೆ ನಿರ್ದಿಷ್ಟವಾಗಿರುತ್ತವೆ.
cqw: ಕಂಟೇನರ್‌ನ ಇನ್‌ಲೈನ್ ಗಾತ್ರದ 1%.cqh: ಕಂಟೇನರ್‌ನ ಬ್ಲಾಕ್ ಗಾತ್ರದ 1%.cqi:cqwಗೆ ಸಮನಾಗಿರುತ್ತದೆ.cqb:cqhಗೆ ಸಮನಾಗಿರುತ್ತದೆ.cqmin:cqiಅಥವಾcqbಯಲ್ಲಿ ಚಿಕ್ಕದು.cqmax:cqiಅಥವಾcqbಯಲ್ಲಿ ದೊಡ್ಡದು.
ತಮ್ಮ ಕಂಟೇನರ್‌ಗಳೊಂದಿಗೆ ಪ್ರಮಾಣಾನುಗುಣವಾಗಿ ಅಳೆಯುವ, ಬಿಗಿಯಾಗಿ ಜೋಡಿಸಲಾದ ಕಾಂಪೊನೆಂಟ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ರಚಿಸಲು ಈ ಯೂನಿಟ್‌ಗಳು ಅತ್ಯಂತ ಶಕ್ತಿಯುತವಾಗಿವೆ.
ಉದಾಹರಣೆ:
.product-card-container {
container-type: inline-size;
}
.product-card h3 {
font-size: 2.5cqi; /* Font size scales with container inline size */
margin-bottom: 1cqi;
}
.product-card p {
font-size: 1.2cqi;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .product-card ಒಳಗಿನ ಹೆಡಿಂಗ್ ಮತ್ತು ಪ್ಯಾರಾಗ್ರಾಫ್‌ನ ಫಾಂಟ್ ಗಾತ್ರಗಳು ತಮ್ಮ ಪೋಷಕ ಕಂಟೇನರ್‌ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಹೊಂದುತ್ತವೆ, ಇದು ವಿಭಿನ್ನ ಕಾಂಪೊನೆಂಟ್ ಗಾತ್ರಗಳಲ್ಲಿ ಓದುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
4. contain ಪ್ರಾಪರ್ಟಿ (ಮತ್ತು container-type ಗೆ ಅದರ ಸಂಬಂಧ)
CSS contain ಪ್ರಾಪರ್ಟಿಯು ನೇರವಾಗಿ ಕಂಟೇನರ್ ಕ್ವೆರಿ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನ ಭಾಗವಲ್ಲ ಆದರೆ ಹೆಚ್ಚು ಸಂಬಂಧಿಸಿದೆ. ಇದು ಬ್ರೌಸರ್‌ಗೆ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡಲು ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯದ ಬಗ್ಗೆ ಹೇಳುತ್ತದೆ. ನೀವು container-type ಅನ್ನು inline-size ಅಥವಾ size ಗೆ ಹೊಂದಿಸಿದಾಗ, ಅದು ಒಂದು ರೀತಿಯ ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಈ ಕಂಟೇನರ್‌ನೊಳಗಿನ ಸ್ಟೈಲ್‌ಗಳು ಅದರ ಗಾತ್ರವನ್ನು ಅವಲಂಬಿಸಿವೆ ಮತ್ತು ಕಂಟೇನರ್ ಮರುಗಾತ್ರಗೊಂಡಾಗ ಪುಟದ ಸಂಬಂಧವಿಲ್ಲದ ಭಾಗಗಳನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುವ ಅಗತ್ಯವಿಲ್ಲ ಎಂದು ಬ್ರೌಸರ್‌ಗೆ ತಿಳಿದಿರುತ್ತದೆ.
ನಿರ್ದಿಷ್ಟವಾಗಿ, container-type: inline-size; ಎನ್ನುವುದು contain: layout style inline-size; ಅನ್ನು ಪರೋಕ್ಷವಾಗಿ ಹೊಂದಿಸುವ ಒಂದು ಸಂಕ್ಷಿಪ್ತ ರೂಪವಾಗಿದೆ. ಇದು ಒಂದು ನಿರ್ಣಾಯಕ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್ ಆಗಿದೆ.
ಪ್ರಾಯೋಗಿಕ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ಜಾಗತಿಕ ಉದಾಹರಣೆಗಳು
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಬಹುಮುಖತೆಯು ಅವುಗಳನ್ನು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಅನ್ವಯಿಸಲು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ವೈವಿಧ್ಯಮಯ ಲೇಔಟ್‌ಗಳು ಮತ್ತು ಸಾಧನದ ಸಂದರ್ಭಗಳು ಸಾಮಾನ್ಯವಾದ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ.
1. ರೆಸ್ಪಾನ್ಸಿವ್ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳು
ನ್ಯಾವಿಗೇಷನಲ್ ಎಲಿಮೆಂಟ್‌ಗಳು ದೊಡ್ಡ ಪರದೆಗಳಲ್ಲಿ ಸಮತಲ ಪಟ್ಟಿಯಿಂದ ಸಣ್ಣ ಪರದೆಗಳಲ್ಲಿ ಕುಗ್ಗಿದ ಹ್ಯಾಂಬರ್ಗರ್ ಮೆನುಗೆ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ, ನ್ಯಾವಿಗೇಷನ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಒಂದು ಫ್ಲೆಕ್ಸಿಬಲ್ ಸೈಡ್‌ಬಾರ್ ಅಥವಾ ಹೆಡರ್‌ನಲ್ಲಿ ಇರಿಸಬಹುದು, ಮತ್ತು ಅದು ಒಟ್ಟಾರೆ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ ಆ ಸೈಡ್‌ಬಾರ್ ಅಥವಾ ಹೆಡರ್‌ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಸ್ವತಂತ್ರವಾಗಿ ತನ್ನ ಲೇಔಟ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು.
ಜಾಗತಿಕ ಸನ್ನಿವೇಶ: ಯುರೋಪ್‌ನಲ್ಲಿ ಡೆಸ್ಕ್‌ಟಾಪ್‌ನಲ್ಲಿ ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ ಉತ್ಪನ್ನ ವರ್ಗಗಳನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದಾದ, ಆದರೆ ಏಷ್ಯಾದಲ್ಲಿ ಮೊಬೈಲ್ ಸಾಧನದಲ್ಲಿ ಕಿರಿದಾದ ವಿಭಾಗದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಬಹುದಾದ ಅಂತರರಾಷ್ಟ್ರೀಯ ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಕಂಟೇನರ್-ಅರಿವುಳ್ಳ ನ್ಯಾವಿಗೇಷನ್ ಕಾಂಪೊನೆಂಟ್ ಯಾವಾಗಲೂ ತನ್ನ ತಕ್ಷಣದ ಸಂದರ್ಭದಲ್ಲಿ ಅತ್ಯುತ್ತಮವಾಗಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
2. ಅಡಾಪ್ಟಿವ್ UI ಕಾಂಪೊನೆಂಟ್‌ಗಳು (ಬಟನ್‌ಗಳು, ಕಾರ್ಡ್‌ಗಳು, ಫಾರ್ಮ್‌ಗಳು)
ಬಟನ್‌ಗಳು, ಕಾರ್ಡ್‌ಗಳು, ಮತ್ತು ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗಳಂತಹ ಸಾಮಾನ್ಯ UI ಎಲಿಮೆಂಟ್‌ಗಳು ಇದರಿಂದ ಅಪಾರವಾಗಿ ಪ್ರಯೋಜನ ಪಡೆಯಬಹುದು. ಒಂದು ಪ್ರಾಡಕ್ಟ್ ಕಾರ್ಡ್ ಅದರ ಕಂಟೇನರ್ ಅಗಲವಾಗಿದ್ದಾಗ ವಿವರಗಳನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ತೋರಿಸಬಹುದು, ಆದರೆ ಕಂಟೇನರ್ ಕಿರಿದಾಗಿದ್ದಾಗ ಅವುಗಳನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಬಹುದು. ಒಂದು ಬಟನ್ ತನ್ನ ಪ್ಯಾಡಿಂಗ್ ಅಥವಾ ಪಠ್ಯದ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಬಹುದು.
ಜಾಗತಿಕ ಸನ್ನಿವೇಶ: ಒಂದು ಪ್ರಯಾಣ ಬುಕಿಂಗ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಹುಡುಕಾಟ ಫಲಿತಾಂಶಗಳ ಪಟ್ಟಿಯಲ್ಲಿ ವಿಮಾನದ ವಿವರಗಳನ್ನು ಕಾಂಪ್ಯಾಕ್ಟ್ ಕಾರ್ಡ್ ಫಾರ್ಮ್ಯಾಟ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಬಹುದು. ಈ ಪಟ್ಟಿಯನ್ನು ಟ್ಯಾಬ್ಲೆಟ್‌ನಲ್ಲಿ ಕಿರಿದಾದ ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ ಇರಿಸಿದರೆ, ಕಾರ್ಡ್ ತನ್ನ ಲೇಔಟ್ ಅನ್ನು ಹೆಚ್ಚು ಲಂಬವಾಗಿರುವಂತೆ ಹೊಂದಿಸಿಕೊಳ್ಳಬೇಕು. ಅದು ವಿಶಾಲವಾದ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶದಲ್ಲಿದ್ದರೆ, ಅದು ಹೆಚ್ಚು ಮಾಹಿತಿಯನ್ನು ಸಮತಲವಾಗಿ ಪ್ರದರ್ಶಿಸಬಹುದು.
3. ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳು ಮತ್ತು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳು
ಬಹು ವಿಜೆಟ್‌ಗಳು ಅಥವಾ ಸಂಕೀರ್ಣ ಲೇಖನ ಲೇಔಟ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳು, ತಾವು ಇರುವ ಕಾಲಮ್ ಅನ್ನು ಆಧರಿಸಿ ಮರುಹರಿವು ಮತ್ತು ಮರುಸ್ಟೈಲ್ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಂದ ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತವೆ. ಇದು ಮಾಹಿತಿಯ ಪ್ರಸ್ತುತಿಯ ಮೇಲೆ ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವನ್ನು ಅನುಮತಿಸುತ್ತದೆ.
ಜಾಗತಿಕ ಸನ್ನಿವೇಶ: ಹಣಕಾಸು ಸುದ್ದಿ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಸ್ಟಾಕ್ ಟಿಕ್ಕರ್‌ಗಳು, ಮಾರುಕಟ್ಟೆ ವಿಶ್ಲೇಷಣೆ, ಮತ್ತು ಸುದ್ದಿ ಫೀಡ್‌ಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಹಲವಾರು ವಿಜೆಟ್‌ಗಳನ್ನು ಹೊಂದಿರಬಹುದು. ಪ್ರತಿಯೊಂದು ವಿಜೆಟ್ ಒಂದು ಕ್ವೆರಿ ಕಂಟೇನರ್ ಆಗಿರಬಹುದು, ಇದು ಟಿಕ್ಕರ್ ಚಿಹ್ನೆಯ ಪ್ರದರ್ಶನ, ಚಾರ್ಟ್‌ನ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್, ಅಥವಾ ಸುದ್ದಿ ತುಣುಕಿನ ಉದ್ದವು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ನಲ್ಲಿ ಆ ವಿಜೆಟ್‌ಗೆ ಹಂಚಲಾದ ನಿರ್ದಿಷ್ಟ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಸರಿಯಾಗಿ ಸರಿಹೊಂದುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
4. ಪ್ರಿಂಟ್ ಸ್ಟೈಲ್‌ಗಳು ಮತ್ತು ರಫ್ತು ಮಾಡಿದ ವಿಷಯ
ಪ್ರಿಂಟ್‌ಗಾಗಿ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆಯಾದರೂ, ವಿಷಯವನ್ನು ರಫ್ತು ಮಾಡಿದಾಗ ಅಥವಾ ಮುದ್ರಿಸಿದಾಗ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಸಹ ಸಹಾಯ ಮಾಡಬಹುದು, 'ಕಂಟೇನರ್' (ಉದಾ., ಪ್ರಿಂಟ್ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಪುಟದ ಅಗಲ) ಆಧರಿಸಿ ಸ್ಥಿರತೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತವೆ.
5. ಡಿಸೈನ್ ಸಿಸ್ಟಮ್‌ಗಳು ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳು
ಡಿಸೈನ್ ಸಿಸ್ಟಮ್‌ಗಳಿಗಾಗಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಒಂದು ಗೇಮ್-ಚೇಂಜರ್ ಆಗಿವೆ. ಡೆವಲಪರ್‌ಗಳು ನಿಜವಾಗಿಯೂ ಸ್ವತಂತ್ರ ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು, ಇವುಗಳನ್ನು ಪ್ರತಿಯೊಂದು ಸಂಭವನೀಯ ಲೇಔಟ್‌ಗೆ ನಿರ್ದಿಷ್ಟವಾಗಿ ಅಳವಡಿಸಬೇಕಾಗಿಲ್ಲ. ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೈಲಿಂಗ್ ಅದರ ಕಂಟೇನರ್‌ಗೆ ಅಂತರ್ಗತವಾಗಿ ಸಂಬಂಧಿಸಿರುವುದರಿಂದ, ಅದನ್ನು ವಿವಿಧ ಯೋಜನೆಗಳು ಮತ್ತು ಸಂದರ್ಭಗಳಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಹೆಚ್ಚು ಊಹಿಸಬಹುದಾದ ಮತ್ತು ಸುಲಭವಾಗುತ್ತದೆ.
ಜಾಗತಿಕ ಸನ್ನಿವೇಶ: ಹೊಸ ಆಂತರಿಕ ಪೋರ್ಟಲ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿರುವ ಜಾಗತಿಕ ನಿಗಮವು ಕಂಟೇನರ್-ಅರಿವುಳ್ಳ ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಂದಿಗೆ ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು. ಉದಾಹರಣೆಗೆ, ಒಂದು ಬಟನ್ ಕಾಂಪೊನೆಂಟ್, ಅದು ಕಿರಿದಾದ ಮೋಡಲ್ ವಿಂಡೋದಲ್ಲಿ, ವಿಶಾಲವಾದ ಫೂಟರ್‌ನಲ್ಲಿ, ಅಥವಾ ಪ್ರಮಾಣಿತ ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ನಲ್ಲಿ ಇರಲಿ, ಪ್ರತಿಯೊಂದು ಸನ್ನಿವೇಶಕ್ಕೂ ನಿರ್ದಿಷ್ಟ ಕ್ಲಾಸ್‌ಗಳ ಅಗತ್ಯವಿಲ್ಲದೆ ಉತ್ತಮವಾಗಿ ಕಾಣುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು.
ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಅನುಷ್ಠಾನ
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ತುಲನಾತ್ಮಕವಾಗಿ ಹೊಸ CSS ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ವೇಗವಾಗಿ ಸುಧಾರಿಸುತ್ತಿದ್ದರೂ, ಉತ್ಪಾದನಾ ಬಳಕೆಗಾಗಿ ಇತ್ತೀಚಿನ ಹೊಂದಾಣಿಕೆಯ ಕೋಷ್ಟಕಗಳನ್ನು ಪರಿಶೀಲಿಸುವುದು ಅತ್ಯಗತ್ಯ.
- Chrome/Edge: ಸ್ವಲ್ಪ ಸಮಯದಿಂದ ಬೆಂಬಲ ಲಭ್ಯವಿದೆ, ಆರಂಭದಲ್ಲಿ ಫ್ಲ್ಯಾಗ್ ಅಗತ್ಯವಿತ್ತು, ಆದರೆ ಈಗ ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದೆ.
- Firefox: ಬೆಂಬಲ ಲಭ್ಯವಿದೆ.
- Safari: ಬೆಂಬಲ ಲಭ್ಯವಿದೆ.
- ಇತರ ಬ್ರೌಸರ್‌ಗಳು: ಬೆಂಬಲವು ಬೆಳೆಯುತ್ತಿದೆ, ಆದರೆ ನಿಮ್ಮ ಗುರಿ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಯಾವಾಗಲೂ ಪರಿಶೀಲಿಸಿ.
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ, ನೀವು ಫಾಲ್‌ಬ್ಯಾಕ್ ತಂತ್ರವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕಾಗುತ್ತದೆ. ಇದು ಬೆಂಬಲವನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಹೆಚ್ಚು ಸಾಂಪ್ರದಾಯಿಕ ವ್ಯೂಪೋರ್ಟ್-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುವುದು, ಅಥವಾ ಹಳೆಯ CSS ತಂತ್ರಗಳನ್ನು ಬಳಸುವುದು ಒಳಗೊಂಡಿರುತ್ತದೆ.
ಫಾಲ್‌ಬ್ಯಾಕ್ ತಂತ್ರದ ಉದಾಹರಣೆ (ಕಾನ್ಸೆಪ್ಚುಯಲ್):
.product-card-container {
container-type: inline-size;
/* Default styles for the component */
display: flex;
flex-direction: column;
}
/* Fallback using media queries for browsers that don't support container queries */
@media (min-width: 400px) {
.product-card-container {
/* Equivalent styles to @container (min-width: 400px) */
flex-direction: row;
}
}
/* Container query specific styles */
@container (min-width: 400px) {
.product-card-container {
/* Specific styles for when the container is 400px+ */
/* These will override the media query fallback if supported */
}
}
ಸಾಮಾನ್ಯ ವಿಧಾನವೆಂದರೆ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಬೆಂಬಲಿತವಾಗಿದ್ದರೆ ಅವುಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡುವುದು, ಮತ್ತು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳ ಮೂಲಕ ಕಡಿಮೆ ಸೂಕ್ಷ್ಮವಾದ ಆದರೆ ಇನ್ನೂ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ರೆಸ್ಪಾನ್ಸಿವ್ ಅನುಭವವನ್ನು ಒದಗಿಸುವುದು.
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸಲಹೆಗಳು
ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಸಂಪೂರ್ಣ ಶಕ್ತಿಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಿಕೊಳ್ಳಲು ಮತ್ತು ದೃಢವಾದ, ನಿರ್ವಹಿಸಬಲ್ಲ ಕೋಡ್‌ಬೇಸ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು:
- ಕಂಟೇನರ್‌ಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಿ: ಕ್ವೆರಿ ಕಂಟೇನರ್‌ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಬೇಕಾದ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಯಾವಾಗಲೂ
container-typeಅನ್ನು ಹೊಂದಿಸಿ. ಪರೋಕ್ಷ ನಡವಳಿಕೆಯನ್ನು ಅವಲಂಬಿಸಬೇಡಿ. - ಸ್ಪಷ್ಟತೆಗಾಗಿ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ಹೆಸರಿಸುವ ಸಂಘರ್ಷಗಳನ್ನು ತಪ್ಪಿಸಲು ಮತ್ತು ಕ್ವೆರಿಗಳು ಸರಿಯಾದ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೆಸ್ಟೆಡ್ ಅಥವಾ ಅನೇಕ ಸ್ವತಂತ್ರ ಕಂಟೇನರ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ
container-nameಅನ್ನು ಬಳಸಿ. - ಕಾಂಪೊನೆಂಟ್-ಮೊದಲು ಯೋಚಿಸಿ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಮನಸ್ಸಿನಲ್ಲಿಟ್ಟುಕೊಂಡು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ ಮತ್ತು ನಿರ್ಮಿಸಿ. ವಿಭಿನ್ನ ಕಂಟೇನರ್ ಗಾತ್ರಗಳಲ್ಲಿ ಅವು ಹೇಗೆ ವರ್ತಿಸುತ್ತವೆ ಎಂದು ಪರಿಗಣಿಸಿ.
- ಕಂಟೇನರ್ ಕ್ವೆರಿ ಯೂನಿಟ್‌ಗಳನ್ನು ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಬಳಸಿ:
cqw,cqh, ಇತ್ಯಾದಿ, ಅಳೆಯಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಶಕ್ತಿಯುತವಾಗಿವೆ. ಫಾಂಟ್ ಗಾತ್ರಗಳು, ಸ್ಪೇಸಿಂಗ್, ಮತ್ತು ಪ್ರಮಾಣಾನುಗುಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಬೇಕಾದ ಇತರ ಆಯಾಮಗಳಿಗಾಗಿ ಅವುಗಳನ್ನು ಬಳಸಿ. - ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಎಲ್ಲಾ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಗೆ ಬದಲಿಯಾಗಿಲ್ಲ. ಒಟ್ಟಾರೆ ಪುಟ ಲೇಔಟ್, ಇಡೀ ಸೈಟ್‌ಗಾಗಿ ಟೈಪೋಗ್ರಫಿ, ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆ ವೈಶಿಷ್ಟ್ಯಗಳಿಗಾಗಿ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ, ಮತ್ತು ಕಾಂಪೊನೆಂಟ್-ಮಟ್ಟದ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್‌ಗಾಗಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ.
- ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ವರ್ತಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಕಂಟೇನರ್ ಗಾತ್ರಗಳು ಮತ್ತು ಬ್ರೌಸರ್ ಪರಿಸರಗಳಲ್ಲಿ ಅವುಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ. ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಿ, ವಿಭಿನ್ನ ಎಲಿಮೆಂಟ್ ಗಾತ್ರಗಳನ್ನು ಅನುಕರಿಸಲು ಡೆವಲಪರ್ ಉಪಕರಣಗಳನ್ನು ಬಳಸಿ, ಮತ್ತು ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸಿ.
- ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಪ್ರತ್ಯೇಕಿಸುವ ಮೂಲಕ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದಾದರೂ, ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸದಿದ್ದರೆ ಅತಿಯಾದ ಸಂಕೀರ್ಣ ನೆಸ್ಟಿಂಗ್ ಅಥವಾ ಹಲವಾರು ಕ್ವೆರಿ ಕಂಟೇನರ್‌ಗಳ ಬಗ್ಗೆ ಜಾಗರೂಕರಾಗಿರಿ.
- ಪ್ರಗತಿಪರ ವರ್ಧನೆ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿಯೂ ನಿಮ್ಮ ಸೈಟ್ ಬಳಸಬಲ್ಲ ಮತ್ತು ಪ್ರಸ್ತುತಪಡಿಸಬಲ್ಲದು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಗ್ರೇಸ್‌ಫುಲ್ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಒದಗಿಸಿ.
ತೀರ್ಮಾನ: ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸದ ಒಂದು ಹೊಸ ಯುಗ
CSS @container ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಒಂದು ಗಮನಾರ್ಹ ಮುನ್ನಡೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ಮಟ್ಟದಲ್ಲಿ ಸಂದರ್ಭ-ಅರಿವುಳ್ಳ ಸ್ಟೈಲ್‌ಗಳನ್ನು ರಚಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುವ ಮೂಲಕ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ವಿನ್ಯಾಸದ ನಮ್ಯತೆ ಮತ್ತು ಮಾಡ್ಯುಲಾರಿಟಿಯ ಹೊಸ ಮಟ್ಟವನ್ನು ತೆರೆಯುತ್ತವೆ. ಇದು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರು ಎದುರಿಸುವ ವೈವಿಧ್ಯಮಯ ಸಾಧನಗಳು ಮತ್ತು ಲೇಔಟ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ದೃಢವಾದ, ನಿರ್ವಹಿಸಲು ಸುಲಭವಾದ, ಮತ್ತು ಉತ್ತಮವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವಂತಹ ನಿಜವಾಗಿಯೂ ಹೊಂದಿಕೊಳ್ಳುವ ಇಂಟರ್ಫೇಸ್‌ಗಳ ರಚನೆಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಪ್ರಬುದ್ಧವಾಗುತ್ತಾ ಹೋದಂತೆ, ಆಧುನಿಕ, ಅತ್ಯಾಧುನಿಕ, ಮತ್ತು ಸಾರ್ವತ್ರಿಕವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಹೆಚ್ಚು ಅತ್ಯಗತ್ಯವಾಗುತ್ತದೆ. ಈ ಶಕ್ತಿಯುತ ಸಾಧನವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಜವಾಗಿಯೂ ಸಂಪರ್ಕಿತ ಜಗತ್ತಿಗಾಗಿ ನೀವು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸವನ್ನು ಸಂಪರ್ಕಿಸುವ ರೀತಿಯನ್ನು ಮರು ವ್ಯಾಖ್ಯಾನಿಸಿ.