CSS @when നിയമത്തിൽ പ്രാവീണ്യം നേടാം: ഡൈനാമിക് വെബ് ഡിസൈനിനായി സ്റ്റൈലുകൾ സോപാധികമായി പ്രയോഗിക്കാം

സിഎസ്എസ് കണ്ടീഷണൽ റൂൾസ് മൊഡ്യൂൾ ലെവൽ 5 സ്പെസിഫിക്കേഷൻ്റെ ഭാഗമായ സിഎസ്എസ് @when നിയമം, ചില വ്യവസ്ഥകളെ അടിസ്ഥാനമാക്കി സ്റ്റൈലുകൾ സോപാധികമായി പ്രയോഗിക്കാൻ ശക്തമായ ഒരു മാർഗം നൽകുന്നു. ഇത് പരമ്പരാഗത മീഡിയ ക്വറികൾക്കപ്പുറത്തേക്ക് പോകുന്നു, കണ്ടെയ്‌നർ വലുപ്പങ്ങൾ, കസ്റ്റം പ്രോപ്പർട്ടികൾ, എലമെൻ്റുകളുടെ അവസ്ഥ എന്നിവയെ അടിസ്ഥാനമാക്കി സ്റ്റൈലിംഗിൽ കൂടുതൽ സൂക്ഷ്മമായ നിയന്ത്രണം സാധ്യമാക്കുന്നു. ഇത് നിങ്ങളുടെ വെബ് ഡിസൈനുകളുടെ പ്രതികരണശേഷിയും പൊരുത്തപ്പെടുത്തലും ഗണ്യമായി വർദ്ധിപ്പിക്കുകയും, അതുവഴി വിവിധ ഉപകരണങ്ങളിലും സാഹചര്യങ്ങളിലും മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുകയും ചെയ്യും.

@when നിയമത്തിൻ്റെ അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കാം

അടിസ്ഥാനപരമായി, ഒരു നിശ്ചിത വ്യവസ്ഥ പാലിക്കുമ്പോൾ മാത്രം ഒരു കൂട്ടം സിഎസ്എസ് സ്റ്റൈലുകൾ നടപ്പിലാക്കുന്നതിനുള്ള ഒരു സംവിധാനമാണ് @when നിയമം നൽകുന്നത്. ഇത് പ്രോഗ്രാമിംഗ് ഭാഷകളിലെ if സ്റ്റേറ്റ്മെൻ്റുകൾക്ക് സമാനമാണ്. നമുക്ക് ഇതിൻ്റെ വാക്യഘടന പരിശോധിക്കാം:

@when condition {
  /* വ്യവസ്ഥ ശരിയാകുമ്പോൾ പ്രയോഗിക്കേണ്ട സിഎസ്എസ് നിയമങ്ങൾ */
}

ഇവിടെ നൽകുന്ന 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 പോലുള്ള പരമ്പരാഗത സിഎസ്എസ് സ്യൂഡോ-ക്ലാസുകൾ അപര്യാപ്തമായ സങ്കീർണ്ണ വെബ് ആപ്ലിക്കേഷനുകളിൽ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. ബ്രൗസർ നടപ്പാക്കലുകളിൽ കസ്റ്റം സ്റ്റേറ്റുകൾ ഇപ്പോഴും വികസിച്ചുകൊണ്ടിരിക്കുകയാണെങ്കിലും, പിന്തുണ പൂർണ്ണമാകുമ്പോൾ ഈ സ്റ്റേറ്റുകളെ അടിസ്ഥാനമാക്കി സ്റ്റൈലുകൾ നിയന്ത്രിക്കുന്നതിന് @when നിയമം ഒരു മികച്ച മാർഗം നൽകുന്നു.

ആശയപരമായ ഉദാഹരണം (സ്റ്റേറ്റുകൾ അനുകരിക്കാൻ സിഎസ്എസ് വേരിയബിളുകൾ ഉപയോഗിക്കുന്നു)

നേറ്റീവ് കസ്റ്റം സ്റ്റേറ്റ് പിന്തുണ ഇതുവരെ സാർവത്രികമായി ലഭ്യമല്ലാത്തതിനാൽ, സിഎസ്എസ് വേരിയബിളുകളും ജാവാസ്ക്രിപ്റ്റും ഉപയോഗിച്ച് നമുക്ക് ഇത് അനുകരിക്കാനാകും.

/* സിഎസ്എസ് */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

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

/* ജാവാസ്ക്രിപ്റ്റ് */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

ഈ ഉദാഹരണത്തിൽ, എലമെൻ്റിൻ്റെ സ്റ്റേറ്റ് ട്രാക്ക് ചെയ്യാൻ നമ്മൾ --is-active എന്ന സിഎസ്എസ് വേരിയബിൾ ഉപയോഗിക്കുന്നു. എലമെൻ്റ് ക്ലിക്ക് ചെയ്യുമ്പോൾ ജാവാസ്ക്രിപ്റ്റ് കോഡ് ഈ വേരിയബിളിൻ്റെ മൂല്യം ടോഗിൾ ചെയ്യുന്നു. --is-active-ൻ്റെ മൂല്യം 1 ആകുമ്പോൾ @when നിയമം വ്യത്യസ്തമായ പശ്ചാത്തല നിറം പ്രയോഗിക്കുന്നു. ഇതൊരു താൽക്കാലിക പരിഹാരമാണെങ്കിലും, സ്റ്റേറ്റിനെ അടിസ്ഥാനമാക്കിയുള്ള സോപാധിക സ്റ്റൈലിംഗിൻ്റെ ആശയം ഇത് വ്യക്തമാക്കുന്നു.

യഥാർത്ഥ കസ്റ്റം സ്റ്റേറ്റുകളോടുകൂടിയ ഭാവിയിലെ ഉപയോഗ സാധ്യതകൾ

യഥാർത്ഥ കസ്റ്റം സ്റ്റേറ്റുകൾ നടപ്പിലാക്കുമ്പോൾ, വാക്യഘടന ഇതുപോലെയായിരിക്കാം (ശ്രദ്ധിക്കുക: ഇത് ഊഹാപോഹപരവും നിർദ്ദേശങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ളതുമാണ്):

.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): ഫോക്കസ് ചെയ്ത ഘടകങ്ങൾ ഹൈലൈറ്റ് ചെയ്യുക അല്ലെങ്കിൽ ഒരു ഉപയോക്തൃ ഇടപെടൽ സ്റ്റേറ്റ് ട്രിഗർ ചെയ്യുമ്പോൾ ബദൽ ടെക്സ്റ്റ് വിവരണങ്ങൾ നൽകുക പോലുള്ള മെച്ചപ്പെട്ട പ്രവേശനക്ഷമത സവിശേഷതകൾ നൽകുന്നതിന് കസ്റ്റം സ്റ്റേറ്റുകൾ ഉപയോഗിക്കുക. ഈ സ്റ്റേറ്റ് മാറ്റങ്ങൾ സഹായക സാങ്കേതികവിദ്യകളിലേക്ക് ഫലപ്രദമായി ആശയവിനിമയം ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുക.
• സാംസ്കാരിക ഡിസൈൻ മുൻഗണനകൾ: സാംസ്കാരിക ഡിസൈൻ മുൻഗണനകളെ അടിസ്ഥാനമാക്കി ഘടകങ്ങളുടെ ദൃശ്യരൂപം മാറ്റുക. ഉദാഹരണത്തിന്, ഉപയോക്താവിൻ്റെ ലൊക്കേൽ അല്ലെങ്കിൽ ഭാഷയെ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത വർണ്ണ സ്കീമുകളോ ഐക്കൺ സെറ്റുകളോ ഉപയോഗിക്കുന്നത്.

സിഎസ്എസ് വേരിയബിളുകളും റേഞ്ച് ക്വറികളും ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നു

ഡൈനാമിക്കും ഇഷ്ടാനുസൃതമാക്കാവുന്നതുമായ സ്റ്റൈലുകൾ സൃഷ്ടിക്കുന്നതിന് സിഎസ്എസ് വേരിയബിളുകൾക്കൊപ്പം @when നിയമം ഉപയോഗിക്കാം. ഒരു സിഎസ്എസ് വേരിയബിളിൻ്റെ മൂല്യത്തെ അടിസ്ഥാനമാക്കി നിങ്ങൾക്ക് സ്റ്റൈലുകൾ പ്രയോഗിക്കാൻ കഴിയും, ഇത് ഉപയോക്താക്കൾക്ക് കോഡ് എഴുതാതെ തന്നെ നിങ്ങളുടെ വെബ്സൈറ്റിൻ്റെ രൂപം ഇഷ്ടാനുസൃതമാക്കാൻ അനുവദിക്കുന്നു.

ഉദാഹരണം: തീം സ്വിച്ചിംഗ്

: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 ആക്കി മാറ്റുന്നു, ഇത് ഒരു ഡാർക്ക് തീം സൃഷ്ടിക്കുന്നു. ഉപയോക്താക്കൾക്ക് ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് --theme-color-ൻ്റെ മൂല്യം മാറ്റാനോ അല്ലെങ്കിൽ ഒരു യൂസർ സ്റ്റൈൽഷീറ്റിൽ മറ്റൊരു സിഎസ്എസ് വേരിയബിൾ സജ്ജീകരിക്കാനോ കഴിയും.

റേഞ്ച് ക്വറികൾ

ഒരു മൂല്യം ഒരു നിശ്ചിത പരിധിക്കുള്ളിലാണോ എന്ന് പരിശോധിക്കാൻ റേഞ്ച് ക്വറികൾ നിങ്ങളെ അനുവദിക്കുന്നു. കൂടുതൽ സങ്കീർണ്ണമായ സോപാധിക സ്റ്റൈലുകൾ സൃഷ്ടിക്കുന്നതിന് ഇത് ഉപയോഗപ്രദമാകും.

@when (400px <= width <= 800px) {
  .element {
    /* വീതി 400px-നും 800px-നും ഇടയിലായിരിക്കുമ്പോൾ പ്രയോഗിക്കുന്ന സ്റ്റൈലുകൾ */
  }
}

എന്നിരുന്നാലും, @when-നുള്ളിലെ റേഞ്ച് ക്വറികളുടെ കൃത്യമായ വാക്യഘടനയും പിന്തുണയും വ്യത്യാസപ്പെടാം. ഏറ്റവും പുതിയ സ്പെസിഫിക്കേഷനുകളും ബ്രൗസർ കോംപാറ്റിബിലിറ്റി പട്ടികകളും പരിശോധിക്കുന്നത് ഉചിതമാണ്. വലുപ്പത്തെ അടിസ്ഥാനമാക്കിയുള്ള വ്യവസ്ഥകൾക്ക് കണ്ടെയ്‌നർ ക്വറികൾ പലപ്പോഴും കൂടുതൽ ശക്തവും മികച്ച പിന്തുണയുമുള്ള ഒരു ബദൽ നൽകുന്നു.

ആഗോള പ്രവേശനക്ഷമതയും ഉപയോക്തൃ മുൻഗണനകളും

• ഹൈ കോൺട്രാസ്റ്റ് തീമുകൾ: കാഴ്ച വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് അനുയോജ്യമായ ഹൈ കോൺട്രാസ്റ്റ് തീമുകൾ നടപ്പിലാക്കാൻ സിഎസ്എസ് വേരിയബിളുകളും @when നിയമവും ഉപയോഗിക്കുക. ഉപയോക്താക്കൾക്ക് അവരുടെ നിർദ്ദിഷ്ട ആവശ്യങ്ങൾക്കനുസരിച്ച് വർണ്ണ പാലറ്റും ഫോണ്ട് വലുപ്പങ്ങളും ഇഷ്ടാനുസൃതമാക്കാൻ അനുവദിക്കുക.
• ചലനം കുറയ്ക്കൽ (Reduced Motion): ഉപയോക്താവ് അവരുടെ ഓപ്പറേറ്റിംഗ് സിസ്റ്റത്തിൽ "reduced motion" ക്രമീകരണം പ്രവർത്തനക്ഷമമാക്കിയിരിക്കുമ്പോൾ ആനിമേഷനുകളും സംക്രമണങ്ങളും പ്രവർത്തനരഹിതമാക്കാൻ സിഎസ്എസ് വേരിയബിളുകൾ ഉപയോഗിച്ച് ഉപയോക്താവിൻ്റെ മുൻഗണനയെ മാനിക്കുക. കൂടുതൽ കൃത്യമായ നിയന്ത്രണത്തിനായി prefers-reduced-motion മീഡിയ ക്വറി @when-നൊപ്പം സംയോജിപ്പിക്കാം.
• ഫോണ്ട് വലുപ്പ ക്രമീകരണങ്ങൾ: സിഎസ്എസ് വേരിയബിളുകൾ ഉപയോഗിച്ച് വെബ്സൈറ്റിൻ്റെ ഫോണ്ട് വലുപ്പം ക്രമീകരിക്കാൻ ഉപയോക്താക്കളെ അനുവദിക്കുക. എല്ലാ ഉപയോക്താക്കൾക്കും വായനാക്ഷമതയും ഉപയോഗക്ഷമതയും ഉറപ്പാക്കിക്കൊണ്ട്, വ്യത്യസ്ത ഫോണ്ട് വലുപ്പങ്ങൾക്ക് അനുയോജ്യമായ രീതിയിൽ എലമെൻ്റുകളുടെ ലേഔട്ടും സ്പേസിംഗും ക്രമീകരിക്കുന്നതിന് @when നിയമം ഉപയോഗിക്കുക.

മികച്ച രീതികളും പരിഗണനകളും

• ബ്രൗസർ കോംപാറ്റിബിലിറ്റി: @when നിയമം താരതമ്യേന പുതിയതാണ്, ബ്രൗസർ പിന്തുണ ഇതുവരെ സാർവത്രികമായിട്ടില്ല. പ്രൊഡക്ഷനിൽ ഉപയോഗിക്കുന്നതിന് മുമ്പ് എല്ലായ്പ്പോഴും ബ്രൗസർ കോംപാറ്റിബിലിറ്റി പട്ടികകൾ പരിശോധിക്കുക. പഴയ ബ്രൗസറുകൾക്കായി പോളിഫില്ലുകളോ ഫാൾബാക്ക് സൊല്യൂഷനുകളോ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. 2024-ൻ്റെ അവസാനത്തോടെ, ബ്രൗസർ പിന്തുണ പരിമിതമായി തുടരുന്നു, കൂടാതെ @container-നെയും ജാവാസ്ക്രിപ്റ്റ് ഫാൾബാക്കുകളോടുകൂടിയ സിഎസ്എസ് വേരിയബിളുകളുടെ വിവേകപൂർണ്ണമായ ഉപയോഗത്തെയും ആശ്രയിക്കുന്നത് പലപ്പോഴും കൂടുതൽ പ്രായോഗികമായ ഒരു സമീപനമാണ്.
• പ്രത്യേകത (Specificity): @when നിയമം ഉപയോഗിക്കുമ്പോൾ സിഎസ്എസ് സ്പെസിഫിസിറ്റിയെക്കുറിച്ച് ശ്രദ്ധിക്കുക. നിങ്ങളുടെ സോപാധിക സ്റ്റൈലുകൾ പരസ്പരവിരുദ്ധമായ ഏതെങ്കിലും സ്റ്റൈലുകളെ മറികടക്കാൻ പര്യാപ്തമാണെന്ന് ഉറപ്പാക്കുക.
• പരിപാലനം (Maintainability): നിങ്ങളുടെ കോഡ് കൂടുതൽ വായിക്കാനും പരിപാലിക്കാനും എളുപ്പമാക്കുന്നതിന് സിഎസ്എസ് വേരിയബിളുകളും കമൻ്റുകളും ഉപയോഗിക്കുക. മനസ്സിലാക്കാനും ഡീബഗ് ചെയ്യാനും പ്രയാസമുള്ള അമിതമായി സങ്കീർണ്ണമായ സോപാധിക നിയമങ്ങൾ സൃഷ്ടിക്കുന്നത് ഒഴിവാക്കുക.
• പ്രകടനം (Performance): പാഴ്സ് ചെയ്യേണ്ട സിഎസ്എസ്-ൻ്റെ അളവ് കുറച്ചുകൊണ്ട് @when നിയമത്തിന് പ്രകടനം മെച്ചപ്പെടുത്താൻ കഴിയുമെങ്കിലും, അത് വിവേകത്തോടെ ഉപയോഗിക്കേണ്ടത് പ്രധാനമാണ്. സോപാധിക നിയമങ്ങളുടെ അമിതമായ ഉപയോഗം പ്രകടനത്തെ പ്രതികൂലമായി ബാധിച്ചേക്കാം, പ്രത്യേകിച്ച് പഴയ ഉപകരണങ്ങളിൽ.
• പ്രോഗ്രസ്സീവ് എൻഹാൻസ്മെൻ്റ്: ബ്രൗസർ @when നിയമത്തെ പിന്തുണയ്ക്കുന്നില്ലെങ്കിൽ പോലും നിങ്ങളുടെ വെബ്സൈറ്റ് നന്നായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ പ്രോഗ്രസ്സീവ് എൻഹാൻസ്മെൻ്റ് ഉപയോഗിക്കുക. എല്ലാ ഉപയോക്താക്കൾക്കും അടിസ്ഥാനപരവും പ്രവർത്തനക്ഷമവുമായ ഒരു അനുഭവം നൽകുക, തുടർന്ന് ഈ ഫീച്ചർ പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകൾക്കായി അത് ക്രമേണ മെച്ചപ്പെടുത്തുക.

സോപാധിക സ്റ്റൈലിംഗിൻ്റെ ഭാവി

@when നിയമം സിഎസ്എസ്-ലെ ഒരു സുപ്രധാന മുന്നേറ്റത്തെ പ്രതിനിധീകരിക്കുന്നു. ഇത് കൂടുതൽ പ്രകടവും ചലനാത്മകവുമായ സ്റ്റൈലിംഗ് അനുവദിക്കുന്നു, കൂടുതൽ സങ്കീർണ്ണവും പ്രതികരണശേഷിയുള്ളതുമായ വെബ് ആപ്ലിക്കേഷനുകൾക്ക് വഴിയൊരുക്കുന്നു. ബ്രൗസർ പിന്തുണ മെച്ചപ്പെടുകയും സ്പെസിഫിക്കേഷൻ വികസിക്കുകയും ചെയ്യുമ്പോൾ, @when നിയമം വെബ് ഡെവലപ്പർമാർക്ക് ഒരു പ്രധാന ഉപകരണമായി മാറാൻ സാധ്യതയുണ്ട്.

സിഎസ്എസ് ഹൂഡിനിയിലെ കൂടുതൽ മുന്നേറ്റങ്ങളും കസ്റ്റം സ്റ്റേറ്റുകളുടെ നിലവാരപ്പെടുത്തലും @when-ൻ്റെ കഴിവുകൾ കൂടുതൽ മെച്ചപ്പെടുത്തും, ഇത് സ്റ്റൈലിംഗിൽ കൂടുതൽ സൂക്ഷ്മമായ നിയന്ത്രണത്തിനും ജാവാസ്ക്രിപ്റ്റുമായി കൂടുതൽ തടസ്സമില്ലാത്ത സംയോജനത്തിനും അനുവദിക്കും.

ഉപസംഹാരം

കണ്ടെയ്‌നർ ക്വറികൾ, കസ്റ്റം സ്റ്റേറ്റുകൾ, സിഎസ്എസ് വേരിയബിളുകൾ, മറ്റ് മാനദണ്ഡങ്ങൾ എന്നിവയെ അടിസ്ഥാനമാക്കി സ്റ്റൈലുകൾ സോപാധികമായി പ്രയോഗിക്കാൻ സിഎസ്എസ് @when നിയമം ശക്തവും വഴക്കമുള്ളതുമായ ഒരു മാർഗം നൽകുന്നു. ബ്രൗസർ പിന്തുണ ഇപ്പോഴും വികസിച്ചുകൊണ്ടിരിക്കുകയാണെങ്കിലും, വ്യത്യസ്ത സാഹചര്യങ്ങൾക്കും ഉപയോക്തൃ മുൻഗണനകൾക്കും അനുയോജ്യമായ ഡൈനാമിക്, റെസ്‌പോൺസീവ് വെബ് ഡിസൈനുകൾ നിർമ്മിക്കുന്നതിനുള്ള നിങ്ങളുടെ ആയുധപ്പുരയിൽ ഉണ്ടായിരിക്കേണ്ട ഒരു വിലയേറിയ ഉപകരണമാണിത്. @when നിയമത്തിൻ്റെ അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കുകയും മികച്ച രീതികൾ പിന്തുടരുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് അതിൻ്റെ മുഴുവൻ കഴിവുകളും പ്രയോജനപ്പെടുത്താനും അസാധാരണമായ ഉപയോക്തൃ അനുഭവങ്ങൾ സൃഷ്ടിക്കാനും കഴിയും. കോംപാറ്റിബിലിറ്റിയും മികച്ച പ്രകടനവും ഉറപ്പാക്കാൻ എല്ലായ്പ്പോഴും വ്യത്യസ്ത ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും സമഗ്രമായി പരീക്ഷിക്കാൻ ഓർമ്മിക്കുക.

വെബ് വികസിച്ചുകൊണ്ടിരിക്കുമ്പോൾ, @when പോലുള്ള പുതിയ സിഎസ്എസ് ഫീച്ചറുകൾ സ്വീകരിക്കുന്നത് കാലത്തിനനുസരിച്ച് മുന്നേറുന്നതിനും ആഗോള പ്രേക്ഷകർക്ക് അത്യാധുനിക വെബ് അനുഭവങ്ങൾ നൽകുന്നതിനും നിർണായകമാണ്.