Hej, wszyscy wspaniali programiści! W tym poście przyjrzymy się zastosowaniu :has() w następnym projekcie internetowym. :has() jest stosunkowo nowym rozwiązaniem, ale zyskało popularność wśród społeczności frontendowej, zapewniając kontrolę nad różnymi elementami interfejsu użytkownika. Przyjrzyjmy się, czym jest pseudoklasa i jak możemy ją wykorzystać.

Składnia

Połączenia :has() Pseudoklasa CSS pomaga nadać styl elementowi, jeśli którakolwiek z rzeczy, których w nim szukamy, zostanie znaleziona i uwzględniona. To jakby powiedzieć, „Jeśli w tym pudełku znajduje się coś konkretnego, stylizuj pudełko w ten I tylko w ten sposób”.

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

„Funkcjonalność :has() Pseudoklasa CSS reprezentuje element, jeśli którykolwiek z selektorów względnych przekazywanych jako argument pasuje do co najmniej jednego elementu, gdy jest zakotwiczony względem tego elementu. Ta pseudoklasa przedstawia sposób wybierania elementu nadrzędnego lub poprzedniego elementu rodzeństwa w odniesieniu do elementu referencyjnego poprzez przyjęcie względnej listy selektorów jako argumentu.

Aby uzyskać bardziej solidne wyjaśnienie, DND robi to doskonale

Problem stylizacji

W przeszłości nie mieliśmy możliwości stylizowania elementu nadrzędnego na podstawie bezpośredniego elementu podrzędnego tego elementu nadrzędnego za pomocą CSS lub elementu opartego na innym elemencie. Gdybyśmy musieli to zrobić, musielibyśmy użyć JavaScript i włączyć/wyłączyć klasy w oparciu o strukturę kodu HTML. :has() rozwiązał ten problem.

Załóżmy, że masz element nagłówka poziomu 1 (h1) to tytuł posta lub coś w tym rodzaju na stronie z listą blogów, a następnie masz nagłówek poziomu 2 (h2), który bezpośrednio po nim następuje. Ten h2 mógłby być podtytułem posta. Jeśli to h2 jest obecny, ważny i bezpośrednio po h1, możesz chcieć wyróżnić to h1. Wcześniej musiałbyś napisać funkcję JS.

Oldschoolowy sposób – JavaScript

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

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

Ta funkcja JS szuka wszystkich h1, które mają a h2 kontynuując go i stosując klasę treści podświetlonych, aby utworzyć h1 wyróżnić się jako ważny artykuł.

Nowe i ulepszone, z nowoczesnym CSS, który jest na topie! Możliwości tego, co możemy zrobić w przeglądarce, przeszły długą drogę. Możemy teraz korzystać z CSS, aby robić rzeczy, które tradycyjnie musielibyśmy robić w JavaScript, nie wszystko, ale niektóre rzeczy.

Nowa droga szkolna – CSS

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

Rzuć trochę :has() na to!

Teraz możesz użyć :has() aby osiągnąć to samo, co zrobiła funkcja JS. Ten CSS sprawdza, czy nie ma h1 i używa kombinator rodzeństwa sprawdza, czy bezpośrednio po nim następuje h2, i dodaje do tekstu kolor niebieski. Poniżej znajduje się kilka przypadków użycia kiedy :has() może się przydać.

:has Selektor Przykład 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;
}

:has Selektor Przykład 2

Często my, pracownicy sieci, manipulujemy obrazami lub pracujemy z nimi. Moglibyśmy używać takich narzędzi Pochmurno umożliwia wykorzystanie różnych transformacji naszych obrazów, ale zazwyczaj chcemy dodać cienie, promienie obramowań i podpisy (nie mylić z tekstem alternatywnym w atrybucie alt).

Poniższy przykład używa :has() aby sprawdzić, czy figura lub obraz zawiera element figcaption, a jeśli tak, stosuje tło i promień obramowania, aby obraz się wyróżniał.

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

Czy mogę :has() że?

Możesz to zobaczyć :has() ma doskonałe wsparcie we wszystkich nowoczesnych przeglądarkach.

:has() w społeczeństwie!

Skontaktowałem się z moją siecią na Twitterze, aby zobaczyć, jak korzystają moi rówieśnicy :has() w ich codziennej pracy i oto, co mieli do powiedzenia na ten temat.

„Jednym z przykładów, jaki mam, jest stylizacja konkretnego pliku SVG z pakietu innej firmy @saucedopen ponieważ nie mogłem go bezpośrednio stylizować.”

Co to jest Nick Taylor od Otwarte w sosie miałem do powiedzenia na temat używania :has().

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

Lol, ostatnim razem, gdy go używałem, budowałem funkcjonalność klawiatury w widoku drzewa, więc musiałem wykryć stany i klasy elementów rodzeństwa, ale nie było to jeszcze w przeglądarce Firefox, więc musiałem znaleźć inne rozwiązanie. 🫠

Opactwo Perini od Nexcor Food Safety Technologies, Inc.

Wspaniale jest widzieć, jak członkowie społeczności używają nowoczesnego CSS do rozwiązywania rzeczywistych problemów, a także chwała Abbey używającej go ze względu na dostępność!

Warto pamiętać

Podczas użytkowania należy pamiętać o kilku kluczowych kwestiach :has() Punktory, do których odwołuje się MDN.

• Pseudoklasa w swojej argumentacji przejmuje specyfikę najbardziej specyficznego selektora
• Jeśli :has() sama pseudoklasa nie jest obsługiwana w przeglądarce, cały blok selektora zakończy się niepowodzeniem, chyba że :has() znajduje się na wybaczającej liście selektorów, takiej jak in :is() i :where()
• Połączenia :has() pseudoklasa nie może być zagnieżdżona w innej :has() 
• Pseudoelementy również nie są prawidłowymi selektorami wewnątrz :has() i pseudoelementy nie są prawidłowymi kotwicami :has()

Wnioski

Wykorzystując moc CSS, w tym zaawansowane funkcje, takie jak :has() pseudoklasa, umożliwia nam tworzenie wyjątkowych doświadczeń internetowych. Mocne strony CSS leżą w jego kaskadzie i specyfice… co najlepsze, pozwala nam wykorzystać jego pełny potencjał. Wykorzystując możliwości CSS, możemy posunąć do przodu projektowanie i rozwój stron internetowych, odblokowując nowe możliwości i tworząc przełomowe interfejsy użytkownika.

Spinki do mankietów:

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• PlatoData.Network Pionowe generatywne AI. Wzmocnij się. Dostęp tutaj.
• PlatoAiStream. Inteligencja Web3. Wiedza wzmocniona. Dostęp tutaj.
• PlatonESG. Węgiel Czysta technologia, Energia, Środowisko, Słoneczny, Gospodarowanie odpadami. Dostęp tutaj.
• Platon Zdrowie. Inteligencja w zakresie biotechnologii i badań klinicznych. Dostęp tutaj.
• Źródło: https://css-tricks.com/the-power-of-has-in-css/