Hej alla underbara utvecklare där ute! I det här inlägget ska vi utforska användningen av :has()
i ditt nästa webbprojekt. :has()
är relativt ny men har vunnit popularitet i frontend-gemenskapen genom att leverera kontroll över olika element i ditt användargränssnitt. Låt oss ta en titt på vad pseudoklassen är och hur vi kan använda den.
syntax
Smakämnen :has()
CSS-pseudoklass hjälper till att utforma ett element om någon av de saker vi letar efter i det hittas och redovisas. Det är som att säga, "Om det finns något specifikt inuti den här lådan, stil då lådan så här OCH bara på det här sättet."
:has(<direct-selector>) {
/* ... */
}
Stylingproblemet
Tidigare har vi inte haft något sätt att utforma ett föräldraelement baserat på ett direkt underordnat till den föräldern med CSS eller ett element baserat på ett annat element. I den chansen vi hade att göra det, skulle vi behöva använda lite JavaScript och växla klasser på/av baserat på HTML-strukturen. :has()
löste det problemet.
Låt oss säga att du har ett rubriknivå 1-element (h1
) det är titeln på ett inlägg eller något i den stilen på en blogglistsida, och sedan har du en rubrik nivå 2 (h2
) som följer direkt. Denna h2 kan vara en underrubrik för inlägget. Om det h2
är närvarande, viktig och direkt efter h1
, du kanske vill göra att h1 sticker ut. Innan du skulle ha behövt skriva 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');
}
});
Den här JS-funktionen letar efter alla h1:or som har en h2
fortsätter det och tillämpar en klass av highlight-innehåll för att göra h1
framstå som en viktig artikel.
Nytt och förbättrat med dagens CSS på ingång! Möjligheterna för vad vi kan göra i webbläsaren har kommit långt. Vi kan nu dra nytta av CSS för att göra saker som vi traditionellt skulle ha att göra med JavaScript, inte allt, men vissa saker.
New School Way – CSS
h1:has(+ h2) {
color: blue;
}
Kasta lite :has() på det!
Nu kan du använda :has()
för att uppnå samma sak som JS-funktionen gjorde. Denna CSS letar efter någon h1 och använder syskonkombinator letar efter en h2 som omedelbart följer den och lägger till färgen blå till texten. Nedan finns ett par användningsfall av när :has()
kan komma till hands.
:har väljare Exempel 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äljare Exempel 2
Många gånger manipulerar vi som arbetare på webben eller arbetar med bilder. Vi skulle kunna använda verktyg som Cloudinary tillhandahåller att använda olika transformationer på våra bilder, men vanligtvis vill vi lägga till skuggor, border-radii och bildtexter (inte att förväxla med alternativ text i ett alt-attribut).
Exemplet nedan använder :has()
för att se om en figur eller bild har ett figcaption-element och om det har det applicerar den lite bakgrund och en kantradie för att få bilden att sticka ut.
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;
}
:has()
den där?
Kan jag Du kan se det :has()
har bra stöd i moderna webbläsare.
Den här webbläsarens stöddata kommer från Kan jag använda, som har mer detaljer. En siffra indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Desktop
krom | firefox | IE | kant | Safari |
---|---|---|---|---|
105 | 121 | Nej | 105 | 15.4 |
Mobil / surfplatta
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
122 | 123 | 122 | 15.4 |
:has()
i samhället!
Jag kontaktade mitt nätverk på Twitter för att se hur mina kamrater använde :has()
i sitt dagliga arbete och detta är vad de hade att säga om det.
svg:has(> #Mail) {
stroke-width: 1;
}
Det är fantastiskt att se hur communitymedlemmar använder modern CSS för att lösa verkliga problem, och även ett shout out till Abbey som använder det av tillgänglighetsskäl!
Saker att tänka på
Det finns några viktiga punkter att tänka på när du använder :has()
Punktpunkter refererade från MDN.
- Pseudoklassen antar specificiteten hos den mest specifika väljaren i sitt argument
- Om
:has()
pseudo-klassen i sig stöds inte i en webbläsare, hela väljarblocket kommer att misslyckas om inte:has()
finns i en förlåtande väljarlista, till exempel i:is()
och:where()
- Smakämnen
:has()
pseudoklass kan inte kapslas in i en annan:has()
- Pseudo-element är inte heller giltiga väljare inom
:has()
och pseudo-element är inte giltiga ankare för:has()
Slutsats
Utnyttja kraften i CSS, inklusive avancerade funktioner som :has()
pseudoklass, ger oss möjlighet att skapa exceptionella webbupplevelser. CSS:s styrkor ligger i dess kaskad och specificitet ... den bästa delen, som gör att vi kan utnyttja dess fulla potential. Genom att ta till oss funktionerna i CSS kan vi driva webbdesign och utveckling framåt, låsa upp nya möjligheter och skapa banbrytande användargränssnitt.
Länkar:
- SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
- PlatoData.Network Vertical Generative Ai. Styrka dig själv. Tillgång här.
- PlatoAiStream. Web3 Intelligence. Kunskap förstärkt. Tillgång här.
- Platoesg. Kol, CleanTech, Energi, Miljö, Sol, Avfallshantering. Tillgång här.
- PlatoHealth. Biotech och kliniska prövningar Intelligence. Tillgång här.
- Källa: https://css-tricks.com/the-power-of-has-in-css/