CSS @when ನಿಯಮ: ಷರತ್ತುಬದ್ಧ ಶೈಲಿ ಅನ್ವಯವನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು

CSS ಜಗತ್ತು ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ, ವೆಬ್ ಪುಟಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ಶಕ್ತಿಶಾಲಿ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಮಾರ್ಗಗಳನ್ನು ನೀಡುತ್ತಿದೆ. ಇಂತಹ ಒಂದು ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ @when ನಿಯಮ, ಇದನ್ನು CSS ಕಂಡಿಷನಲ್ ರೂಲ್ಸ್ ಮಾಡ್ಯೂಲ್ ಲೆವೆಲ್ 1 ಎಂದೂ ಕರೆಯುತ್ತಾರೆ. ಈ ನಿಯಮವು ನಿರ್ದಿಷ್ಟ ಷರತ್ತುಗಳನ್ನು ಪೂರೈಸಿದಾಗ, ಷರತ್ತುಬದ್ಧವಾಗಿ CSS ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ, ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್, ಮತ್ತು ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ.

CSS @when ನಿಯಮ ಎಂದರೇನು?

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

@when ಬಳಸುವುದರ ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳು

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

@when ನಿಯಮದ ಸಿಂಟ್ಯಾಕ್ಸ್

@when ನಿಯಮದ ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ:

@when <condition> {
  /* CSS rules to apply when the condition is true */
}

<condition> ಯಾವುದೇ ಮಾನ್ಯವಾದ ಬೂಲಿಯನ್ ಅಭಿವ್ಯಕ್ತಿಯಾಗಿರಬಹುದು, ಅದು true ಅಥವಾ false ಗೆ ಮೌಲ್ಯಮಾಪನ ಮಾಡುತ್ತದೆ. ಈ ಅಭಿವ್ಯಕ್ತಿಯು ಸಾಮಾನ್ಯವಾಗಿ ಇವುಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ:

• ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು: ವ್ಯೂಪೋರ್ಟ್ ಗುಣಲಕ್ಷಣಗಳ ಆಧಾರದ ಮೇಲೆ ಷರತ್ತುಗಳು (ಉದಾಹರಣೆಗೆ, ಸ್ಕ್ರೀನ್ ಅಗಲ, ಸಾಧನದ ಓರಿಯಂಟೇಶನ್).
• ಫೀಚರ್ ಕ್ವೆರಿಗಳು (@supports): ನಿರ್ದಿಷ್ಟ CSS ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲದ ಆಧಾರದ ಮೇಲೆ ಷರತ್ತುಗಳು.
• ಬೂಲಿಯನ್ ಆಲ್ಜೀಬ್ರಾ: ತಾರ್ಕಿಕ ಆಪರೇಟರ್‌ಗಳನ್ನು (and, or, not) ಬಳಸಿ ಬಹು ಷರತ್ತುಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು.

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

@when ನಿಯಮದ ಶಕ್ತಿ ಮತ್ತು ಬಹುಮುಖತೆಯನ್ನು ವಿವರಿಸಲು ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

1. @when ಮತ್ತು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ

@when ನ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಬಳಕೆಯು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸವಾಗಿದೆ, ಅಲ್ಲಿ ನೀವು ಸ್ಕ್ರೀನ್ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ಶೈಲಿಗಳನ್ನು ಸರಿಹೊಂದಿಸುತ್ತೀರಿ. ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಇದನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಸಾಧಿಸಬಹುದಾದರೂ, @when ಹೆಚ್ಚು ರಚನಾತ್ಮಕ ಮತ್ತು ಓದಬಲ್ಲ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಷರತ್ತುಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, @when ಬ್ಲಾಕ್‌ನೊಳಗಿನ ಶೈಲಿಗಳು ಸ್ಕ್ರೀನ್ ಅಗಲ 768px ಮತ್ತು 1023px (ಸಾಮಾನ್ಯ ಟ್ಯಾಬ್ಲೆಟ್ ಗಾತ್ರ) ನಡುವೆ ಇದ್ದಾಗ ಮಾತ್ರ ಅನ್ವಯವಾಗುತ್ತವೆ. ಇದು ನಿರ್ದಿಷ್ಟ ವ್ಯೂಪೋರ್ಟ್ ಶ್ರೇಣಿಗಳಿಗೆ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಸ್ಪಷ್ಟ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.

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

2. @when ಮತ್ತು @supports ಜೊತೆಗೆ ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್

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

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Fallback styles for browsers that don't support grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Adjust width for older browsers */
  }
}

ಇಲ್ಲಿ, ಬ್ರೌಸರ್ CSS ಗ್ರಿಡ್ ಲೇಔಟ್ ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂದು ಪರೀಕ್ಷಿಸಲು ನಾವು @supports ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಅದು ಬೆಂಬಲಿಸಿದರೆ, ನಾವು .container ಗೆ ಗ್ರಿಡ್-ಆಧಾರಿತ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತೇವೆ. ಇಲ್ಲದಿದ್ದರೆ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಇದೇ ರೀತಿಯ ಲೇಔಟ್ ಅನ್ನು ಸಾಧಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಾವು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಬಳಸಿ ಫಾಲ್‌ಬ್ಯಾಕ್ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸುತ್ತೇವೆ.

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

3. ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಮತ್ತು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು

@when ನ ನಿಜವಾದ ಶಕ್ತಿಯು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮತ್ತು ಸೂಕ್ಷ್ಮವಾದ ಷರತ್ತುಬದ್ಧ ಸ್ಟೈಲಿಂಗ್ ನಿಯಮಗಳನ್ನು ರಚಿಸಲು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಮತ್ತು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಸಾಮರ್ಥ್ಯದಿಂದ ಬರುತ್ತದೆ.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .modal ಅಂಶವು ಸ್ಕ್ರೀನ್ ಅಗಲವು ಕನಿಷ್ಠ 768px ಆಗಿದ್ದಾಗ ಮತ್ತು ಬ್ರೌಸರ್ backdrop-filter ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬೆಂಬಲಿಸಿದಾಗ ಮಾತ್ರ ಮಸುಕಾದ ಹಿನ್ನೆಲೆಯನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಇದು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸಂಭವನೀಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳು ಅಥವಾ ರೆಂಡರಿಂಗ್ ದೋಷಗಳನ್ನು ತಪ್ಪಿಸುವಾಗ, ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

4. ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ (CSS ವೇರಿಯಬಲ್ಸ್) ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲಿಂಗ್

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

ಮೊದಲು, ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ:

:root {
  --theme-color: #007bff; /* Default theme color */
  --is-dark-mode: false;
}

ನಂತರ, ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಮೌಲ್ಯವನ್ನು ಆಧರಿಸಿ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು @when ಬಳಸಿ:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

ಕೊನೆಯದಾಗಿ, --is-dark-mode ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಮೌಲ್ಯವನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

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

@when ( --is-dark-mode > 0 ) { ... }

ಆದಾಗ್ಯೂ, ಇದು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯು ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಪ್ರವೇಶಿಸುವಿಕೆ ಟಿಪ್ಪಣಿ: ಪರ್ಯಾಯ ಥೀಮ್‌ಗಳನ್ನು (ಉದಾ. ಡಾರ್ಕ್ ಮೋಡ್) ಒದಗಿಸುವುದು ಪ್ರವೇಶಿಸುವಿಕೆಗೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ದೃಷ್ಟಿ ದೋಷವುಳ್ಳ ಬಳಕೆದಾರರು ಹೆಚ್ಚಿನ ಕಾಂಟ್ರಾಸ್ಟ್ ಥೀಮ್‌ಗಳಿಂದ ಪ್ರಯೋಜನ ಪಡೆಯಬಹುದು. ನಿಮ್ಮ ಥೀಮ್ ಸ್ವಿಚ್ ಕೀಬೋರ್ಡ್ ಮತ್ತು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳ ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

5. ಡೇಟಾ ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲಿಂಗ್

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

ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಬಳಿ ಕಾರ್ಯಗಳ ಪಟ್ಟಿ ಇದೆ ಎಂದುಕೊಳ್ಳಿ, ಮತ್ತು ಪ್ರತಿಯೊಂದು ಕಾರ್ಯವು ಅದರ ಸ್ಥಿತಿಯನ್ನು ಸೂಚಿಸುವ data-status ಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಹೊಂದಿದೆ (ಉದಾ., "todo", "in-progress", "completed"). ಪ್ರತಿಯೊಂದು ಕಾರ್ಯವನ್ನು ಅದರ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ವಿಭಿನ್ನವಾಗಿ ಸ್ಟೈಲ್ ಮಾಡಲು ನೀವು @when ಅನ್ನು ಬಳಸಬಹುದು.

[data-status="todo"] {
  /* Default styles for todo tasks */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

ಗಮನಿಸಿ: attribute() ಪರೀಕ್ಷಾ ಸ್ಥಿತಿಗೆ ಬೆಂಬಲವು ಸೀಮಿತವಾಗಿರಬಹುದು ಅಥವಾ ಪ್ರಸ್ತುತ ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯಗತಗೊಂಡಿಲ್ಲದಿರಬಹುದು. ಯಾವಾಗಲೂ ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಪಾಲಿಫಿಲ್‌ಗಳು

2024ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, @when ನಿಯಮಕ್ಕೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಇನ್ನೂ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ. ಅನೇಕ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ಮೂಲಭೂತ ಕಾರ್ಯವನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆಯಾದರೂ, ಕೆಲವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು ಬೆಂಬಲಿಸದಿರಬಹುದು. ಆದ್ದರಿಂದ, ಹೊಂದಾಣಿಕೆ ಕೋಷ್ಟಕಗಳನ್ನು ಪರಿಶೀಲಿಸುವುದು ಮತ್ತು ಅಗತ್ಯವಿರುವಲ್ಲಿ ಸೂಕ್ತವಾದ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಅಥವಾ ಪಾಲಿಫಿಲ್‌ಗಳನ್ನು ಬಳಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

@when ಮತ್ತು ಸಂಬಂಧಿತ ವೈಶಿಷ್ಟ್ಯಗಳ ಪ್ರಸ್ತುತ ಬ್ರೌಸರ್ ಬೆಂಬಲ ಸ್ಥಿತಿಯನ್ನು ಪರಿಶೀಲಿಸಲು ಯಾವಾಗಲೂ Can I use... ನಂತಹ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸಂಪರ್ಕಿಸಿ.

@when ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

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

ತೀರ್ಮಾನ

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

ವೆಬ್ ವಿಕಸನಗೊಳ್ಳುತ್ತಲೇ ಇರುವುದರಿಂದ, @when ನಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು ಪ್ರಪಂಚದಾದ್ಯಂತದ ಬಳಕೆದಾರರಿಗೆ ಆಕರ್ಷಕ, ಪ್ರವೇಶಿಸಬಹುದಾದ, ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಅತ್ಯಗತ್ಯವಾಗಿರುತ್ತದೆ. ಷರತ್ತುಬದ್ಧ ಸ್ಟೈಲಿಂಗ್‌ನ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ CSS ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಹೊಸ ಸಾಧ್ಯತೆಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ.