ಸಿಎಸ್ಎಸ್ ಕಂಟೈನರ್ ಕ್ವೆರಿ ಪಾಲಿಫಿಲ್: ಬ್ರೌಸರ್‌ಗಳಾದ್ಯಂತ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್ ಅಂತರವನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು

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

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

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

ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ಕಂಟೈನರ್ ಕ್ವೆರಿಯ ಒಂದು ಮೂಲಭೂತ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

            
@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card__image {
    width: 50%;
  }
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, @container ನಿಯಮದೊಳಗಿನ ಸ್ಟೈಲ್‌ಗಳು .card ಕ್ಲಾಸ್ ಹೊಂದಿರುವ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಮಾತ್ರ ಅನ್ವಯವಾಗುತ್ತವೆ, ಯಾವಾಗ ಅವುಗಳ ಕಂಟೈನಿಂಗ್ ಎಲಿಮೆಂಟ್ ಕನಿಷ್ಠ 400 ಪಿಕ್ಸೆಲ್‌ಗಳ ಅಗಲವನ್ನು ಹೊಂದಿರುತ್ತದೆಯೋ ಆಗ. ಇದು ಕಂಟೈನರ್‌ನ ಆಯಾಮಗಳ ಆಧಾರದ ಮೇಲೆ ವಿಭಿನ್ನ ಲೇಔಟ್‌ಗಳು ಮತ್ತು ಸ್ಟೈಲ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಹೆಚ್ಚು ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಪುನರ್ಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸಿದ್ಧವಾಗುತ್ತವೆ.

ಸವಾಲು: ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

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

ಪರಿಹಾರ: ಕಂಟೈನರ್ ಕ್ವೆರಿ ಪಾಲಿಫಿಲ್

ಪಾಲಿಫಿಲ್ ಎನ್ನುವುದು ಕೋಡ್‌ನ ಒಂದು ತುಣುಕು (ಸಾಮಾನ್ಯವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್), ಇದು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಕಾಣೆಯಾಗಿರುವ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳ ವಿಷಯದಲ್ಲಿ, ಪಾಲಿಫಿಲ್ ಸ್ಥಳೀಯ ಬೆಂಬಲವಿಲ್ಲದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ @container ನಿಯಮಗಳಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಅನ್ವಯಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಪಾಲಿಫಿಲ್ ಅನ್ನು ಬಳಸುವುದರಿಂದ ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ಬಳಕೆದಾರರ ದೊಡ್ಡ ಭಾಗಕ್ಕೆ ಹೊಂದಾಣಿಕೆಯನ್ನು ತ್ಯಾಗ ಮಾಡದೆಯೇ ಇಂದೇ ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಲು ಅನುಮತಿಸುತ್ತದೆ.

ಸರಿಯಾದ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಆರಿಸುವುದು

ಹಲವಾರು ಕಂಟೈನರ್ ಕ್ವೆರಿ ಪಾಲಿಫಿಲ್‌ಗಳು ಲಭ್ಯವಿವೆ. ಕೆಲವು ಜನಪ್ರಿಯ ಆಯ್ಕೆಗಳು ಇಲ್ಲಿವೆ:

• EQCSS: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯಾಗಿದ್ದು, ಇದು ಸಿಎಸ್‌ಎಸ್‌ ಅನ್ನು ಎಲಿಮೆಂಟ್ ಕ್ವೆರಿಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳೊಂದಿಗೆ ವಿಸ್ತರಿಸುತ್ತದೆ.
• container-query-polyfill: ಸಿಎಸ್ಎಸ್ ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳಿಗಾಗಿ ಮೀಸಲಾದ ಪಾಲಿಫಿಲ್, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಚಿಕ್ಕ ಗಾತ್ರವನ್ನು ಹೊಂದಿರುತ್ತದೆ ಮತ್ತು ಕೇವಲ ಕಂಟೈನರ್ ಕ್ವೆರಿ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದರ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.
• polyfill-library: ಬಳಕೆದಾರ ಏಜೆಂಟ್ ಪತ್ತೆಹಚ್ಚುವಿಕೆಯ ಆಧಾರದ ಮೇಲೆ ಪಾಲಿಫಿಲ್‌ಗಳನ್ನು ಒದಗಿಸುವ ಮೆಟಾ-ಪಾಲಿಫಿಲ್ ಸೇವೆ, ಇದು ಅಗತ್ಯವಿರುವ ಪಾಲಿಫಿಲ್‌ಗಳನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಅತ್ಯುತ್ತಮ ಆಯ್ಕೆಯು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳು ಮತ್ತು ಅವಶ್ಯಕತೆಗಳನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಪರಿಗಣನೆಗಳು ಹೀಗಿವೆ:

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

ಕನಿಷ್ಠ ಓವರ್‌ಹೆಡ್‌ನೊಂದಿಗೆ ಸರಳ ಕಂಟೈನರ್ ಕ್ವೆರಿ ಬೆಂಬಲಕ್ಕಾಗಿ, container-query-polyfill ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮ ಆಯ್ಕೆಯಾಗಿದೆ. ನಿಮಗೆ ಹೆಚ್ಚು ಸುಧಾರಿತ ವೈಶಿಷ್ಟ್ಯಗಳು ಬೇಕಾಗಿದ್ದರೆ ಅಥವಾ ಈಗಾಗಲೇ ಇತರ ಉದ್ದೇಶಗಳಿಗಾಗಿ EQCSS ಬಳಸುತ್ತಿದ್ದರೆ, ಅದು ಸೂಕ್ತ ಆಯ್ಕೆಯಾಗಿರಬಹುದು.

ಕಂಟೈನರ್ ಕ್ವೆರಿ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು

ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ container-query-polyfill ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಹಂತ-ಹಂತದ ಮಾರ್ಗದರ್ಶಿ ಇಲ್ಲಿದೆ:

1. ಇನ್‌ಸ್ಟಾಲೇಷನ್

ನೀವು npm ಅಥವಾ yarn ಬಳಸಿ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಬಹುದು:

            
npm install container-query-polyfill

            

              
                Copy
              
            
          

ಅಥವಾ:

            
yarn add container-query-polyfill

            

              
                Copy
              
            
          

2. ಇಂಪೋರ್ಟ್ ಮತ್ತು ಇನಿಶಿಯಲೈಸ್ ಮಾಡಿ

ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗೆ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಿ ಮತ್ತು ಅದನ್ನು ಇನಿಶಿಯಲೈಸ್ ಮಾಡಿ. ಪುಟದಾದ್ಯಂತ ಸ್ಥಿರವಾದ ನಡವಳಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಸಾಧ್ಯವಾದಷ್ಟು ಬೇಗ ಇದನ್ನು ಮಾಡುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮ.

            
import containerQueryPolyfill from 'container-query-polyfill';

containerQueryPolyfill();

            

              
                Copy
              
            
          

3. ಐಚ್ಛಿಕ: ಷರತ್ತುಬದ್ಧ ಲೋಡಿಂಗ್

ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮತ್ತಷ್ಟು ಉತ್ತಮಗೊಳಿಸಲು, ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಮಾತ್ರ ನೀವು ಷರತ್ತುಬದ್ಧವಾಗಿ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಬಹುದು. ಇದನ್ನು ವೈಶಿಷ್ಟ್ಯ ಪತ್ತೆಹಚ್ಚುವಿಕೆಯನ್ನು ಬಳಸಿ ಸಾಧಿಸಬಹುದು:

            
if (!('container' in document.documentElement.style)) {
  import('container-query-polyfill').then(module => {
    module.default();
  });
}

            

              
                Copy
              
            
          

ಈ ಕೋಡ್ ತುಣುಕು ಬ್ರೌಸರ್ ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ container ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಇಲ್ಲದಿದ್ದರೆ, ಅದು ಡೈನಾಮಿಕ್ ಆಗಿ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಇನಿಶಿಯಲೈಸ್ ಮಾಡುತ್ತದೆ. ಈ ವಿಧಾನವು ಈಗಾಗಲೇ ಸ್ಥಳೀಯ ಬೆಂಬಲವನ್ನು ಹೊಂದಿರುವ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಅನಗತ್ಯವಾಗಿ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸುತ್ತದೆ, ಹೀಗಾಗಿ ಪುಟ ಲೋಡ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

4. ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬರೆಯುವುದು

ಈಗ ನೀವು ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ಮಾಡುವಂತೆ ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬರೆಯಬಹುದು:

            
.container {
  container-type: inline-size; /* Or 'size' for both width and height */
}

.item {
  background-color: lightblue;
  padding: 10px;
}

@container (min-width: 300px) {
  .item {
    background-color: lightgreen;
  }
}

@container (min-width: 600px) {
  .item {
    background-color: lightcoral;
  }
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .container ಕ್ವೆರಿಯ ಕಂಟೈನಿಂಗ್ ಸಂದರ್ಭವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. container-type: inline-size; ಪ್ರಾಪರ್ಟಿಯು ಕ್ವೆರಿಯು ಕಂಟೈನರ್‌ನ ಇನ್‌ಲೈನ್ ಗಾತ್ರವನ್ನು (ಸಮತಲ ಬರವಣಿಗೆಯ ವಿಧಾನಗಳಲ್ಲಿ ಅಗಲ) ಆಧರಿಸಿರಬೇಕು ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. .item ಎಲಿಮೆಂಟ್ ಕಂಟೈನರ್‌ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಅದರ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.

ಕಂಟೈನರ್ ಕ್ವೆರಿ ಪಾಲಿಫಿಲ್‌ಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ಸ್ಥಳೀಯ ಬೆಂಬಲಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಿ: ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲ ಸುಧಾರಿಸಿದಂತೆ, ಪಾಲಿಫಿಲ್ ಮೇಲಿನ ನಿಮ್ಮ ಅವಲಂಬನೆಯನ್ನು ಕ್ರಮೇಣ ಕಡಿಮೆ ಮಾಡಿ. ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಆವೃತ್ತಿಗಳೊಂದಿಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ನಿಯಮಿತವಾಗಿ ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಬಳಕೆದಾರರ ಸಾಕಷ್ಟು ಶೇಕಡಾವಾರು ಜನರಿಗೆ ಸ್ಥಳೀಯ ಬೆಂಬಲ ಲಭ್ಯವಾದ ನಂತರ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತೆಗೆದುಹಾಕುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್: ಪಾಲಿಫಿಲ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮದ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ಅದನ್ನು ಅನಗತ್ಯವಾಗಿ ಲೋಡ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಲು ಷರತ್ತುಬದ್ಧ ಲೋಡಿಂಗ್ ಬಳಸಿ, ಮತ್ತು ಕನಿಷ್ಠ ಓವರ್‌ಹೆಡ್ ಇರುವ ಹಗುರವಾದ ಪಾಲಿಫಿಲ್ ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಪರೀಕ್ಷೆ: ಸ್ಥಿರವಾದ ನಡವಳಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಮತ್ತು ಯಾವುದೇ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಪಾಲಿಫಿಲ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ. ಅನ್ವಯಿಸಲಾದ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ಮತ್ತು ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
• ಪ್ರಗತಿಪರ ವರ್ಧನೆ (Progressive Enhancement): ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪ್ರಗತಿಪರ ವರ್ಧನೆಯ ವಿಧಾನದೊಂದಿಗೆ ವಿನ್ಯಾಸಗೊಳಿಸಿ. ಇದರರ್ಥ ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ಬೆಂಬಲಿಸದಿದ್ದರೂ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಇನ್ನೂ ಕಾರ್ಯನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದಂತಿರಬೇಕು. ಪಾಲಿಫಿಲ್ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಬೇಕು, ಆದರೆ ಇದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಪ್ರಮುಖ ಕಾರ್ಯಚಟುವಟಿಕೆಗೆ ನಿರ್ಣಾಯಕ ಅವಲಂಬನೆಯಾಗಿರಬಾರದು.
• `container-type` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಪರಿಗಣಿಸಿ: ನಿಮ್ಮ ಕಂಟೈನರ್‌ಗಳಿಗೆ ಸೂಕ್ತವಾದ container-type ಪ್ರಾಪರ್ಟಿಯನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಆರಿಸಿ. inline-size ಸಾಮಾನ್ಯವಾಗಿ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮತ್ತು ಉಪಯುಕ್ತವಾಗಿದೆ, ಆದರೆ ನೀವು ಅಗಲ ಮತ್ತು ಎತ್ತರ ಎರಡನ್ನೂ ಕ್ವೆರಿ ಮಾಡಬೇಕಾದರೆ size ಸೂಕ್ತವಾಗಿರಬಹುದು.

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

1. ಹೊಂದಿಕೊಳ್ಳುವ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳು

ವಿವಿಧ ಕಂಟೈನರ್ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳನ್ನು ರಚಿಸಲು ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಸಮತಲ ನ್ಯಾವಿಗೇಷನ್ ಮೆನು ಕಿರಿದಾದ ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ ಇರಿಸಿದಾಗ ಹ್ಯಾಂಬರ್ಗರ್ ಮೆನುವಾಗಿ ಕುಸಿಯಬಹುದು.

            
.nav-container {
  container-type: inline-size;
  display: flex;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin-right: 10px;
}

.hamburger-button {
  display: none;
  cursor: pointer;
}

@container (max-width: 500px) {
  .nav-list {
    display: none;
  }

  .hamburger-button {
    display: block;
  }
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು ಕಂಟೈನರ್ ಅಗಲ 500 ಪಿಕ್ಸೆಲ್‌ಗಳಿಗಿಂತ ಕಡಿಮೆಯಿದ್ದಾಗ ನ್ಯಾವಿಗೇಷನ್ ಪಟ್ಟಿಯನ್ನು ಹೇಗೆ ಮರೆಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ಹ್ಯಾಂಬರ್ಗರ್ ಬಟನ್ ಅನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.

2. ಡೈನಾಮಿಕ್ ಉತ್ಪನ್ನ ಪಟ್ಟಿಗಳು

ಲಭ್ಯವಿರುವ ಸ್ಥಳವನ್ನು ಆಧರಿಸಿ ವಿಭಿನ್ನವಾಗಿ ಪ್ರದರ್ಶಿಸುವ ಡೈನಾಮಿಕ್ ಉತ್ಪನ್ನ ಪಟ್ಟಿಗಳನ್ನು ರಚಿಸಲು ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಒಂದು ಉತ್ಪನ್ನ ಪಟ್ಟಿಯು ಅಗಲವಾದ ಕಂಟೈನರ್‌ನಲ್ಲಿ ಇರಿಸಿದಾಗ ಹೆಚ್ಚಿನ ವಿವರಗಳನ್ನು ಮತ್ತು ಕಿರಿದಾದ ಕಂಟೈನರ್‌ನಲ್ಲಿ ಇರಿಸಿದಾಗ ಕಡಿಮೆ ವಿವರಗಳನ್ನು ತೋರಿಸಬಹುದು.

            
.product-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.product-card {
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-title {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.product-description {
  display: none;
}

@container (min-width: 400px) {
  .product-card {
    width: calc(50% - 10px);
  }

  .product-description {
    display: block;
  }
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು ಕಂಟೈನರ್ ಅಗಲ 400 ಪಿಕ್ಸೆಲ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚಾದಾಗ ಉತ್ಪನ್ನ ಕಾರ್ಡ್ ಅಗಲವನ್ನು ಹೇಗೆ ಸರಿಹೊಂದಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಉತ್ಪನ್ನ ವಿವರಣೆಯನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.

3. ರೆಸ್ಪಾನ್ಸಿವ್ ಟೈಪೋಗ್ರಫಿ

ಕಂಟೈನರ್ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ಫಾಂಟ್ ಗಾತ್ರಗಳು ಮತ್ತು ಇತರ ಟೈಪೋಗ್ರಾಫಿಕಲ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸರಿಹೊಂದಿಸಲು ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಬಹುದು. ಇದು ವಿವಿಧ ಪರದೆಯ ಗಾತ್ರಗಳಲ್ಲಿ ಓದುವಿಕೆಯನ್ನು ಮತ್ತು ದೃಶ್ಯ ಆಕರ್ಷಣೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು.

            
.text-container {
  container-type: inline-size;
  font-size: 16px;
  line-height: 1.5;
}

@container (min-width: 600px) {
  .text-container {
    font-size: 18px;
    line-height: 1.6;
  }
}

@container (min-width: 900px) {
  .text-container {
    font-size: 20px;
    line-height: 1.7;
  }
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು ಕಂಟೈನರ್ ಅಗಲ ಹೆಚ್ಚಾದಂತೆ ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು ಸಾಲು ಎತ್ತರವನ್ನು ಹೇಗೆ ಹೆಚ್ಚಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.

ಅಂತರರಾಷ್ಟ್ರೀಕರಣ (i18n) ಮತ್ತು ಸ್ಥಳೀಕರಣ (l10n) ಪರಿಗಣನೆಗಳು

ಜಾಗತಿಕ ಸಂದರ್ಭದಲ್ಲಿ ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸುವಾಗ, ವಿವಿಧ ಸಂಸ್ಕೃತಿಗಳು ಮತ್ತು ಭಾಷೆಗಳ ಬಳಕೆದಾರರಿಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಅಂತರರಾಷ್ಟ್ರೀಕರಣ (i18n) ಮತ್ತು ಸ್ಥಳೀಕರಣ (l10n) ಅನ್ನು ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ. ನೆನಪಿನಲ್ಲಿಡಬೇಕಾದ ಕೆಲವು ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳು ಇಲ್ಲಿವೆ:

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

ಉದಾಹರಣೆಗೆ, ಬೆಲೆಯನ್ನು ಪ್ರದರ್ಶಿಸುವ ಉತ್ಪನ್ನ ಕಾರ್ಡ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಯುಎಸ್‌ನಲ್ಲಿ, ಬೆಲೆಯನ್ನು "$19.99" ಎಂದು ಪ್ರದರ್ಶಿಸಬಹುದು. ಜರ್ಮನಿಯಲ್ಲಿ, ಅದನ್ನು "19,99 $" ಎಂದು ಪ್ರದರ್ಶಿಸಬಹುದು. ವಿಭಿನ್ನ ಉದ್ದ ಮತ್ತು ಕರೆನ್ಸಿ ಚಿಹ್ನೆಯ ಸ್ಥಾನವು ಕಾರ್ಡ್‌ನ ಲೇಔಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು, ಇದಕ್ಕೆ ವಿಭಿನ್ನ ಕಂಟೈನರ್ ಕ್ವೆರಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಬೇಕಾಗಬಹುದು. ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು (ಉದಾ., ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅಥವಾ ಗ್ರಿಡ್) ಮತ್ತು ಸಾಪೇಕ್ಷ ಘಟಕಗಳನ್ನು (ಉದಾ., em ಅಥವಾ rem) ಬಳಸುವುದು ಈ ಸಮಸ್ಯೆಗಳನ್ನು ತಗ್ಗಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಪ್ರವೇಶಿಸುವಿಕೆ (Accessibility) ಪರಿಗಣನೆಗಳು

ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ ಮತ್ತು ಪಾಲಿಫಿಲ್ ಬಳಸುವಾಗ, ಪ್ರವೇಶಿಸುವಿಕೆಗೆ ಯಾವಾಗಲೂ ಪ್ರಮುಖ ಆದ್ಯತೆ ನೀಡಬೇಕು. ನಿಮ್ಮ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳು ಪ್ರವೇಶಿಸಬಹುದಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಕೆಲವು ಪರಿಗಣನೆಗಳು ಇಲ್ಲಿವೆ:

• ಸೆಮ್ಯಾಂಟಿಕ್ HTML: ನಿಮ್ಮ ವಿಷಯವನ್ನು ರಚಿಸಲು ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿ. ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಸ್ಪಷ್ಟ ಮತ್ತು ತಾರ್ಕಿಕ ರಚನೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
• ಫೋಕಸ್ ನಿರ್ವಹಣೆ: ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳ ಆಧಾರದ ಮೇಲೆ ಲೇಔಟ್ ಬದಲಾದಾಗ ಫೋಕಸ್ ಅನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಬಳಕೆದಾರರು ಕೀಬೋರ್ಡ್ ಬಳಸಿ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗಬೇಕು, ಮತ್ತು ಫೋಕಸ್ ಕ್ರಮವು ತಾರ್ಕಿಕ ಮತ್ತು ಸಹಜವಾಗಿರಬೇಕು.
• ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್: ಕಂಟೈನರ್ ಗಾತ್ರ ಅಥವಾ ಸಾಧನವನ್ನು ಲೆಕ್ಕಿಸದೆ, ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳ ನಡುವೆ ಸಾಕಷ್ಟು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಪಠ್ಯದ ಮರುಗಾತ್ರ: ಲೇಔಟ್ ಅನ್ನು ಮುರಿಯದೆ ಅಥವಾ ವಿಷಯವನ್ನು ಕಳೆದುಕೊಳ್ಳದೆ ಪಠ್ಯವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಬಹುದು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ಬಳಕೆದಾರರು ತಮ್ಮ ಆದ್ಯತೆಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ಪಠ್ಯದ ಗಾತ್ರವನ್ನು ಸರಿಹೊಂದಿಸುವುದನ್ನು ತಡೆಯಬಾರದು.
• ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಪರೀಕ್ಷೆ: ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ ಅದು ಪ್ರವೇಶಿಸಬಹುದಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಮತ್ತು ಇತರ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ.

ತೀರ್ಮಾನ

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

ಕಂಟೈನರ್-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್‌ನ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಕೌಶಲ್ಯಗಳನ್ನು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಏರಿಸಿ!