Dziś porozmawiajmy krótko o relatywnie świeżych pseudoklasach w świecie CSS :is() oraz :where(). Sprawdźmy ich zastosowanie oraz nieoczywistą, subtelną różnicę między nimi. Wiem – brzmi nudno. Ale jeśli dobrniesz do końca tego artykułu – znajdziesz tam, dla urozmaicenia, odrobinę spontanicznej satyry…
Słowem wstępu.
Obie pseudoklasy mają za zadanie zredukować ilość kodu CSS, ułatwić stylowanie unikatowych elementów, skrócić długie listy selektorów w regułach, w skrócie – podnieść poziom endorfin front-end developerów.
Spójrzmy na przykład.
Nietrudno wyobrazić sobie taką oto długą, szkaradną listę selektorów w regule CSS:
.my-class p em,
.my-class li em,
.my-class section em {
// CSS rules
} Za pomocą :is() (dawniej :matches(), dawniej :any()) możemy uratować powyższy kod w następujący sposób:
.my-class :is(p, li, section) em {
// CSS rules
} Choć… równie dobrze możemy skorzystać z :where():
.my-class :where(p, li, section) em {
// CSS rules
} A teraz powiesz – Ejjjj… Jeśli technicznie działanie :is() oraz :where() jest identyczne – jaka jest między nimi różnica?
Magiczna różnica.
Obie pseudoklasy różnią się poziomem specyficzności. W jednym zdaniu – specyficzność określa jak łatwo jest nadpisać daną regułę. Więcej informacji na jej temat znajdziesz w moim dużym artykule o kaskadowości w CSS.
A więc specyficzność :is() jest równa specyficzności najbardziej specyficznego elementu w nawiasach. Korzystamy z niej, kiedy chcemy utrudnić nadpisanie reguły przez kolejne deklaracje.
Natomiast specyficzność :where() wynosi zawsze 0 (czyli bardzo łatwo nadpisać regułę).
Dorzućmy do powyższego przykładu następujący kod:
.my-class em {
// CSS rules
} Nadpisze on regułę zawierającą :where(), jednak nie nadpisze reguły zawierającej :is().
Aktualne wsparcie tych pseudoklas wśród przeglądarek znajdziesz tutaj:
A teraz bonus.
Pisząc ten artykuł miałam wrażenie, że on jakiś nudny jest, bez polotu i duszy po prostu. Koniecznie chciałam go ubarwnić ciekawym, nieszablonowym porównaniem opisywanych pseudoklas do jakiejś rzeczy z życia codziennego. Jednak wiadomo – godzina 23, mózg już nie-taki, siedzę trochę jak na szpilkach czekając na pobudkę najmłodszego, weny brak. Przede mną siedzą mój mąż oraz mój brat. Grają w grę. Więc ich zagaduję. Tłumaczę mniej więcej o co chodzi z tymi pseudoklasami i że porównania szukam. Najlepiej do kobiet – tak sobie wymyśliłam.
Mąż: Matka i teściowa…?
Ja (po kilku sekundach kminienia gdzie on tu widzi podobieństwo): Nie.
Brat: Ja mam coś. Ale to o ludziach, a nie kobietach.
Ja: … Dawaj.
Brat: Wegetarianie i weganie.
Ja: No niekoniecznie.
Mąż: Kobieta w makijażu i bez. Rano i wieczorem.
Ja: To ma być śmieszne…!
Mąż: W ciąży…
Ja (ucinając krótko): O co to to nie. Tu nie będzie żadnego podobieństwa. Myślałam bardziej w stylu: przed okresem i po okresie.
Mąż i brat jednocześnie: NIE!
Ja: Why…?
[Mąż z bratem wymieniają porozumiewawcze spojrzenia.]
Brat: Bo to nie ta sama kobieta.
Tak więc ostatecznie dobrego porównania nie mam. Jednak jeśli masz lepsze pomysły niż przedstawione powyżej – daj znać w komentarzu.
Tym wesołym akcentem skończmy owy artykuł. O, jeszcze kilka źródeł podam: MDN – pseudoklasa :is(), MDN – pseudoklasa :where(), specyfikacja CSS Selektory Level 4 (Editor’s Draft – definitywnie najbardziej aktualny), przykłady. I tradycyjnie, po raz kolejny – zapraszam do komentowania, dyskutowania
