CSS ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳು: ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಶೈಲಿ-ಆಧಾರಿತ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ

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

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

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

ಇದನ್ನು ಹೀಗೆ ಯೋಚಿಸಿ: "ವ್ಯೂಪೋರ್ಟ್ 768px ಗಿಂತ ಅಗಲವಾಗಿದೆಯೇ?" ಎಂದು ಕೇಳುವ ಬದಲು, "ಈ ಕಂಟೇನರ್‌ನಲ್ಲಿ --theme: dark; ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಸೆಟ್ ಆಗಿದೆಯೇ?" ಎಂದು ಕೇಳಬಹುದು. ಇದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ವಿವಿಧ ಥೀಮ್‌ಗಳು, ಲೇಔಟ್‌ಗಳು ಅಥವಾ ಬ್ರ್ಯಾಂಡಿಂಗ್ ವ್ಯತ್ಯಾಸಗಳಿಗೆ ಮನಬಂದಂತೆ ಹೊಂದಿಕೊಳ್ಳಬಲ್ಲ ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಂಪೂರ್ಣ ಹೊಸ ಸಾಧ್ಯತೆಗಳ ಜಗತ್ತನ್ನು ತೆರೆಯುತ್ತದೆ.

ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳ ಪ್ರಯೋಜನಗಳು

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

CSS ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು

ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳನ್ನು ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಎಂಬುದರ ವಿವರ ಇಲ್ಲಿದೆ:

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

ಮೊದಲಿಗೆ, ನೀವು ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕಂಟೇನರ್ ಎಂದು ಗೊತ್ತುಪಡಿಸಬೇಕು. ಇದನ್ನು container-type ಪ್ರಾಪರ್ಟಿ ಬಳಸಿ ಮಾಡಬಹುದು:

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

inline-size ಮೌಲ್ಯವು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮತ್ತು ಉಪಯುಕ್ತವಾಗಿದೆ, ಏಕೆಂದರೆ ಇದು ಕಂಟೇನರ್ ತನ್ನ ಇನ್‌ಲೈನ್ (ಸಮತಲ) ಗಾತ್ರವನ್ನು ಪ್ರಶ್ನಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ನೀವು size ಅನ್ನು ಸಹ ಬಳಸಬಹುದು, ಇದು ಇನ್‌ಲೈನ್ ಮತ್ತು ಬ್ಲಾಕ್ ಗಾತ್ರ ಎರಡನ್ನೂ ಪ್ರಶ್ನಿಸುತ್ತದೆ. ನೀವು ಜಾಗರೂಕರಾಗಿರದಿದ್ದರೆ ಕೇವಲ size ಅನ್ನು ಬಳಸುವುದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು.

ಪರ್ಯಾಯವಾಗಿ, ಕಂಟೇನರ್ ಅನ್ನು ಕೇವಲ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳಿಗೆ ಬಳಸಲು container-type: style ಬಳಸಿ, ಗಾತ್ರ ಕ್ವೆರಿಗಳಿಗೆ ಅಲ್ಲ, ಅಥವಾ ಎರಡನ್ನೂ ಬಳಸಲು container-type: size style ಬಳಸಿ. ಕಂಟೇನರ್ ಹೆಸರನ್ನು ನಿಯಂತ್ರಿಸಲು, container-name: my-container ಬಳಸಿ ಮತ್ತು ನಂತರ ಅದನ್ನು @container my-container (...) ನೊಂದಿಗೆ ಗುರಿಯಾಗಿಸಿ.

2. ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಈಗ, ಒಂದು ನಿರ್ದಿಷ್ಟ ಸ್ಥಿತಿಯನ್ನು ಪೂರೈಸಿದಾಗ ಅನ್ವಯವಾಗುವ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನೀವು @container style() at-rule ಅನ್ನು ಬಳಸಬಹುದು:

@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, @container ನಿಯಮದೊಳಗಿನ ಶೈಲಿಗಳು .component ಎಲಿಮೆಂಟ್‌ಗೆ ಮಾತ್ರ ಅನ್ವಯವಾಗುತ್ತವೆ, ಅದರ ಕಂಟೇನಿಂಗ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ --theme ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು dark ಎಂದು ಸೆಟ್ ಮಾಡಿದಾಗ ಮಾತ್ರ.

3. ಕಂಟೇನರ್‌ಗೆ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುವುದು

ಅಂತಿಮವಾಗಿ, ನಿಮ್ಮ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳು ಪರಿಶೀಲಿಸುತ್ತಿರುವ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನೀವು ಕಂಟೇನರ್ ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸಬೇಕಾಗುತ್ತದೆ:

<div class="container" style="--theme: dark;">
  <div class="component">This is a component. </div>
</div>

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .component ಡಾರ್ಕ್ ಹಿನ್ನೆಲೆ ಮತ್ತು ಬಿಳಿ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುತ್ತದೆ ಏಕೆಂದರೆ ಅದರ ಕಂಟೇನರ್‌ಗೆ HTML ನಲ್ಲಿ ನೇರವಾಗಿ --theme: dark; ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸಲಾಗಿದೆ (ಸರಳತೆಗಾಗಿ). ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸವೆಂದರೆ CSS ಕ್ಲಾಸ್‌ಗಳ ಮೂಲಕ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುವುದು. ನೀವು ಕಂಟೇನರ್‌ನಲ್ಲಿನ ಶೈಲಿಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಬದಲಾಯಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸಹ ಬಳಸಬಹುದು, ಇದು ಸ್ಟೈಲ್ ಕ್ವೆರಿ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.

ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು

1. ಥೀಮ್ ಆಧಾರಿತ ಕಾಂಪೊನೆಂಟ್‌ಗಳು

ಹಲವಾರು ಥೀಮ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುವ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಸಕ್ರಿಯ ಥೀಮ್ ಅನ್ನು ಆಧರಿಸಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಶೈಲಿಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಹೊಂದಿಸಲು ನೀವು ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಬಹುದು.

/* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>Card Title</h2>
    <p>Card content.</p>
  </div>
</div>

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .card ಕಾಂಪೊನೆಂಟ್ ತನ್ನ ಕಂಟೇನರ್‌ನ --theme ಪ್ರಾಪರ್ಟಿಯನ್ನು ಆಧರಿಸಿ ಡಾರ್ಕ್ ಮತ್ತು ಲೈಟ್ ಥೀಮ್‌ಗಳ ನಡುವೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬದಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರು ತಮ್ಮ ಇಚ್ಛೆಯಂತೆ ವಿವಿಧ ಥೀಮ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದಾದ ಸೈಟ್‌ಗಳಿಗೆ ಇದು ತುಂಬಾ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ.

2. ಲೇಔಟ್ ವ್ಯತ್ಯಾಸಗಳು

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

/* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* Styles for compact dropdown */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* Styles for full list of languages */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

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

3. ವಿಷಯದ ಪ್ರಕಾರಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳುವುದು

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

/* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (with image) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (without image) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

ಇದು ಲೇಖನ ಸಾರಾಂಶಗಳ ಹೆಚ್ಚು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ ಮತ್ತು ಮಾಹಿತಿಯುಕ್ತ ಪ್ರಸ್ತುತಿಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. HTML ನಲ್ಲಿ ನೇರವಾಗಿ `--has-image` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸೆಟ್ ಮಾಡುವುದು ಸೂಕ್ತವಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಚಿತ್ರದ ಉಪಸ್ಥಿತಿಯನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವುದು ಮತ್ತು `.article-summary` ಎಲಿಮೆಂಟ್‌ಗೆ ಡೈನಾಮಿಕ್ ಆಗಿ ಒಂದು ಕ್ಲಾಸ್ (ಉದಾ., `.has-image`) ಅನ್ನು ಸೇರಿಸುವುದು ಅಥವಾ ತೆಗೆದುಹಾಕುವುದು ಉತ್ತಮ ವಿಧಾನವಾಗಿದೆ, ಮತ್ತು ನಂತರ `.has-image` ಕ್ಲಾಸ್‌ಗಾಗಿ CSS ನಿಯಮದೊಳಗೆ `--has-image` ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸೆಟ್ ಮಾಡುವುದು ಉತ್ತಮ.

4. ಸ್ಥಳೀಕರಿಸಿದ ಶೈಲಿ

ಅಂತರರಾಷ್ಟ್ರೀಯ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ, ಭಾಷೆ ಅಥವಾ ಪ್ರದೇಶವನ್ನು ಆಧರಿಸಿ ಶೈಲಿಗಳನ್ನು ಅಳವಡಿಸಲು ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ದೀರ್ಘ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ಭಾಷೆಗಳಿಗೆ ನೀವು ವಿಭಿನ್ನ ಫಾಂಟ್ ಗಾತ್ರಗಳು ಅಥವಾ ಅಂತರವನ್ನು ಬಳಸಲು ಬಯಸಬಹುದು.

/* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

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

5. ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು

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

/* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

ಇದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಎಲ್ಲರಿಗೂ, ಅವರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಲೆಕ್ಕಿಸದೆ, ಬಳಸಬಹುದಾದ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದಂತೆ ಇರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್ ಮಟ್ಟದಲ್ಲಿ ಹೈ ಕಾಂಟ್ರಾಸ್ಟ್ ಮೋಡ್ ಅನ್ನು ಪತ್ತೆಹಚ್ಚಲು `@media (prefers-contrast: more)` ಮೀಡಿಯಾ ಕ್ವೆರಿಯ ಬಳಕೆಯನ್ನು ಗಮನಿಸಿ, ಮತ್ತು ನಂತರ `--high-contrast` ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸೆಟ್ ಮಾಡುವುದು. ಇದು ಬಳಕೆದಾರರ ಸಿಸ್ಟಮ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಆಧರಿಸಿ ಸ್ಟೈಲ್ ಕ್ವೆರಿ ಬಳಸಿ ಶೈಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಪ್ರಚೋದಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

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

• ವಿವರಣಾತ್ಮಕ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ಪ್ರಾಪರ್ಟಿಯ ಉದ್ದೇಶವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸುವ ಹೆಸರುಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ (ಉದಾ., --t ಬದಲಿಗೆ --theme).
• ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳನ್ನು ಸರಳವಾಗಿಡಿ: ಓದುವಿಕೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳಲ್ಲಿ ಸಂಕೀರ್ಣ ತರ್ಕವನ್ನು ತಪ್ಪಿಸಿ.
• ಘನ ಅಡಿಪಾಯದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ: ಮೂಲಭೂತ ಲೇಔಟ್ ಮತ್ತು ಶೈಲಿಗಾಗಿ ಸಾಂಪ್ರದಾಯಿಕ CSS ಮತ್ತು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ. ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳು ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ CSS ಅನ್ನು ವರ್ಧಿಸಬೇಕೇ ಹೊರತು ಬದಲಾಯಿಸಬಾರದು.
• ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸಮರ್ಥವಾಗಿದ್ದರೂ, ನೀವು ಬಳಸುವ ಕ್ವೆರಿಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಅವು ಪ್ರಚೋದಿಸುವ ಶೈಲಿಗಳ ಸಂಕೀರ್ಣತೆಯ ಬಗ್ಗೆ ಜಾಗರೂಕರಾಗಿರಿ. ಅವುಗಳನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು, ವಿಶೇಷವಾಗಿ ಹಳೆಯ ಸಾಧನಗಳಲ್ಲಿ.
• ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸರಿಯಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಸಂದರ್ಭಗಳಲ್ಲಿ ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.
• ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಬಳಸಿ: ಇನ್ನೂ ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಿ. ಸ್ಟೈಲ್ ಕ್ವೆರಿ ಕೋಡ್ ಅನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಅನ್ವಯಿಸಲು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು (`@supports`) ಬಳಸಬಹುದು.
• ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ದಾಖಲಿಸಿ: ಪ್ರತಿ ಕಾಂಪೊನೆಂಟ್‌ನ ಉದ್ದೇಶಿತ ಬಳಕೆ ಮತ್ತು ಅದು ಅವಲಂಬಿಸಿರುವ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ದಾಖಲಿಸಿ.
• ಕ್ಯಾಸ್ಕೇಡ್ ಅನ್ನು ಪರಿಗಣಿಸಿ: ಕ್ಯಾಸ್ಕೇಡ್ ಇನ್ನೂ ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳಲ್ಲಿ ಅನ್ವಯವಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ನಿಮ್ಮ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವಾಗ ನಿರ್ದಿಷ್ಟತೆ ಮತ್ತು ಆನುವಂಶಿಕತೆಯ ಬಗ್ಗೆ ತಿಳಿದಿರಲಿ.
• ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಮಿತವಾಗಿ ಬಳಸಿ: ಕಂಟೇನರ್‌ನಲ್ಲಿ ಶೈಲಿಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಬದಲಾಯಿಸಲು ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಬಹುದಾದರೂ, ಅದರ ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿ. ಶೈಲಿಯ ಬದಲಾವಣೆಗಳಿಗಾಗಿ ಸಾಧ್ಯವಾದಷ್ಟು CSS ಮೇಲೆ ಅವಲಂಬಿತರಾಗಿ.

ಬ್ರೌಸರ್ ಬೆಂಬಲ

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

ತೀರ್ಮಾನ

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

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

ಸಂಪನ್ಮೂಲಗಳು

• MDN ವೆಬ್ ಡಾಕ್ಸ್: CSS ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು
• CSS ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳು – ಒಂದು ಮೊದಲ ನೋಟ
• ಕಂಟೇನರ್ ಸ್ಟೈಲ್ ಕ್ವೆರಿಗಳ ಪಾಲಿಫಿಲ್‌ಗಳು