Styrken ved :has() i CSS

Hej alle jer vidunderlige udviklere derude! I dette indlæg skal vi udforske brugen af :has() i dit næste webprojekt. :has() er relativt ny, men har vundet popularitet i frontend-fællesskabet ved at levere kontrol over forskellige elementer i din brugergrænseflade. Lad os tage et kig på, hvad pseudoklassen er, og hvordan vi kan bruge den.

Syntaks

:has() CSS pseudo-klasse hjælper med at style et element, hvis nogen af ​​de ting, vi søger efter inde i det, er fundet og taget højde for. Det er som at sige, "Hvis der er noget specifikt inde i denne boks, så stil boksen på denne måde OG kun på denne måde."

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

”Det funktionelle :has() CSS-pseudo-klasse repræsenterer et element, hvis nogen af ​​de relative vælgere, der sendes som et argument, matcher mindst ét ​​element, når de er forankret mod dette element. Denne pseudoklasse præsenterer en måde at vælge et overordnet element eller et tidligere søskendeelement i forhold til et referenceelement ved at tage en relativ vælgerliste som et argument."

For en mere robust forklaring, DND gør det perfekt

Stylingproblemet

I tidligere år havde vi ingen mulighed for at style et overordnet element baseret på et direkte underordnet af denne forælder med CSS eller et element baseret på et andet element. I den chance, vi havde for at gøre det, skulle vi bruge noget JavaScript og slå klasser til/fra baseret på HTML-strukturen. :has() løst det problem.

Lad os sige, at du har et overskriftsniveau 1-element (h1) det er titlen på et indlæg eller noget i den stil på en bloglisteside, og så har du en overskrift niveau 2 (h2), der følger direkte efter den. Denne h2 kunne være en underoverskrift til stillingen. Hvis det h2 er til stede, vigtig og direkte efter h1, vil du måske få den h1 til at skille sig ud. Før skulle du have skrevet en JS-funktion.

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');
  }
});

Denne JS-funktion leder efter alle de h1'er, der har en h2 fortsætter det, og anvender en klasse af highlight-indhold for at lave h1 fremstår som en vigtig artikel.

Nyt og forbedret med moderne CSS på vej! Mulighederne for, hvad vi kan gøre i browseren, er nået langt. Vi kan nu drage fordel af CSS til at gøre ting, som vi traditionelt ville have at gøre med JavaScript, ikke alt, men nogle ting.

New School Way – CSS

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

Smid nogle :har() på det!

Nu kan du bruge :has() at opnå det samme, som JS-funktionen gjorde. Denne CSS tjekker for enhver h1 og bruger søskendekombinator kontrollere for en h2, der umiddelbart følger den, og tilføjer farven blå til teksten. Nedenfor er et par eksempler på brug af hvornår :has() kan komme godt med.

:har vælgereksempel 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;
}

:har vælgereksempel 2

Mange gange manipulerer eller arbejder vi som arbejdere på nettet med billeder. Det kunne vi godt bruge værktøjer til Cloudinary giver mulighed for at gøre brug af forskellige transformationer på vores billeder, men normalt vil vi tilføje skygger, border-radii og billedtekster (ikke at forveksle med alternativ tekst i en alt-attribut).

Eksemplet nedenfor bruger :has() for at se, om en figur eller et billede har et figcaption-element, og hvis det gør, anvender det noget baggrund og en kantradius for at få billedet til at skille sig ud.

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

Kan jeg :has() det?

Det kan du se :has() har stor support på tværs af moderne browsere.

:has() i fællesskabet!

Jeg kontaktede mit netværk på Twitter for at se, hvordan mine jævnaldrende brugte :has() i deres daglige arbejde, og det er, hvad de havde at sige om det.

"Et eksempel, jeg har, er at style en specifik SVG fra en tredjepartspakke @saucedopen fordi jeg ikke kunne style det direkte.”

Det er hvad Nick Taylor fra OpenSauced havde at sige om brugen :has().

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

Lol, sidste gang jeg brugte det, byggede jeg tastaturfunktionalitet ind i en trævisning, så jeg var nødt til at detektere tilstande og klasser af søskendeelementer, men det var ikke i Firefox endnu, så jeg var nødt til at finde en anden løsning. 🫠

Abbey Perini fra Nexcor Food Safety Technologies, Inc.

Det er fantastisk at se, hvordan fællesskabsmedlemmer bruger moderne CSS til at løse problemer i den virkelige verden, og også et råb til Abbey, der bruger det af tilgængelighedsgrunde!

Ting at huske på

Der er et par vigtige punkter, du skal huske på, når du bruger :has() Punkttegn refereret fra MDN.

• Pseudoklassen påtager sig specificiteten af ​​den mest specifikke vælger i sin argumentation
• Hvis :has() pseudo-klassen i sig selv er ikke understøttet i en browser, hele vælgerblokken vil mislykkes, medmindre :has() er på en tilgivende vælgerliste, som f.eks :is() , :where()
• :has() pseudo-klasse kan ikke indlejres i en anden :has() 
• Pseudo-elementer er heller ikke gyldige vælgere indenfor :has() og pseudo-elementer er ikke gyldige ankre for :has()

Konklusion

Udnyttelse af kraften i CSS, herunder avancerede funktioner som :has() pseudo-klasse, giver os mulighed for at skabe exceptionelle weboplevelser. CSS's styrker ligger i dens kaskade og specificitet ... den bedste del, der giver os mulighed for at udnytte dets fulde potentiale. Ved at omfavne CSS's muligheder kan vi drive webdesign og udvikling fremad, frigøre nye muligheder og skabe banebrydende brugergrænseflader.

Links:

• SEO Powered Content & PR Distribution. Bliv forstærket i dag.
• PlatoData.Network Vertical Generative Ai. Styrk dig selv. Adgang her.
• PlatoAiStream. Web3 intelligens. Viden forstærket. Adgang her.
• PlatoESG. Kulstof, CleanTech, Energi, Miljø, Solenergi, Affaldshåndtering. Adgang her.
• PlatoHealth. Bioteknologiske og kliniske forsøgs intelligens. Adgang her.
• Kilde: https://css-tricks.com/the-power-of-has-in-css/