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

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

@when ನಿಯಮದ ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಅದರ ತಿರುಳಿನಲ್ಲಿ, @when ನಿಯಮವು ನಿರ್ದಿಷ್ಟ ಷರತ್ತು ಪೂರೈಸಿದಾಗ ಮಾತ್ರ ಸಿಎಸ್ಎಸ್ ಶೈಲಿಗಳ ಒಂದು ಬ್ಲಾಕ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಒಂದು ವ್ಯವಸ್ಥೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳಲ್ಲಿನ if ಹೇಳಿಕೆಗಳಿಗೆ ಹೋಲುತ್ತದೆ. ಅದರ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ವಿಭಜಿಸೋಣ:

@when condition {
  /* ಷರತ್ತು ನಿಜವಾದಾಗ ಅನ್ವಯಿಸಬೇಕಾದ CSS ನಿಯಮಗಳು */
}

condition ಹಲವಾರು ಅಂಶಗಳನ್ನು ಆಧರಿಸಿರಬಹುದು, ಅವುಗಳೆಂದರೆ:

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

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

@when ನೊಂದಿಗೆ ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು

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

ಮೂಲ ಕಂಟೈನರ್ ಕ್ವೆರಿ ಉದಾಹರಣೆ

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

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

inline-size ಕಂಟೈನರ್ ಅನ್ನು ಅದರ ಇನ್‌ಲೈನ್ ಗಾತ್ರದ (ಸಮತಲ ಬರವಣಿಗೆಯ ಮೋಡ್‌ಗಳಲ್ಲಿ ಅಗಲ, ಲಂಬ ಬರವಣಿಗೆಯ ಮೋಡ್‌ಗಳಲ್ಲಿ ಎತ್ತರ) ಆಧಾರದ ಮೇಲೆ ಕ್ವೆರಿ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಎರಡೂ ಆಯಾಮಗಳನ್ನು ಕ್ವೆರಿ ಮಾಡಲು ನೀವು size ಅನ್ನು ಸಹ ಬಳಸಬಹುದು, ಅಥವಾ ಕ್ವೆರಿ ಕಂಟೈನರ್ ರಚಿಸದಿರಲು normal ಅನ್ನು ಬಳಸಬಹುದು.

ಈಗ, ಕಂಟೈನರ್‌ನ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು @container ಅನ್ನು (ಸಾಮಾನ್ಯವಾಗಿ @when ನೊಂದಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ) ಬಳಸಬಹುದು:

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .card ನ ಲೇಔಟ್ ಕಂಟೈನರ್‌ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಬದಲಾಗುತ್ತದೆ. ಕಂಟೈನರ್ ಕನಿಷ್ಠ 300px ಅಗಲವಿದ್ದಾಗ, ಕಾರ್ಡ್ ಚಿತ್ರ ಮತ್ತು ಪಠ್ಯವನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಅದು ಕಿರಿದಾದಾಗ, ಅವು ಲಂಬವಾಗಿ ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ.

ಅದೇ ಫಲಿತಾಂಶವನ್ನು ಸಾಧಿಸಲು ನಾವು @when ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ, ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಕೋಡಿಂಗ್ ಆದ್ಯತೆಯನ್ನು ಅವಲಂಬಿಸಿ @container ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು (ಕೇವಲ ಕಂಟೈನರ್ ಗಾತ್ರವನ್ನು ಮೀರಿದ ಕೆಲವು ಸನ್ನಿವೇಶಗಳಲ್ಲಿ @when ಹೆಚ್ಚು ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ):

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

ಈ ಸಂದರ್ಭದಲ್ಲಿ, `card-container` ಎಂಬುದು `@container` ನೊಂದಿಗೆ ನಿಯೋಜಿಸಲಾದ ಕಂಟೈನರ್ ಹೆಸರಾಗಿದೆ, ಮತ್ತು `@when` ನಲ್ಲಿ `container(card-container)` ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಕಂಟೈನರ್ ಸಂದರ್ಭವು ಸಕ್ರಿಯವಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಗಮನಿಸಿ: `container()` ಫಂಕ್ಷನ್ ಮತ್ತು ನಿಖರವಾದ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗೆ ಬೆಂಬಲವು ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಆವೃತ್ತಿಗಳಾದ್ಯಂತ ಬದಲಾಗಬಹುದು. ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೊದಲು ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯ ಕೋಷ್ಟಕಗಳನ್ನು ಸಂಪರ್ಕಿಸಿ.

ಪ್ರಾಯೋಗಿಕ ಅಂತರರಾಷ್ಟ್ರೀಯ ಉದಾಹರಣೆಗಳು

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

@when ಅನ್ನು ಕಸ್ಟಮ್ ಸ್ಟೇಟ್‌ಗಳೊಂದಿಗೆ ಬಳಸುವುದು

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

ಪರಿಕಲ್ಪನಾತ್ಮಕ ಉದಾಹರಣೆ (ಸ್ಟೇಟ್‌ಗಳನ್ನು ಅನುಕರಿಸಲು CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದು)

ಸ್ಥಳೀಯ ಕಸ್ಟಮ್ ಸ್ಟೇಟ್ ಬೆಂಬಲವು ಇನ್ನೂ ಸಾರ್ವತ್ರಿಕವಾಗಿ ಲಭ್ಯವಿಲ್ಲದ ಕಾರಣ, ನಾವು ಅದನ್ನು CSS ವೇರಿಯಬಲ್‌ಗಳು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಅನುಕರಿಸಬಹುದು.

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಎಲಿಮೆಂಟ್‌ನ ಸ್ಥಿತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು --is-active ಎಂಬ CSS ವೇರಿಯಬಲ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಈ ವೇರಿಯಬಲ್‌ನ ಮೌಲ್ಯವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ನಂತರ @when ನಿಯಮವು --is-active 1 ಕ್ಕೆ ಸಮನಾದಾಗ ವಿಭಿನ್ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಇದು ಒಂದು ತಾತ್ಕಾಲಿಕ ಪರಿಹಾರವಾಗಿದ್ದರೂ, ಇದು ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿದ ಷರತ್ತುಬದ್ಧ ಸ್ಟೈಲಿಂಗ್‌ನ ಪರಿಕಲ್ಪನೆಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ನಿಜವಾದ ಕಸ್ಟಮ್ ಸ್ಟೇಟ್‌ಗಳೊಂದಿಗೆ ಸಂಭಾವ್ಯ ಭವಿಷ್ಯದ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

ನಿಜವಾದ ಕಸ್ಟಮ್ ಸ್ಟೇಟ್‌ಗಳನ್ನು ಅಳವಡಿಸಿದಾಗ, ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ರೀತಿ ಇರಬಹುದು (ಗಮನಿಸಿ: ಇದು ಊಹಾತ್ಮಕ ಮತ್ತು ಪ್ರಸ್ತಾಪಗಳನ್ನು ಆಧರಿಸಿದೆ):

.my-element {
  /* ಆರಂಭಿಕ ಶೈಲಿಗಳು */
}

@when :state(my-custom-state) {
  .my-element {
    /* ಕಸ್ಟಮ್ ಸ್ಟೇಟ್ ಸಕ್ರಿಯವಾದಾಗ ಶೈಲಿಗಳು */
  }
}

ನಂತರ ನೀವು ಕಸ್ಟಮ್ ಸ್ಟೇಟ್ ಅನ್ನು ಸೆಟ್ ಮಾಡಲು ಮತ್ತು ಅನ್‌ಸೆಟ್ ಮಾಡಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುತ್ತೀರಿ:

element.states.add('my-custom-state'); // ಸ್ಟೇಟ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ
element.states.remove('my-custom-state'); // ಸ್ಟೇಟ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ

ಇದು ಅಪ್ಲಿಕೇಶನ್ ಲಾಜಿಕ್ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲಿಂಗ್ ಮೇಲೆ ನಂಬಲಾಗದಷ್ಟು ಸೂಕ್ಷ್ಮ-ಧಾನ್ಯದ ನಿಯಂತ್ರಣವನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

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

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

CSS ವೇರಿಯಬಲ್‌ಗಳು ಮತ್ತು ರೇಂಜ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು

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

ಉದಾಹರಣೆ: ಥೀಮ್ ಬದಲಾಯಿಸುವುದು

:root {
  --theme-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--theme-color);
  color: var(--text-color);
}

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, --theme-color ವೇರಿಯಬಲ್ ಬಾಡಿಯ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಅದನ್ನು #000 ಗೆ ಹೊಂದಿಸಿದಾಗ, @when ನಿಯಮವು --text-color ಅನ್ನು #fff ಗೆ ಬದಲಾಯಿಸುತ್ತದೆ, ಡಾರ್ಕ್ ಥೀಮ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ನಂತರ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಅಥವಾ ಬಳಕೆದಾರರ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ ಬೇರೆ CSS ವೇರಿಯಬಲ್ ಅನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ --theme-color ನ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸಬಹುದು.

ರೇಂಜ್ ಕ್ವೆರಿಗಳು

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

@when (400px <= width <= 800px) {
  .element {
    /* ಅಗಲವು 400px ಮತ್ತು 800px ನಡುವೆ ಇದ್ದಾಗ ಅನ್ವಯಿಸಲಾದ ಶೈಲಿಗಳು */
  }
}

ಆದಾಗ್ಯೂ, @when ಒಳಗೆ ರೇಂಜ್ ಕ್ವೆರಿಗಳಿಗಾಗಿ ನಿಖರವಾದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮತ್ತು ಬೆಂಬಲವು ಬದಲಾಗಬಹುದು. ಇತ್ತೀಚಿನ ನಿರ್ದಿಷ್ಟತೆಗಳು ಮತ್ತು ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯ ಕೋಷ್ಟಕಗಳನ್ನು ಸಂಪರ್ಕಿಸುವುದು ಸೂಕ್ತ. ಗಾತ್ರ-ಆಧಾರಿತ ಪರಿಸ್ಥಿತಿಗಳಿಗಾಗಿ ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ಹೆಚ್ಚಾಗಿ ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ಉತ್ತಮವಾಗಿ ಬೆಂಬಲಿತ ಪರ್ಯಾಯವನ್ನು ಒದಗಿಸುತ್ತವೆ.

ಜಾಗತಿಕ ಪ್ರವೇಶಿಸುವಿಕೆ ಮತ್ತು ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳು

• ಹೈ ಕಾಂಟ್ರಾಸ್ಟ್ ಥೀಮ್‌ಗಳು: ದೃಷ್ಟಿ ದೋಷವುಳ್ಳ ಬಳಕೆದಾರರಿಗೆ ಅನುಕೂಲವಾಗುವ ಹೈ ಕಾಂಟ್ರಾಸ್ಟ್ ಥೀಮ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು CSS ವೇರಿಯಬಲ್‌ಗಳು ಮತ್ತು @when ನಿಯಮವನ್ನು ಬಳಸಿ. ಬಳಕೆದಾರರು ತಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳನ್ನು ಪೂರೈಸಲು ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ಮತ್ತು ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಅನುಮತಿಸಿ.
• ಕಡಿಮೆ ಚಲನೆ (Reduced Motion): ಬಳಕೆದಾರರು ತಮ್ಮ ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಂನಲ್ಲಿ "ಕಡಿಮೆ ಚಲನೆ" ಸೆಟ್ಟಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದಾಗ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕಡಿಮೆ ಚಲನೆಗಾಗಿ ಬಳಕೆದಾರರ ಆದ್ಯತೆಯನ್ನು ಗೌರವಿಸಿ. ಹೆಚ್ಚು ನಿಖರವಾದ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ prefers-reduced-motion ಮೀಡಿಯಾ ಕ್ವೆರಿಯನ್ನು @when ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು.
• ಫಾಂಟ್ ಗಾತ್ರ ಹೊಂದಾಣಿಕೆಗಳು: CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ವೆಬ್‌ಸೈಟ್‌ನ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಸರಿಹೊಂದಿಸಲು ಬಳಕೆದಾರರಿಗೆ ಅನುಮತಿಸಿ. ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಓದುವಿಕೆ ಮತ್ತು ಉಪಯುಕ್ತತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿಭಿನ್ನ ಫಾಂಟ್ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳಲು ಎಲಿಮೆಂಟ್‌ಗಳ ಲೇಔಟ್ ಮತ್ತು ಅಂತರವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಲು @when ನಿಯಮವನ್ನು ಬಳಸಿ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು

• ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ: @when ನಿಯಮವು ಇನ್ನೂ ತುಲನಾತ್ಮಕವಾಗಿ ಹೊಸದಾಗಿದೆ, ಮತ್ತು ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಇನ್ನೂ ಸಾರ್ವತ್ರಿಕವಾಗಿಲ್ಲ. ಪ್ರೊಡಕ್ಷನ್‌ನಲ್ಲಿ ಬಳಸುವ ಮೊದಲು ಯಾವಾಗಲೂ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯ ಕೋಷ್ಟಕಗಳನ್ನು ಪರಿಶೀಲಿಸಿ. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಪಾಲಿಫಿಲ್‌ಗಳು ಅಥವಾ ಫಾಲ್‌ಬ್ಯಾಕ್ ಪರಿಹಾರಗಳನ್ನು ಪರಿಗಣಿಸಿ. 2024 ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸೀಮಿತವಾಗಿ ಉಳಿದಿದೆ, ಮತ್ತು @container ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿರುವುದು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳೊಂದಿಗೆ CSS ವೇರಿಯಬಲ್‌ಗಳ ವಿವೇಚನಾಯುಕ್ತ ಬಳಕೆಯು ಹೆಚ್ಚಾಗಿ ಹೆಚ್ಚು ಪ್ರಾಯೋಗಿಕ ವಿಧಾನವಾಗಿದೆ.
• ನಿರ್ದಿಷ್ಟತೆ (Specificity): @when ನಿಯಮವನ್ನು ಬಳಸುವಾಗ CSS ನಿರ್ದಿಷ್ಟತೆಯ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ನಿಮ್ಮ ಷರತ್ತುಬದ್ಧ ಶೈಲಿಗಳು ಯಾವುದೇ ಸಂಘರ್ಷದ ಶೈಲಿಗಳನ್ನು ಅತಿಕ್ರಮಿಸಲು ಸಾಕಷ್ಟು ನಿರ್ದಿಷ್ಟವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ನಿರ್ವಹಣೆ (Maintainability): ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ಓದಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಮಾಡಲು CSS ವೇರಿಯಬಲ್‌ಗಳು ಮತ್ತು ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿ. ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಡೀಬಗ್ ಮಾಡಲು ಕಷ್ಟಕರವಾದ ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಷರತ್ತುಬದ್ಧ ನಿಯಮಗಳನ್ನು ರಚಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ.
• ಕಾರ್ಯಕ್ಷಮತೆ (Performance): @when ನಿಯಮವು ಪಾರ್ಸ್ ಮಾಡಬೇಕಾದ CSS ನ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದಾದರೂ, ಅದನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸುವುದು ಮುಖ್ಯ. ಷರತ್ತುಬದ್ಧ ನಿಯಮಗಳ ಅತಿಯಾದ ಬಳಕೆಯು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು, ವಿಶೇಷವಾಗಿ ಹಳೆಯ ಸಾಧನಗಳಲ್ಲಿ.
• ಪ್ರಗತಿಪರ ವರ್ಧನೆ (Progressive Enhancement): ಬ್ರೌಸರ್ @when ನಿಯಮವನ್ನು ಬೆಂಬಲಿಸದಿದ್ದರೂ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪ್ರಗತಿಪರ ವರ್ಧನೆಯನ್ನು ಬಳಸಿ. ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಮೂಲಭೂತ, ಕ್ರಿಯಾತ್ಮಕ ಅನುಭವವನ್ನು ಒದಗಿಸಿ ಮತ್ತು ನಂತರ ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಅದನ್ನು ಹಂತಹಂತವಾಗಿ ವರ್ಧಿಸಿ.

ಷರತ್ತುಬದ್ಧ ಸ್ಟೈಲಿಂಗ್‌ನ ಭವಿಷ್ಯ

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

CSS ಹೌಡಿನಿ ಮತ್ತು ಕಸ್ಟಮ್ ಸ್ಟೇಟ್‌ಗಳ ಪ್ರಮಾಣೀಕರಣದಲ್ಲಿನ ಹೆಚ್ಚಿನ ಪ್ರಗತಿಗಳು @when ನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಇನ್ನಷ್ಟು ಹೆಚ್ಚಿಸುತ್ತವೆ, ಸ್ಟೈಲಿಂಗ್ ಮೇಲೆ ಇನ್ನಷ್ಟು ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಹೆಚ್ಚು ತಡೆರಹಿತ ಏಕೀಕರಣವನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ತೀರ್ಮಾನ

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

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