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

Te pozornie niewielkie zmiany w składni selektora arkusza CSS będą miały duży wpływ.

Adam Argyle

Pisząc kod CSS, możesz czasem otrzymać długie listy selektorów, aby kierować reklamy na wiele elementów z tymi samymi regułami stylu. Jeśli np. chcesz dostosować kolor wszystkich 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ć parametru :is(), aby zwiększyć czytelność i jednocześnie unikać długiego selektora:

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

Czytelność i krótszy selektor to tylko niektóre z zalet, jakie :is() i :where() wnoszą do CSS. W tym poście poznasz składnię i wartość tych dwóch funkcjonalnych pseudoselektorów.

Zgodność z przeglądarką

:is()

:where()

Poznaj: :is() i :where()

To działające selektory pseudoklas. Zwróć uwagę na () na końcu i o tym, jak zaczyna się od :. Możesz je traktować jako dynamiczne wywołania funkcji w czasie działania, które pasują do elementów. Podczas pisania CSS umożliwiają one grupowanie elementów pośrodku, na początku lub na końcu selektora. Mogą też zmieniać szczegółowość, co daje możliwość zerwania lub zwiększenia precyzji.

Grupowanie selektora

Wszystko, co :is() może zrobić w związku z grupowaniem, może też :where(). Obejmuje to używanie w dowolnym miejscu w selektorze oraz zagnieżdżanie i stosy. Pełna elastyczność CSS, którą znasz i lubisz. 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 przykładów powyżej pokazuje elastyczność tych 2 funkcjonalnych pseudoklas. Aby znaleźć obszary w kodzie, które mogą być przydatne przy zastosowaniu :is() lub :where(), poszukaj selektorów z wieloma przecinkami i powtarzającymi się selektorami.

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

Jeśli chcesz dowiedzieć się więcej o selektorach, poczytaj o module selektorów w sekcji Nauka CSS. Oto kilka przykładów prostych i złożonych selektorów, aby zilustrować tę możliwość:

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

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

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

Terminy :is() i :where() są obecnie wymienne składniowo. Czas przyjrzeć się tym, czym różnią się od siebie.

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

Jeśli chodzi o szczegółowość, :is() i :where() są bardzo rozbieżne. Aby dowiedzieć się więcej o szczegółach, zapoznaj się z modułem dotyczącym szczegółowych informacji o CSS.

W skrócie

• Funkcja :where() nie ma specyficzności.
  :where() ściska całą szczegółowość listy selektora przekazywanej jako parametry funkcjonalne. To pierwsza tego rodzaju funkcja selektora.
• Funkcja :is() uwzględnia szczegółowość swojego najbardziej szczegółowego selektora.
  :is(a,div,#id) ma wynik specyficzności identyfikatora, czyli 100 punktów.

Wybór najbardziej precyzyjnego selektora z listy okazał się dla mnie pułapką, gdy ekscytowało mnie grupowanie. Zawsze mogłem poprawić czytelność, przenosząc selektor wysokiej szczegółowości do własnego selektora, w którym nie miałoby to większego wpływu. Oto przykład:

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

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

Dzięki :where() widzę, że biblioteki oferują różne wersje. Rywalizacja między stylami autora i stylami z biblioteki może się skończyć. Przy pisaniu CSS nie ma takiej specyfiki. CSS już od jakiegoś czasu pracuje nad taką funkcją grupowania. Jest ona dostępna, ale w większości nie jest jeszcze do końca zbadana. Twórz mniejsze arkusze stylów i usuwaj przecinki.

Fot. Markus Winkler, strona Unsplash