M

MLOG

മലയാളം

സിഎസ്എസ് @when നിയമത്തെക്കുറിച്ച് അറിയുക. ബ്രൗസർ സപ്പോർട്ട്, വ്യൂപോർട്ട് വലുപ്പം തുടങ്ങിയവ അടിസ്ഥാനമാക്കി സോപാധികമായി സ്റ്റൈൽ പ്രയോഗിക്കാൻ സഹായിക്കുന്ന ഈ ഫീച്ചർ പ്രായോഗിക ഉദാഹരണങ്ങളിലൂടെ പഠിക്കാം.

സിഎസ്എസ് @when നിയമം: സോപാധികമായ സ്റ്റൈൽ പ്രയോഗത്തിൽ വൈദഗ്ദ്ധ്യം നേടാം

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

എന്താണ് സിഎസ്എസ് @when നിയമം?

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

@when ഉപയോഗിക്കുന്നതിൻ്റെ പ്രധാന ഗുണങ്ങൾ

@when നിയമത്തിൻ്റെ വാക്യഘടന

@when നിയമത്തിൻ്റെ അടിസ്ഥാന വാക്യഘടന താഴെ പറയുന്നവയാണ്:

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

<condition> എന്നത് ശരിയോ തെറ്റോ എന്ന് വിലയിരുത്തുന്ന സാധുവായ ഏതെങ്കിലും ബൂളിയൻ എക്സ്പ്രഷൻ ആകാം. ഈ എക്സ്പ്രഷനിൽ പലപ്പോഴും ഇവ ഉൾപ്പെടുന്നു:

@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;
  }
}

ഈ ഉദാഹരണത്തിൽ, സ്ക്രീൻ വീതി 768px-നും 1023px-നും ഇടയിലായിരിക്കുമ്പോൾ (സാധാരണ ടാബ്‌ലെറ്റ് വലുപ്പം) മാത്രമേ @when ബ്ലോക്കിനുള്ളിലെ സ്റ്റൈലുകൾ പ്രയോഗിക്കപ്പെടുകയുള്ളൂ. നിർദ്ദിഷ്ട വ്യൂപോർട്ട് പരിധികൾക്കായി സ്റ്റൈലുകൾ നിർവചിക്കുന്നതിനുള്ള വ്യക്തവും സംക്ഷിപ്തവുമായ ഒരു മാർഗ്ഗം ഇത് നൽകുന്നു.

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

2. @when, @supports എന്നിവ ഉപയോഗിച്ചുള്ള ഫീച്ചർ കണ്ടെത്തൽ

ഒരു പ്രത്യേക സിഎസ്എസ് ഫീച്ചർ ബ്രൗസർ പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിൽ മാത്രം സ്റ്റൈലുകൾ പ്രയോഗിക്കുന്നതിനായി @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 {
    /* ഗ്രിഡ് പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകൾക്കുള്ള ഫാൾബാക്ക് സ്റ്റൈലുകൾ */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* പഴയ ബ്രൗസറുകൾക്കായി വീതി ക്രമീകരിക്കുക */
  }
}

ഇവിടെ, ബ്രൗസർ സിഎസ്എസ് ഗ്രിഡ് ലേഔട്ട് പിന്തുണയ്ക്കുന്നുണ്ടോയെന്ന് പരിശോധിക്കാൻ നമ്മൾ @supports ഉപയോഗിക്കുന്നു. പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിൽ, നമ്മൾ .container-ൽ ഗ്രിഡ് അടിസ്ഥാനമാക്കിയുള്ള സ്റ്റൈലുകൾ പ്രയോഗിക്കുന്നു. ഇല്ലെങ്കിൽ, പഴയ ബ്രൗസറുകളിൽ സമാനമായ ലേഔട്ട് ഉറപ്പാക്കാൻ നമ്മൾ ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ച് ഫാൾബാക്ക് സ്റ്റൈലുകൾ നൽകുന്നു.

ഗ്ലോബൽ അക്സസ്സിബിലിറ്റി കുറിപ്പ്: പ്രവേശനക്ഷമതയ്ക്ക് (accessibility) ഫീച്ചർ കണ്ടെത്തൽ പ്രധാനമാണ്. പഴയ ബ്രൗസറുകൾക്ക് പുതിയ 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);
  }
}

ഈ ഉദാഹരണത്തിൽ, സ്ക്രീൻ വീതി കുറഞ്ഞത് 768px ആയിരിക്കുകയും അതോടൊപ്പം ബ്രൗസർ backdrop-filter പ്രോപ്പർട്ടി പിന്തുണയ്ക്കുകയും ചെയ്യുമ്പോൾ മാത്രമേ .modal ഘടകത്തിന് മങ്ങിയ ബാക്ക്ഡ്രോപ്പ് ഉണ്ടാകൂ. പഴയ ബ്രൗസറുകളിലെ പ്രകടന പ്രശ്‌നങ്ങളോ റെൻഡറിംഗ് തകരാറുകളോ ഒഴിവാക്കി, ആധുനിക ബ്രൗസറുകളിൽ ദൃശ്യപരമായി ആകർഷകമായ ഇഫക്റ്റുകൾ സൃഷ്ടിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

4. കസ്റ്റം പ്രോപ്പർട്ടികളെ (സിഎസ്എസ് വേരിയബിളുകൾ) അടിസ്ഥാനമാക്കിയുള്ള സ്റ്റൈലിംഗ്

ഡൈനാമിക്, സ്റ്റേറ്റ്-ഡ്രിവൺ സ്റ്റൈലിംഗ് സൃഷ്ടിക്കുന്നതിന് സിഎസ്എസ് കസ്റ്റം പ്രോപ്പർട്ടികളോടൊപ്പം (സിഎസ്എസ് വേരിയബിളുകൾ എന്നും അറിയപ്പെടുന്നു) @when ഉപയോഗിക്കാവുന്നതാണ്. ഒരു കസ്റ്റം പ്രോപ്പർട്ടിയുടെ മൂല്യം അപ്‌ഡേറ്റ് ചെയ്യാൻ നിങ്ങൾക്ക് ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കാം, തുടർന്ന് ആ മൂല്യത്തെ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത സ്റ്റൈലുകൾ പ്രയോഗിക്കാൻ @when ഉപയോഗിക്കാം.

ആദ്യം, ഒരു കസ്റ്റം പ്രോപ്പർട്ടി നിർവചിക്കുക:

:root {
  --theme-color: #007bff; /* ഡിഫോൾട്ട് തീം നിറം */
  --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);
});

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

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

എന്നിരുന്നാലും, ഇത് ശരിയായി പ്രവർത്തിക്കുന്നതിന് കസ്റ്റം പ്രോപ്പർട്ടിക്ക് ഒരു സംഖ്യാ മൂല്യമുണ്ടെന്ന് ഉറപ്പാക്കുക.

അക്സസ്സിബിലിറ്റി കുറിപ്പ്: ബദൽ തീമുകൾ (ഉദാ. ഡാർക്ക് മോഡ്) നൽകുന്നത് അക്സസ്സിബിലിറ്റിക്ക് നിർണായകമാണ്. കാഴ്ച വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് ഉയർന്ന കോൺട്രാസ്റ്റ് തീമുകൾ പ്രയോജനപ്പെട്ടേക്കാം. നിങ്ങളുടെ തീം സ്വിച്ച് കീബോർഡ്, സ്ക്രീൻ റീഡറുകൾ വഴി ആക്സസ് ചെയ്യാൻ കഴിയുമെന്ന് ഉറപ്പാക്കുക.

5. ഡാറ്റാ ആട്രിബ്യൂട്ടുകളെ അടിസ്ഥാനമാക്കിയുള്ള സ്റ്റൈലിംഗ്

ഡാറ്റാ ആട്രിബ്യൂട്ടുകളോടൊപ്പം @when ഉപയോഗിച്ച് അവയുടെ ഡാറ്റാ മൂല്യങ്ങളെ അടിസ്ഥാനമാക്കി ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്യാനും നിങ്ങൾക്ക് കഴിയും. ഉപയോക്താവിൻ്റെ ഇടപെടലിനെയോ ഡാറ്റാ അപ്‌ഡേറ്റുകളെയോ അടിസ്ഥാനമാക്കി ഘടകങ്ങളുടെ രൂപം മാറുന്ന ഡൈനാമിക് ഇൻ്റർഫേസുകൾ നിർമ്മിക്കുന്നതിന് ഇത് ഉപയോഗപ്രദമാകും.

ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ടാസ്ക്കുകളുടെ ഒരു ലിസ്റ്റ് ഉണ്ടെന്ന് കരുതുക, ഓരോ ടാസ്ക്കിനും അതിൻ്റെ നില (ഉദാ. "todo", "in-progress", "completed") സൂചിപ്പിക്കുന്ന ഒരു data-status ആട്രിബ്യൂട്ട് ഉണ്ട്. ഓരോ ടാസ്ക്കിൻ്റെയും നിലയെ അടിസ്ഥാനമാക്കി വ്യത്യസ്തമായി സ്റ്റൈൽ ചെയ്യാൻ നിങ്ങൾക്ക് @when ഉപയോഗിക്കാം.

[data-status="todo"] {
  /* ചെയ്യാനുള്ള ടാസ്ക്കുകൾക്കുള്ള ഡിഫോൾട്ട് സ്റ്റൈലുകൾ */
  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 പോലുള്ള ഫീച്ചറുകളിൽ വൈദഗ്ദ്ധ്യം നേടുന്നത് അത്യാവശ്യമായിരിക്കും. സോപാധികമായ സ്റ്റൈലിംഗിൻ്റെ ശക്തി സ്വീകരിക്കുകയും നിങ്ങളുടെ സിഎസ്എസ് ഡെവലപ്‌മെൻ്റിൽ പുതിയ സാധ്യതകൾ തുറക്കുകയും ചെയ്യുക.