A :has() ereje a CSS-ben

Szia minden csodálatos fejlesztő! Ebben a bejegyzésben a használatát vizsgáljuk meg :has() következő webprojektjében. :has() viszonylag új, de népszerűvé vált a felhasználói felület közösségében azáltal, hogy a felhasználói felület különböző elemei felett vezérelhető. Nézzük meg, mi is az a pszeudoosztály, és hogyan tudjuk hasznosítani.

Szintaxis

A :has() A CSS pszeudoosztály segít egy elem stílusának kialakításában, ha a benne keresett dolgok bármelyikét megtaláljuk és figyelembe veszik. Mintha azt mondanám, "Ha van valami konkrét ebben a dobozban, akkor alakítsa a dobozt így ÉS csak így."

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

„A funkcionális :has() A CSS pszeudoosztály akkor jelöl egy elemet, ha az argumentumként átadott relatív szelektorok bármelyike ​​megfelel legalább egy elemnek, amikor ehhez az elemhez van rögzítve. Ez a pszeudoosztály bemutatja a szülőelem vagy egy korábbi testvérelem kiválasztásának módját egy hivatkozási elemhez képest úgy, hogy argumentumként egy relatív választólistát vesz fel.”

A pontosabb magyarázat érdekében DND tökéletesen csinálja

A stílusprobléma

Az elmúlt években nem volt módunk arra, hogy a szülőelemet az adott szülő közvetlen gyermeke alapján CSS-sel vagy egy másik elemen alapuló elemet stílusozzuk. Abban az esetben, ha ezt meg kell tennünk, néhány JavaScriptet kell használnunk, és a HTML szerkezete alapján be-/ki kell kapcsolnunk az osztályokat. :has() megoldotta azt a problémát.

Tegyük fel, hogy van egy 1. szintű címsor eleme (h1) ez egy bejegyzés címe vagy valami hasonló egy bloglista oldalon, és akkor van egy 2. szintű címsor (h2), amely közvetlenül követi. Ez a h2 lehetne a bejegyzés alcíme. Ha az h2 jelen van, fontos, és közvetlenül azután van h1, érdemes kiemelni a h1-et. Mielőtt írnod ​​kellett volna egy JS függvényt.

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

Ez a JS függvény megkeresi az összes h1-et, amely rendelkezik a h2 ennek folytatása, és a kiemelt tartalom osztályának alkalmazása a h1 kiemelkedik, mint egy fontos cikk.

Új és továbbfejlesztett a modern CSS-szel, amely forrón érkezik! A böngészőben végrehajtható lehetőségek hosszú utat tettek meg. Most már kihasználhatjuk a CSS előnyeit olyan dolgok megtételére, amelyeket hagyományosan a JavaScript-el kellene végeznünk, nem mindent, de néhány dolgot.

New School Way – CSS

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

Dobj rá néhányat:has()!

Most már használhatod :has() hogy ugyanazt érje el, mint a JS függvény. Ez a CSS minden h1-et keres, és a testvérkombinátor keres egy h2-t, amely közvetlenül követi, és kék színt ad a szöveghez. Az alábbiakban bemutatunk néhány használati esetet, amikor :has() jól jöhet.

:van választó 1. példa

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

:van választó 2. példa

Az interneten dolgozók sokszor manipulálunk vagy dolgozunk képekkel. Használhatunk olyan eszközöket Felhős lehetővé teszi, hogy különféle átalakításokat használjunk fel a képeinken, de általában vetett árnyékokat, határsugarakat és feliratokat szeretnénk hozzáadni (nem tévesztendő össze az alt attribútumban szereplő alternatív szöveggel).

Az alábbi példa használja :has() annak ellenőrzésére, hogy egy figurán vagy képen van-e képfelirat elem, és ha van, akkor a háttér és a szegélysugár segítségével kiemeli a képet.

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

Tudok :has() ezt?

Láthatja ezt :has() nagy támogatást nyújt a modern böngészőkben.

:has() a közösségben!

Megkerestem a hálózatomat a Twitteren, hogy megnézzem, hogyan használják a társaim :has() a mindennapi munkájukban, és ez az, amit erről kellett mondaniuk.

„Egy példa arra, hogy egy adott SVG-t alakítok ki egy harmadik féltől származó csomagból @saucedopen mert nem tudtam közvetlenül formálni.”

Ez az, amit Nick Taylor ból ből OpenSauced használatáról kellett szólnom :has().

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

Lol, amikor legutóbb használtam, a billentyűzet funkcióit fanézetbe építettem, így fel kellett ismernem a testvérelemek állapotait és osztályait, de ez még nem volt Firefoxban, ezért más megoldást kellett találnom. 🫠

Perini apátság ból ből Nexcor Food Safety Technologies, Inc.

Nagyszerű látni, hogy a közösség tagjai hogyan használják a modern CSS-t a valós világ problémáinak megoldására, és egy kiáltás Abbey-nek, hogy akadálymentességi okokból használja!

Szem előtt tartandó dolgok

A használat során néhány kulcsfontosságú szempontot figyelembe kell venni :has() Felsoroláspontokra hivatkozva MDN.

• A pszeudoosztály a legspecifikusabb szelektor sajátosságait veszi át argumentumában
• Ha a :has() A pszeudoosztály maga nem támogatott böngészőben, a teljes választóblokk meghiúsul, hacsak nem :has() egy elnéző választólistán van, mint pl :is() és a :where()
• A :has() pszeudoosztály nem ágyazható be másikba :has() 
• A pszeudoelemek szintén nem érvényes szelektorok ezen belül :has() és a pszeudoelemek nem érvényes horgonyok :has()

Következtetés

A CSS erejének kihasználása, beleértve a fejlett funkciókat, például a :has() pszeudoosztályú, lehetővé teszi számunkra, hogy kivételes webes élményeket készítsünk. A CSS erősségei a kaszkádban és a specifikusságban rejlenek… a legjobb rész, ami lehetővé teszi számunkra, hogy a benne rejlő teljes potenciált kiaknázzuk. A CSS képességeinek kihasználásával előremozdíthatjuk a webdizájnt és -fejlesztést, új lehetőségeket nyitva meg, és úttörő felhasználói felületeket hozhatunk létre.

linkek:

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• PlatoData.Network Vertical Generative Ai. Erősítse meg magát. Hozzáférés itt.
• PlatoAiStream. Web3 Intelligence. Felerősített tudás. Hozzáférés itt.
• PlatoESG. Carbon, CleanTech, Energia, Környezet, Nap, Hulladékgazdálkodás. Hozzáférés itt.
• PlatoHealth. Biotechnológiai és klinikai vizsgálatok intelligencia. Hozzáférés itt.
• Forrás: https://css-tricks.com/the-power-of-has-in-css/