CSS :has() സെലക്ടറിൽ വൈദഗ്ദ്ധ്യം നേടാം: പാരന്റ് സെലക്ഷൻ ശക്തിയുടെ അനാവരണം

വർഷങ്ങളായി, സിഎസ്എസ് ഡെവലപ്പർമാർ അവരുടെ ചിൽഡ്രൻ എലമെന്റുകളെ അടിസ്ഥാനമാക്കി പാരന്റ് എലമെന്റുകളെ തിരഞ്ഞെടുക്കുന്നതിനുള്ള ലളിതവും ഫലപ്രദവുമായ ഒരു മാർഗ്ഗത്തിനായി ആഗ്രഹിക്കുന്നു. ആ കാത്തിരിപ്പ് അവസാനിച്ചു! :has() സ്യൂഡോ-ക്ലാസ് ഒടുവിൽ ഇവിടെയെത്തി, ഇത് നമ്മൾ സിഎസ്എസ് എഴുതുന്ന രീതിയിൽ വിപ്ലവം സൃഷ്ടിക്കുകയാണ്. ഈ ശക്തമായ സെലക്ടർ ഒരു പാരന്റ് എലമെന്റിൽ ഒരു പ്രത്യേക ചൈൽഡ് എലമെന്റ് ഉണ്ടെങ്കിൽ അതിനെ ലക്ഷ്യമിടാൻ നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് ഡൈനാമിക്, റെസ്‌പോൺസീവ് സ്റ്റൈലിംഗിനായി നിരവധി സാധ്യതകൾ തുറക്കുന്നു.

എന്താണ് :has() സെലക്ടർ?

:has() സ്യൂഡോ-ക്ലാസ് ഒരു സിഎസ്എസ് റിലേഷണൽ സ്യൂഡോ-ക്ലാസാണ്, അത് ഒരു സെലക്ടർ ലിസ്റ്റ് ആർഗ്യുമെന്റായി സ്വീകരിക്കുന്നു. ഒരു എലമെന്റിന്റെ ഡിസെൻഡന്റ്സിനിടയിൽ (പിൻഗാമികൾ) സെലക്ടർ ലിസ്റ്റിലെ ഏതെങ്കിലും ഒരു സെലക്ടർ ഒരെണ്ണത്തിനെങ്കിലും പൊരുത്തപ്പെടുന്നുണ്ടെങ്കിൽ അത് ആ എലമെന്റിനെ തിരഞ്ഞെടുക്കുന്നു. ലളിതമായി പറഞ്ഞാൽ, ഒരു പാരന്റ് എലമെന്റിന് ഒരു പ്രത്യേക ചൈൽഡ് ഉണ്ടോ എന്ന് ഇത് പരിശോധിക്കുന്നു, ഉണ്ടെങ്കിൽ, ആ പാരന്റ് തിരഞ്ഞെടുക്കപ്പെടുന്നു.

അടിസ്ഥാന വാക്യഘടന ഇതാണ്:

parent:has(child) { /* സിഎസ്എസ് നിയമങ്ങൾ */ }

ഇത് parent എലമെന്റിനെ തിരഞ്ഞെടുക്കുന്നത് അതിൽ കുറഞ്ഞത് ഒരു child എലമെന്റെങ്കിലും ഉണ്ടെങ്കിൽ മാത്രമാണ്.

എന്തുകൊണ്ടാണ് :has() ഇത്ര പ്രാധാന്യമർഹിക്കുന്നത്?

പരമ്പരാഗതമായി, സിഎസ്എസിന് അതിന്റെ ചിൽഡ്രൻ എലമെന്റുകളെ അടിസ്ഥാനമാക്കി പാരന്റ് എലമെന്റുകളെ തിരഞ്ഞെടുക്കുന്നതിൽ പരിമിതികളുണ്ടായിരുന്നു. ഈ പരിമിതി ഡൈനാമിക് സ്റ്റൈലിംഗ് കൈവരിക്കുന്നതിന് പലപ്പോഴും സങ്കീർണ്ണമായ ജാവാസ്ക്രിപ്റ്റ് സൊല്യൂഷനുകളോ മറ്റ് വഴികളോ ആവശ്യമാക്കിയിരുന്നു. :has() സെലക്ടർ ഈ ബുദ്ധിമുട്ടേറിയ രീതികളുടെ ആവശ്യകത ഇല്ലാതാക്കുന്നു, ഇത് കൂടുതൽ വൃത്തിയുള്ളതും, പരിപാലിക്കാൻ എളുപ്പമുള്ളതും, മികച്ച പ്രകടനം കാഴ്ചവെക്കുന്നതുമായ സിഎസ്എസ് കോഡിന് വഴിയൊരുക്കുന്നു.

എന്തുകൊണ്ടാണ് :has() ഒരു ഗെയിം ചേഞ്ചർ ആകുന്നത് എന്നതിവിടെ:

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

:has() സെലക്ടറിന്റെ അടിസ്ഥാന ഉദാഹരണങ്ങൾ

:has() സെലക്ടറിന്റെ ശക്തി വ്യക്തമാക്കുന്നതിന് നമുക്ക് ചില ലളിതമായ ഉദാഹരണങ്ങളിൽ നിന്ന് ആരംഭിക്കാം.

ഉദാഹരണം 1: ഒരു ഇമേജിന്റെ സാന്നിധ്യത്തെ അടിസ്ഥാനമാക്കി ഒരു പാരന്റ് Div-നെ സ്റ്റൈൽ ചെയ്യുക

ഒരു <div> എലമെന്റിൽ ഒരു <img> എലമെന്റ് അടങ്ങിയിട്ടുണ്ടെങ്കിൽ മാത്രം അതിന് ഒരു ബോർഡർ ചേർക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് കരുതുക:

div:has(img) {
  border: 2px solid blue;
}

ഈ സിഎസ്എസ് നിയമം കുറഞ്ഞത് ഒരു <img> എലമെന്റെങ്കിലും അടങ്ങിയിരിക്കുന്ന ഏതൊരു <div>-നും ഒരു നീല ബോർഡർ നൽകും.

ഉദാഹരണം 2: ഒരു Span-ന്റെ സാന്നിധ്യത്തെ അടിസ്ഥാനമാക്കി ഒരു ലിസ്റ്റ് ഐറ്റത്തെ സ്റ്റൈൽ ചെയ്യുക

നിങ്ങളുടെ പക്കൽ ഒരു ലിസ്റ്റ് ഉണ്ടെന്ന് കരുതുക, അതിൽ ഒരു പ്രത്യേക ക്ലാസുള്ള <span> എലമെന്റ് അടങ്ങിയിട്ടുണ്ടെങ്കിൽ ആ ലിസ്റ്റ് ഐറ്റം ഹൈലൈറ്റ് ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു:

li:has(span.highlight) {
  background-color: yellow;
}

ഈ സിഎസ്എസ് നിയമം "highlight" എന്ന ക്ലാസുള്ള ഒരു <span> അടങ്ങിയിരിക്കുന്ന ഏതൊരു <li>-യുടെയും പശ്ചാത്തല നിറം മഞ്ഞയാക്കി മാറ്റും.

ഉദാഹരണം 3: ഇൻപുട്ട് വാലിഡിറ്റിയെ അടിസ്ഥാനമാക്കി ഒരു ഫോം ലേബൽ സ്റ്റൈൽ ചെയ്യുക

ഒരു ഫോം ലേബലുമായി ബന്ധപ്പെട്ട ഇൻപുട്ട് ഫീൽഡ് സാധുവാണോ (valid) അസാധുവാണോ (invalid) എന്നതിനെ അടിസ്ഥാനമാക്കി ആ ലേബൽ സ്റ്റൈൽ ചെയ്യാൻ നിങ്ങൾക്ക് :has() ഉപയോഗിക്കാം (:invalid സ്യൂഡോ-ക്ലാസുമായി ചേർത്ത്):

label:has(+ input:invalid) {
  color: red;
  font-weight: bold;
}

ഇതിന് തൊട്ടുപിന്നാലെയുള്ള ഇൻപുട്ട് ഫീൽഡ് അസാധുവാണെങ്കിൽ ഇത് ലേബലിനെ ചുവപ്പും കട്ടിയുള്ളതുമാക്കും.

:has() സെലക്ടറിന്റെ വിപുലമായ ഉപയോഗങ്ങൾ

മറ്റ് സിഎസ്എസ് സെലക്ടറുകളും സ്യൂഡോ-ക്ലാസുകളും കൂടിച്ചേരുമ്പോൾ :has() സെലക്ടർ കൂടുതൽ ശക്തമാകും. ചില വിപുലമായ ഉപയോഗങ്ങൾ താഴെ നൽകുന്നു:

ഉദാഹരണം 4: ശൂന്യമായ എലമെന്റുകളെ ലക്ഷ്യമിടുന്നു

ഒരു പ്രത്യേക ചൈൽഡ് ഇല്ലാത്ത എലമെന്റുകളെ ലക്ഷ്യമിടാൻ നിങ്ങൾക്ക് :not() സ്യൂഡോ-ക്ലാസ് :has()-നൊപ്പം ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ചിത്രങ്ങൾ അടങ്ങിയിട്ടില്ലാത്ത div-കളെ സ്റ്റൈൽ ചെയ്യാൻ:

div:not(:has(img)) {
  background-color: #f0f0f0;
}

ഇത് ഒരു <img> എലമെന്റ് അടങ്ങിയിട്ടില്ലാത്ത ഏതൊരു <div>-നും ഒരു ഇളം ചാരനിറത്തിലുള്ള പശ്ചാത്തലം നൽകും.

ഉദാഹരണം 5: സങ്കീർണ്ണമായ ലേഔട്ടുകൾ നിർമ്മിക്കുന്നു

ഒരു കണ്ടെയ്‌നറിന്റെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി ഡൈനാമിക് ലേഔട്ടുകൾ നിർമ്മിക്കാൻ :has() സെലക്ടർ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒരു ഗ്രിഡ് സെല്ലിനുള്ളിൽ ഒരു പ്രത്യേക തരം എലമെന്റിന്റെ സാന്നിധ്യത്തെ അടിസ്ഥാനമാക്കി നിങ്ങൾക്ക് ഒരു ഗ്രിഡിന്റെ ലേഔട്ട് മാറ്റാൻ കഴിയും.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item:has(img) {
  grid-column: span 2;
}

ഇത് ഒരു ഗ്രിഡ് ഐറ്റത്തിൽ ഒരു ചിത്രം അടങ്ങിയിട്ടുണ്ടെങ്കിൽ അതിനെ രണ്ട് കോളങ്ങളിലായി വ്യാപിക്കാൻ സഹായിക്കും.

ഉദാഹരണം 6: ഡൈനാമിക് ഫോം സ്റ്റൈലിംഗ്

ഫോം എലമെന്റുകളുടെ അവസ്ഥയെ അടിസ്ഥാനമാക്കി (ഉദാഹരണത്തിന്, അവ ഫോക്കസ് ചെയ്തതാണോ, പൂരിപ്പിച്ചതാണോ, അല്ലെങ്കിൽ സാധുവായതാണോ) അവയെ ഡൈനാമിക്കായി സ്റ്റൈൽ ചെയ്യാൻ നിങ്ങൾക്ക് :has() ഉപയോഗിക്കാം.

.form-group:has(input:focus) {
  box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

.form-group:has(input:valid) {
  border-color: green;
}

.form-group:has(input:invalid) {
  border-color: red;
}

ഇൻപുട്ട് ഫോക്കസ് ചെയ്യുമ്പോൾ ഇത് ഒരു നീല ബോക്സ് ഷാഡോ ചേർക്കും, ഇൻപുട്ട് സാധുവാണെങ്കിൽ ഒരു പച്ച ബോർഡറും, ഇൻപുട്ട് അസാധുവാണെങ്കിൽ ഒരു ചുവപ്പ് ബോർഡറും ചേർക്കും.

ഉദാഹരണം 7: ചിൽഡ്രന്റെ എണ്ണത്തെ അടിസ്ഥാനമാക്കി സ്റ്റൈൽ ചെയ്യുക

:has() നേരിട്ട് ചിൽഡ്രന്റെ എണ്ണം കണക്കാക്കുന്നില്ലെങ്കിലും, സമാന ഫലങ്ങൾ നേടുന്നതിന് നിങ്ങൾക്ക് ഇത് മറ്റ് സെലക്ടറുകളുമായും സിഎസ്എസ് പ്രോപ്പർട്ടികളുമായും സംയോജിപ്പിക്കാം. ഉദാഹരണത്തിന്, ഒരു പാരന്റിന് ഒരു പ്രത്യേക തരം ചൈൽഡ് മാത്രമേ ഉള്ളൂവെങ്കിൽ അതിനെ സ്റ്റൈൽ ചെയ്യാൻ നിങ്ങൾക്ക് :only-child ഉപയോഗിക്കാം.

div:has(> p:only-child) {
  background-color: lightgreen;
}

ഇത് ഒരു <div>-ൽ ഒരൊറ്റ <p> എലമെന്റ് അതിന്റെ നേരിട്ടുള്ള ചൈൽഡ് ആയി ഉണ്ടെങ്കിൽ മാത്രം അതിന് ഇളം പച്ച പശ്ചാത്തലം നൽകും.

ക്രോസ്-ബ്രൗസർ അനുയോജ്യതയും ഫോൾബാക്കുകളും

2023-ന്റെ അവസാനത്തോടെ, Chrome, Firefox, Safari, Edge എന്നിവയുൾപ്പെടെയുള്ള ആധുനിക ബ്രൗസറുകളിൽ :has() സെലക്ടറിന് മികച്ച പിന്തുണയുണ്ട്. എന്നിരുന്നാലും, പ്രൊഡക്ഷനിൽ വിന്യസിക്കുന്നതിന് മുമ്പ്, പ്രത്യേകിച്ച് പഴയ ബ്രൗസറുകളെ പിന്തുണയ്‌ക്കേണ്ടതുണ്ടെങ്കിൽ, Can I use എന്ന വെബ്സൈറ്റിൽ അനുയോജ്യത പരിശോധിക്കേണ്ടത് അത്യാവശ്യമാണ്.

അനുയോജ്യതയെക്കുറിച്ചുള്ള ഒരു സംഗ്രഹം ഇതാ:

ആധുനിക ബ്രൗസറുകൾ: Chrome, Firefox, Safari, Edge എന്നിവയുടെ ഏറ്റവും പുതിയ പതിപ്പുകളിൽ മികച്ച പിന്തുണ.
പഴയ ബ്രൗസറുകൾ: പഴയ ബ്രൗസറുകളിൽ (ഉദാ. ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ) പിന്തുണയില്ല.

ഫോൾബാക്കുകൾ നൽകുന്നു

നിങ്ങൾക്ക് പഴയ ബ്രൗസറുകളെ പിന്തുണയ്‌ക്കണമെങ്കിൽ, ഫോൾബാക്കുകൾ നൽകേണ്ടതുണ്ട്. അതിനുള്ള ചില തന്ത്രങ്ങൾ ഇതാ:

ജാവാസ്ക്രിപ്റ്റ്: :has()-നുള്ള ബ്രൗസറിന്റെ പിന്തുണ കണ്ടെത്താനും ആവശ്യമെങ്കിൽ ബദൽ സ്റ്റൈലിംഗ് പ്രയോഗിക്കാനും ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുക.
ഫീച്ചർ ക്വറികൾ: ബ്രൗസർ പിന്തുണയെ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത സ്റ്റൈലുകൾ നൽകാൻ സിഎസ്എസ് ഫീച്ചർ ക്വറികൾ (@supports) ഉപയോഗിക്കുക.
പ്രോഗ്രസീവ് എൻഹാൻസ്‌മെന്റ്: എല്ലാ ബ്രൗസറുകളിലും പ്രവർത്തിക്കുന്ന ഒരു അടിസ്ഥാന, പ്രവർത്തനക്ഷമമായ ഡിസൈനിൽ നിന്ന് ആരംഭിച്ച്, :has() പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകൾക്കായി ഡിസൈൻ ക്രമേണ മെച്ചപ്പെടുത്തുക.

ഒരു ഫീച്ചർ ക്വറി ഉപയോഗിക്കുന്നതിന്റെ ഒരു ഉദാഹരണം ഇതാ:

.parent {
  /* എല്ലാ ബ്രൗസറുകൾക്കും വേണ്ടിയുള്ള അടിസ്ഥാന സ്റ്റൈലിംഗ് */
  border: 1px solid black;
}

@supports selector(:has(img)) {
  .parent:has(img) {
    /* :has() പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകൾക്കായുള്ള മെച്ചപ്പെടുത്തിയ സ്റ്റൈലിംഗ് */
    border: 3px solid blue;
  }
}

ഈ കോഡ് എല്ലാ ബ്രൗസറുകളിലും .parent എലമെന്റിന് ഒരു കറുത്ത ബോർഡർ നൽകും. :has() പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകളിൽ, .parent എലമെന്റിൽ ഒരു ചിത്രം അടങ്ങിയിട്ടുണ്ടെങ്കിൽ അത് ഒരു നീല ബോർഡർ നൽകും.

പ്രകടനത്തെക്കുറിച്ചുള്ള പരിഗണനകൾ

:has() കാര്യമായ നേട്ടങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നുണ്ടെങ്കിലും, പ്രകടനത്തിൽ അതിന്റെ സ്വാധീനം പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണ്, പ്രത്യേകിച്ചും ഇത് വ്യാപകമായി അല്ലെങ്കിൽ സങ്കീർണ്ണമായ സെലക്ടറുകളുമായി ഉപയോഗിക്കുമ്പോൾ. പേജിലെ ഓരോ എലമെന്റിനും വേണ്ടി ബ്രൗസറുകൾ സെലക്ടർ വിലയിരുത്തേണ്ടതുണ്ട്, ഇത് കമ്പ്യൂട്ടേഷണലി ചെലവേറിയതാകാം.

:has()-ന്റെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ചില നുറുങ്ങുകൾ ഇതാ:

സെലക്ടറുകൾ ലളിതമായി സൂക്ഷിക്കുക: :has() സ്യൂഡോ-ക്ലാസിനുള്ളിൽ അമിതമായി സങ്കീർണ്ണമായ സെലക്ടറുകൾ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക.
പരിധി പരിമിതപ്പെടുത്തുക: ആഗോളമായി പ്രയോഗിക്കുന്നതിനുപകരം നിർദ്ദിഷ്ട എലമെന്റുകളിലേക്കോ കണ്ടെയ്‌നറുകളിലേക്കോ :has() പ്രയോഗിക്കുക.
പ്രകടനം പരിശോധിക്കുക: നിങ്ങളുടെ സിഎസ്എസ് നിയമങ്ങളുടെ പ്രകടനം നിരീക്ഷിക്കുന്നതിനും തടസ്സങ്ങൾ തിരിച്ചറിയുന്നതിനും ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിക്കുക.

ഒഴിവാക്കേണ്ട സാധാരണ തെറ്റുകൾ

:has() സെലക്ടറുമായി പ്രവർത്തിക്കുമ്പോൾ, അപ്രതീക്ഷിതമായ ഫലങ്ങളിലേക്ക് നയിക്കുന്ന തെറ്റുകൾ വരുത്താൻ എളുപ്പമാണ്. ഒഴിവാക്കേണ്ട ചില സാധാരണ അപകടങ്ങൾ ഇതാ:

സ്പെസിഫിസിറ്റി പ്രശ്നങ്ങൾ: മറ്റ് സിഎസ്എസ് നിയമങ്ങളെ മറികടക്കാൻ നിങ്ങളുടെ :has() നിയമങ്ങൾക്ക് മതിയായ സ്പെസിഫിസിറ്റി ഉണ്ടെന്ന് ഉറപ്പാക്കുക. എല്ലായ്പ്പോഴും ചെയ്യുന്നതുപോലെ സ്പെസിഫിസിറ്റി ട്രബിൾഷൂട്ടിംഗ് ഘട്ടങ്ങൾ ഉപയോഗിക്കുക.
തെറ്റായ നെസ്റ്റിംഗ്: :has() സെലക്ടർ ശരിയായ പാരന്റ് എലമെന്റിനെയാണ് ലക്ഷ്യമിടുന്നതെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ എലമെന്റുകളുടെ നെസ്റ്റിംഗ് രണ്ടുതവണ പരിശോധിക്കുക.
അമിതമായി സങ്കീർണ്ണമായ സെലക്ടറുകൾ: :has() സ്യൂഡോ-ക്ലാസിനുള്ളിൽ അമിതമായി സങ്കീർണ്ണമായ സെലക്ടറുകൾ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക, കാരണം ഇത് പ്രകടനത്തെ ബാധിക്കും.
അടുത്തുള്ള ചിൽഡ്രൻ ആണെന്ന് അനുമാനിക്കൽ: :has() നേരിട്ടുള്ള ചിൽഡ്രനെ മാത്രമല്ല, ഏതൊരു ഡിസെൻഡന്റിനെയും പരിശോധിക്കുന്നുവെന്ന് ഓർക്കുക. നിങ്ങൾക്ക് നേരിട്ടുള്ള ചിൽഡ്രനെ മാത്രം ലക്ഷ്യമിടണമെങ്കിൽ ഡയറക്ട് ചൈൽഡ് കോമ്പിനേറ്റർ (>) ഉപയോഗിക്കുക (ഉദാ., div:has(> img)).

:has() ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

:has() സെലക്ടറിന്റെ പ്രയോജനങ്ങൾ പരമാവധിയാക്കുന്നതിനും സാധ്യമായ പ്രശ്നങ്ങൾ ഒഴിവാക്കുന്നതിനും, ഈ മികച്ച രീതികൾ പിന്തുടരുക:

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

യഥാർത്ഥ ലോക ഉദാഹരണങ്ങളും ഉപയോഗങ്ങളും

സാധാരണ ഡിസൈൻ വെല്ലുവിളികൾ പരിഹരിക്കാൻ :has() സെലക്ടർ എങ്ങനെ ഉപയോഗിക്കാമെന്നതിന്റെ ചില യഥാർത്ഥ ലോക ഉദാഹരണങ്ങൾ നമുക്ക് പരിശോധിക്കാം.

ഉദാഹരണം 8: റെസ്‌പോൺസീവ് നാവിഗേഷൻ മെനുകൾ നിർമ്മിക്കുന്നു

നിർദ്ദിഷ്ട മെനു ഐറ്റങ്ങളുടെ സാന്നിധ്യത്തെ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുന്ന റെസ്‌പോൺസീവ് നാവിഗേഷൻ മെനുകൾ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് :has() ഉപയോഗിക്കാം.

ഉപയോക്താവ് ലോഗിൻ ചെയ്തിട്ടുണ്ടോ ഇല്ലയോ എന്നതിനെ ആശ്രയിച്ച് ഒരു വ്യത്യസ്ത നാവിഗേഷൻ മെനു പ്രദർശിപ്പിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്ന ഒരു സാഹചര്യം സങ്കൽപ്പിക്കുക. അവർ ലോഗിൻ ചെയ്തിട്ടുണ്ടെങ്കിൽ നിങ്ങൾക്ക് പ്രൊഫൈലും ലോഗ്ഔട്ട് പ്രവർത്തനങ്ങളും കാണിക്കാം, ഇല്ലെങ്കിൽ ലോഗിൻ/രജിസ്റ്റർ കാണിക്കാം.

nav:has(.user-profile) {
  /* ലോഗിൻ ചെയ്ത ഉപയോക്താക്കൾക്കുള്ള സ്റ്റൈലുകൾ */
}

nav:not(:has(.user-profile)) {
  /* ലോഗ്ഔട്ട് ചെയ്ത ഉപയോക്താക്കൾക്കുള്ള സ്റ്റൈലുകൾ */
}

ഉദാഹരണം 9: കാർഡ് ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്യുന്നു

കാർഡ് ഘടകങ്ങളെ അവയുടെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി സ്റ്റൈൽ ചെയ്യാൻ :has() സെലക്ടർ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒരു കാർഡിൽ ഒരു ചിത്രം അടങ്ങിയിട്ടുണ്ടെങ്കിൽ മാത്രം നിങ്ങൾക്ക് അതിന് ഒരു ഷാഡോ ചേർക്കാം.

.card:has(img) {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

ഉദാഹരണം 10: ഡൈനാമിക് തീമുകൾ നടപ്പിലാക്കുന്നു

ഉപയോക്തൃ മുൻഗണനകളെയോ സിസ്റ്റം ക്രമീകരണങ്ങളെയോ അടിസ്ഥാനമാക്കി ഡൈനാമിക് തീമുകൾ നടപ്പിലാക്കാൻ നിങ്ങൾക്ക് :has() ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഉപയോക്താവ് ഡാർക്ക് മോഡ് പ്രവർത്തനക്ഷമമാക്കിയിട്ടുണ്ടോ എന്നതിനെ അടിസ്ഥാനമാക്കി നിങ്ങൾക്ക് പേജിന്റെ പശ്ചാത്തല നിറം മാറ്റാൻ കഴിയും.

body:has(.dark-mode) {
  background-color: #333;
  color: #fff;
}

ഈ ഉദാഹരണങ്ങൾ :has() സെലക്ടറിന്റെ വൈവിധ്യവും വിപുലമായ ഡിസൈൻ വെല്ലുവിളികൾ പരിഹരിക്കാനുള്ള അതിന്റെ കഴിവും വ്യക്തമാക്കുന്നു.

സിഎസ്എസിന്റെ ഭാവി: അടുത്തത് എന്ത്?

:has() സെലക്ടറിന്റെ ആവിർഭാവം സിഎസ്എസിന്റെ പരിണാമത്തിലെ ഒരു സുപ്രധാന ചുവടുവെപ്പാണ്. ജാവാസ്ക്രിപ്റ്റിനെ അധികം ആശ്രയിക്കാതെ കൂടുതൽ ഡൈനാമിക്, റെസ്‌പോൺസീവ്, പരിപാലിക്കാൻ എളുപ്പമുള്ള സ്റ്റൈൽഷീറ്റുകൾ നിർമ്മിക്കാൻ ഇത് ഡെവലപ്പർമാരെ പ്രാപ്തരാക്കുന്നു. :has()-നുള്ള ബ്രൗസർ പിന്തുണ വർധിക്കുന്നതിനനുസരിച്ച്, ഈ ശക്തമായ സെലക്ടറിന്റെ കൂടുതൽ നൂതനവും ക്രിയാത്മകവുമായ ഉപയോഗങ്ങൾ നമുക്ക് പ്രതീക്ഷിക്കാം.

മുന്നോട്ട് നോക്കുമ്പോൾ, സിഎസ്എസ് വർക്കിംഗ് ഗ്രൂപ്പ് സിഎസ്എസിന്റെ കഴിവുകൾ കൂടുതൽ വികസിപ്പിക്കുന്ന മറ്റ് ആവേശകരമായ ഫീച്ചറുകളും മെച്ചപ്പെടുത്തലുകളും പര്യവേക്ഷണം ചെയ്യുന്നുണ്ട്. അവയിൽ ഉൾപ്പെടുന്നവ:

കണ്ടെയ്‌നർ ക്വറികൾ: വ്യൂപോർട്ടിന് പകരം അവയുടെ കണ്ടെയ്‌നറിന്റെ വലുപ്പത്തെ അടിസ്ഥാനമാക്കി ഘടകങ്ങൾക്ക് അവയുടെ സ്റ്റൈലിംഗ് ക്രമീകരിക്കാൻ അനുവദിക്കുന്നു.
കാസ്കേഡ് ലെയറുകൾ: സിഎസ്എസ് നിയമങ്ങളുടെ കാസ്കേഡിലും സ്പെസിഫിസിറ്റിയിലും കൂടുതൽ നിയന്ത്രണം നൽകുന്നു.
കൂടുതൽ വിപുലമായ സെലക്ടറുകൾ: എലമെന്റുകളുടെ ആട്രിബ്യൂട്ടുകൾ, ഉള്ളടക്കം, ഡോക്യുമെന്റ് ട്രീയിലെ സ്ഥാനം എന്നിവയെ അടിസ്ഥാനമാക്കി അവയെ ലക്ഷ്യമിടാൻ കഴിയുന്ന പുതിയ സെലക്ടറുകൾ അവതരിപ്പിക്കുന്നു.

ഏറ്റവും പുതിയ സിഎസ്എസ് സംഭവവികാസങ്ങളുമായി കാലികമായിരിക്കുകയും :has() പോലുള്ള പുതിയ ഫീച്ചറുകൾ സ്വീകരിക്കുകയും ചെയ്യുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് സിഎസ്എസിന്റെ മുഴുവൻ സാധ്യതകളും അൺലോക്ക് ചെയ്യാനും യഥാർത്ഥത്തിൽ അസാധാരണമായ വെബ് അനുഭവങ്ങൾ സൃഷ്ടിക്കാനും കഴിയും.

ഉപസംഹാരം

:has() സെലക്ടർ സിഎസ്എസ് ടൂൾബോക്സിലെ ഒരു ശക്തമായ കൂട്ടിച്ചേർക്കലാണ്, ഇത് പാരന്റ് സെലക്ഷൻ സാധ്യമാക്കുകയും ഡൈനാമിക്, റെസ്‌പോൺസീവ് സ്റ്റൈലിംഗിനായി പുതിയ സാധ്യതകൾ തുറക്കുകയും ചെയ്യുന്നു. ബ്രൗസർ അനുയോജ്യതയും പ്രകടനപരമായ പ്രത്യാഘാതങ്ങളും പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണെങ്കിലും, വൃത്തിയുള്ളതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതും മികച്ച പ്രകടനം കാഴ്ചവെക്കുന്നതുമായ സിഎസ്എസ് കോഡിനായി :has() ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾ നിഷേധിക്കാനാവില്ല. ഈ ഗെയിം മാറ്റുന്ന സെലക്ടറിനെ സ്വീകരിക്കുകയും നിങ്ങളുടെ സിഎസ്എസ് സ്റ്റൈലിംഗ് ഇന്ന് തന്നെ വിപ്ലവകരമാക്കുകയും ചെയ്യുക!

അക്സെസ്സിബിലിറ്റി പരിഗണിക്കാനും പഴയ ബ്രൗസറുകൾക്കായി ഫോൾബാക്ക് സംവിധാനങ്ങൾ നൽകാനും ഓർക്കുക. ഈ ഗൈഡിൽ പ്രതിപാദിച്ചിട്ടുള്ള മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെ, നിങ്ങൾക്ക് :has() സെലക്ടറിന്റെ മുഴുവൻ സാധ്യതകളും പ്രയോജനപ്പെടുത്താനും ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്കായി യഥാർത്ഥത്തിൽ അസാധാരണമായ വെബ് അനുഭവങ്ങൾ സൃഷ്ടിക്കാനും കഴിയും.