:is() je aktuální název pseudotřídy „Matches-Any“ v pracovním konceptu CSS4.
Původně byla tato pseudotřída pojmenována :any()a byla implementována s omezenou podporou specifickou pro dodavatele:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Název pseudo-třídy „Matches-Any“ byl poté změněn na :matches()v dřívějších verzích pracovního konceptu CSS4, přičemž některým prohlížečům byla poskytnuta další (neúplná) podpora.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Nakonec aktuální pracovní koncept přejmenoval tuto pseudotřídu na :is(), která je v prohlížečích aktuálně nepodporovaná.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Cílem selektoru „Shoduje se s jakýmkoli“ (se všemi jeho názvy) je usnadnit psaní složitých seskupení selektorů.
Syntax
/* 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, není to jako předzpracování CSS?
Zjednodušení selektorů pomocí :is()je skutečně podobné tomu, jak preprocesory CSS zpracovávají vnořená pravidla:
/* 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 pozor! Preprocesory, jako je Sass, „rozbalí“ vaše vnořená pravidla do seznamu snadno srozumitelných selektorů. :is()bude zpracovávat pravidla specifičnosti trochu jinak:
Specifičnost je zajímavá
Podle pracovního návrhu CSS4:
Specifičnost pseudotřídy: is () je nahrazena specifičností jejího nejkonkrétnějšího argumentu. Selektor napsaný pomocí: is () tedy nemusí mít nutně ekvivalentní specificitu jako ekvivalentní selektor napsaný bez: is ().
To znamená, že specifičnost :is()se automaticky upgraduje na nejkonkrétnější položku v seznamu poskytnutých argumentů:
/* 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`! */Podpora prohlížeče
Zmínili jsme se o tom dříve, ale :is()v tuto chvíli nemáme podporu prohlížeče. To bylo představeno v editoru Draft 1 specifikace CSS Selectors úrovně 4. To znamená, že se věci stále utvářejí, takže je trochu brzy, aby se prohlížeče shromáždily kolem takového konceptu.
To znamená, že máme skvělou podporu prohlížeče v podobě :matches(s :anyvyplněním některých mezer předponou dodavatele ) pro obecné funkce. A samozřejmě :notje tu další pseudotřída, která může pomoci s párováním.
Zajímavé je, že :is()byl představen poté, :matchesco byl představen později :any. Je to něco jako :anynahrazování, :matcheskterým se nahrazuje :is(), přičemž se podrobnosti mění. Vždy elegantní, abyste viděli, jak se tyto věci vyvíjejí.
Chcete-li získat maximální podporu pro „Shoduje se s libovolným“, je nutné použít kombinaci historických názvů, protože zpracování prohlížeče je v tomto okamžiku v současné době nástrojem prefixů dodavatelů a experimentálních nastavení.
/* 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 ( /*… */ )Podívejte se na příklady Pen: jakékoli pseudotřídy od CSS-Tricks (@ css-tricks) na CodePen.
Příbuzný
:matches():not():any-link()
Zdroje
- Příspěvek na blogu Davida Barona vysvětlující, proč přidal
:-moz-anypodporu Geckovi - Dokumentace MDN
- CSS Selectors Level 4 Specification (Editor's Draft 1): Specification that introduces the
:is()pseudo-class. - Seznamte se se selektory pseudo tříd: příspěvek CSS-Tricks, který popisuje, jak pseudotřídy fungují.