:is() jest aktualną nazwą pseudoklasy „Matches-Any” w roboczej wersji CSS4.
Pierwotnie ta pseudoklasa została nazwana :any()i została zaimplementowana z ograniczoną obsługą specyficzną dla dostawcy:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Nazwa pseudoklasy „Matches-Any” została następnie zmieniona na :matches()we wczesnych wersjach roboczych wersji roboczej CSS4, z dodatkową (niepełną) obsługą niektórych przeglądarek.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Wreszcie, obecna wersja robocza zmieniła nazwę tej pseudoklasy na :is(), która obecnie nie jest obsługiwana w przeglądarkach.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Celem selektora „Dopasowuje dowolne” (ze wszystkimi jego nazwami) jest ułatwienie pisania złożonych grup selektorów.
Składnia
/* Theoretical until CSS4 support finalized */ :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )Hej, czy to nie jest jak wstępne przetwarzanie CSS?
Upraszczanie selektorów za pomocą :is()jest rzeczywiście podobne do tego, jak preprocesory CSS obsługują zagnieżdżone reguły:
/* SCSS written like this: */ div, p, ul, ol ( span ( /*… */ ) ) /* after processing becomes: */ div span, p span, ul span, ol span ( /*… */ ) /* which is a lot like the effect of :is()! */Ale strzeż się! Preprocesory, takie jak Sass, „rozwijają” zagnieżdżone reguły na listę łatwych do zrozumienia selektorów. :is()trochę inaczej poradzi sobie z regułami szczegółowości:
Specyfika jest interesująca
Zgodnie z projektem roboczym CSS4:
Specyfika pseudoklasy: is () zostaje zastąpiona przez specyfikę jej najbardziej specyficznego argumentu. Zatem selektor napisany za pomocą: is () niekoniecznie ma równoważną specyficzność do równoważnego selektora napisanego bez: is ().
Oznacza to, że specyfika :is()jest automatycznie uaktualniana do najbardziej szczegółowej pozycji na podanej liście argumentów:
/* This has higher precedence… */ :is(ol, .list, ul) li ( /*… */ ) /*… than this, even though this is later… */ ol li ( /*… */ ) /*… because :is() has the weight of it's heaviest selector, which is `.list`! */Wsparcie przeglądarki
Nawiązaliśmy do tego wcześniej, ale :is()w tej chwili nie obsługujemy przeglądarki. Został on wprowadzony w wersji roboczej redaktora 1 specyfikacji selektorów CSS poziomu 4. Oznacza to, że sytuacja wciąż się kształtuje, co sprawia, że przeglądarki trochę za wcześnie mogą skupić się na takiej koncepcji.
To powiedziawszy, mamy świetną obsługę przeglądarek w postaci :matches(z przedrostkiem producenta :anywypełniającym niektóre luki) dla ogólnej funkcjonalności. I oczywiście :notjest to kolejna pseudoklasa, która może pomóc w dopasowaniu.
Co ciekawe, :is()zostało wprowadzone, po :matchesczym zostało wprowadzone po :any. To tak jakby :anybyło zastępowane przez :matchesto, co jest zastępowane :is(), a szczegóły zmieniają się po drodze. Zawsze miło widzieć, jak te rzeczy się rozwijają.
Aby uzyskać maksymalne wsparcie dla „Dopasowania-Dowolne”, wymagane jest użycie mieszanki nazw historycznych, ponieważ obsługa przeglądarki jest obecnie mieszaniną prefiksów dostawców i ustawień eksperymentalnych.
/* These are deprecated, but still necessary in some browsers: */ :-moz-any(div, p) > em ( /*… */ ) :-webkit-any(div, p) > em ( /*… */ ) /* Has been replaced by :is() in CSS4, but still supported by some browsers with experimental features enabled */ :matches(div, p) > em ( /*… */ ) /* Doesn't work yet, but for future support, maybe add this? */ :is(div, p) > em ( /*… */ )Zobacz przykłady Pen: any pseudo-class by CSS-Tricks (@ css-tricks) w CodePen.
Związane z
:matches():not():any-link()
Zasoby
- Wpis na blogu Davida Barona wyjaśniający, dlaczego dodał
:-moz-anyobsługę Gecko - Dokumentacja MDN
- Specyfikacja selektorów CSS poziomu 4 (wersja redaktora 1): Specyfikacja wprowadzająca
:is()pseudoklasę. - Poznaj post Pseudo Class Selectors: CSS-Tricks przedstawiający sposób działania pseudoklas.