Puterea lui :has() în CSS

Bună, toți dezvoltatorii minunați de acolo! În această postare vom explora utilizarea :has() în următorul tău proiect web. :has() este relativ nou, dar a câștigat popularitate în comunitatea front end, oferind control asupra diferitelor elemente din interfața dvs. de utilizare. Să aruncăm o privire la ce este pseudo-clasa și cum o putem utiliza.

Sintaxă

:has() Pseudoclasa CSS ajută la stilarea unui element dacă oricare dintre lucrurile pe care le căutăm în interiorul acestuia este găsit și luat în considerare. E ca și cum ai spune, „Dacă există ceva specific în această cutie, atunci stilați cutia în acest fel ȘI numai în acest fel.”

:has(<direct-selector>) {
  /* ... */
}

„Cel funcțional :has() Pseudoclasa CSS reprezintă un element dacă oricare dintre selectorii relativi care sunt trecuți ca argument se potrivește cu cel puțin un element atunci când este ancorat pe acest element. Această pseudo-clasă prezintă o modalitate de a selecta un element părinte sau un element frate anterior în raport cu un element de referință, luând ca argument o listă de selecție relativă.”

Pentru o explicație mai solidă, DND o face perfect

Problema stilului

În anii trecuți, nu aveam nicio modalitate de a stila un element părinte bazat pe un copil direct al acelui părinte cu CSS sau un element bazat pe alt element. În șansa de a face asta, ar trebui să folosim ceva JavaScript și să comutăm clasele pe/dezactivate pe baza structurii HTML. :has() rezolvat acea problema.

Să presupunem că aveți un element de nivel 1 de titlu (h1) acesta este titlul unei postări sau ceva de acest fel pe pagina unei liste de blog, iar apoi aveți un titlu de nivel 2 (h2) care îl urmează direct. Acest h2 ar putea fi un subtitlu pentru postare. Daca asta h2 este prezent, important și imediat după h1, ați putea dori să scoateți în evidență acel h1. Înainte ar fi trebuit să scrieți o funcție JS.

Old School Way – JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

Această funcție JS caută toate h1-urile care au a h2 continuându-l și aplicând o clasă de evidențiere-conținut pentru a face h1 iasă în evidență ca un articol important.

Nou și îmbunătățit cu CSS-ul modern care vine în mod fierbinte! Capacitățile a ceea ce putem face în browser au parcurs un drum lung. Acum putem profita de CSS pentru a face lucruri pe care în mod tradițional am avea de-a face cu JavaScript, nu totul, ci unele lucruri.

New School Way – CSS

h1:has(+ h2) {
    color: blue;
}

Aruncă niște :has() On It!

Acum puteți utiliza :has() pentru a realiza același lucru pe care l-a făcut și funcția JS. Acest CSS verifică orice h1 și folosește combinator frate verificând un h2 care îl urmează imediat și adaugă culoarea de albastru textului. Mai jos sunt câteva cazuri de utilizare a când :has() poate veni la îndemână.

:are Selector Exemplul 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:are Selector Exemplul 2

De multe ori noi, ca lucrători de pe web, manipulăm sau lucrăm cu imagini. Am putea folosi instrumente care Cloudinar prevede utilizarea diferitelor transformări ale imaginilor noastre, dar de obicei dorim să adăugăm umbre, raze de margine și legende (a nu se confunda cu textul alternativ într-un atribut alt).

Exemplul de mai jos este folosit :has() pentru a vedea dacă o figură sau o imagine are un element figcaption și dacă are, aplică un fundal și o rază de margine pentru a face imaginea să iasă în evidență.

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

Pot sa :has() care?

Puteți vedea asta :has() are un suport excelent în browserele moderne.

:has() in comunitate!

Am contactat rețeaua mea pe Twitter pentru a vedea cum foloseau colegii mei :has() în munca lor de zi cu zi și asta au avut de spus despre asta.

„Un exemplu pe care îl am este crearea unui anumit SVG dintr-un pachet terță parte în @saucedopen pentru că nu l-am putut stila direct.”

Acesta este ce Nick Taylor din OpenSauced trebuia să spun despre utilizare :has().

svg:has(> #Mail) {
  stroke-width: 1;
}

Lol ultima dată când l-am folosit, construiam funcționalitatea tastaturii într-o vizualizare arborescentă, așa că trebuia să detectez stări și clase de elemente frați, dar nu era încă în Firefox, așa că a trebuit să găsesc o altă soluție. 🫠

Abația Perini din Nexcor Food Safety Technologies, Inc.

Este grozav să vedem cum membrii comunității folosesc CSS modern pentru a rezolva problemele din lumea reală și, de asemenea, un strigăt pentru Abbey care îl folosește din motive de accesibilitate!

Lucruri de ținut minte

Există câteva puncte cheie de care trebuie să țineți cont atunci când utilizați :has() Punctele marcante la care se face referire din MDN.

• Pseudo-clasa preia specificitatea celui mai specific selector în argumentul său
• În cazul în care :has() pseudo-clasa în sine nu este acceptată într-un browser, întregul bloc selector nu va eșua decât dacă :has() se află într-o listă de selecție iertatoare, cum ar fi în :is() și :where()
• :has() pseudo-clasa nu poate fi imbricata in alta :has() 
• Pseudo-elementele nu sunt, de asemenea, selectoare valide în interior :has() iar pseudo-elementele nu sunt ancore valide pentru :has()

Concluzie

Valorificarea puterii CSS, inclusiv funcții avansate precum :has() pseudo-clasă, ne dă putere să creăm experiențe web excepționale. Punctele forte ale CSS constă în cascada și specificitatea sa... cea mai bună parte, permițându-ne să-și valorificăm întregul potențial. Îmbrățișând capacitățile CSS, putem promova designul și dezvoltarea web, deblocând noi posibilități și creând interfețe de utilizator inovatoare.

Link-uri:

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• PlatoData.Network Vertical Generative Ai. Împuterniciți-vă. Accesați Aici.
• PlatoAiStream. Web3 Intelligence. Cunoștințe amplificate. Accesați Aici.
• PlatoESG. carbon, CleanTech, Energie, Mediu inconjurator, Solar, Managementul deșeurilor. Accesați Aici.
• PlatoHealth. Biotehnologie și Inteligență pentru studii clinice. Accesați Aici.
• Sursa: https://css-tricks.com/the-power-of-has-in-css/