Nowe funkcjonalne selektory pseudoklasy CSS :is() i :where()

Te pozornie niewielkie dodatki do składni selektora CSS będą miały duży wpływ.

Adam Argyle

Pisząc CSS, możesz czasem utworzyć długie listy selektorów, na które warto kierować reklamy. wiele elementów o takich samych regułach stylu. Jeśli na przykład chcesz zmienić kolor tagów <b> znajdujących się w elemencie nagłówka, możesz napisać:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

Zamiast tego możesz użyć atrybutu :is() i poprawić czytelność, unikając przy tym długiego selektor:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

Czytelność i krótsze selektory to tylko część wartości, jaką :is() i :where() wnoszą do CSS. W tym artykule znajdziesz informacje o składni i wartości tych 2 funkcjonalnych pseudoselektorów.

Zgodność z przeglądarką

:is()

:where()

Poznaj :is() i :where()

To są funkcjonalne selektory pseudoklas. Zwróć uwagę na () na końcu i tag zaczyna się od :. Można je traktować jak wywołania funkcji dynamicznych w czasie działania, . W kodzie CSS umożliwiają grupowanie elementów na środku, na początku lub na końcu selektora. Mogą też zmieniać specyficzność, dając Ci możliwość anulowania lub zwiększenia specyficzności.

Grupowanie selektora

:where() może wykonywać te same czynności dotyczące grupowania co :is(). Ten obejmuje możliwość użycia w dowolnym miejscu w selektorze, zagnieżdżania i układu w stosie. Pełna elastyczność CSS, którą znasz i cenisz. Oto kilka przykładów:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

Każdy z wymienionych przykładów selektora pokazuje elastyczność tych 2 funkcjonalnych pseudoklas. Aby znaleźć obszary kodu, w których można użyć funkcji :is() lub :where(), poszukaj selektorów z wieloma przecinkami i ich powtórzeniami.

Używanie prostych i złożonych selektorów w :is()

Aby odświeżyć informacje o selektorach, zapoznaj się z modułem wyboru na stronie usługi porównywania cen. Oto kilka przykładów prostych i złożonych selektorów, które pokazują możliwości tej funkcji:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

Obecnie atrybuty :is() i :where() są zamienne pod względem składni. Czas na czym różnią się od siebie.

Różnica między :is() a :where()

Jeśli chodzi o konkretność, :is() i :where() różnią się znacznie. Dla aby dowiedzieć się więcej o konkretach, zapoznaj się z modułem dotyczącym szczegółowości na stronie usługi porównywania cen.

W skrócie

• Metoda :where() nie jest sprecyzowana.
  :where() uwypukla specyfikę z listy selektora przekazywanej jako parametry funkcjonalne. To pierwsza funkcji wyboru rodzaju.
• :is() przyjmuje szczegółowość najbardziej szczegółowego selektora.
  :is(a,div,#id) ma wynik szczegółowości identyfikatora, czyli 100 punktów.

Wykorzystanie selektora o największej szczegółowości z listy jest sporym zaskoczeniem kiedy za bardzo interesowało mnie grupowanie. Zawsze można poprawić czytelność, przenosząc selektor o wysokiej specyficzności do własnego selektora, gdzie nie będzie on miał tak dużego wpływu. Oto przykład:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

W usłudze :where() czekam na wersje ofert bibliotek bez i określenie szczegółów. Konkurencja w zakresie specyfikiczności między stylami autora a stylami biblioteki może się zakończyć. Konkurencja przy tworzeniu kodu CSS nie byłaby bardzo precyzyjne. Usługa porównywania cen od dłuższego czasu pracuje nad taką funkcją grupowania jest tu i teraz jest to w dużej mierze niezbadany teren. Zabawa podczas tworzenia arkuszy stylów i usuń przecinki.

Fot. Markus Winkler na kanale Unsplash