: är () - CSS-tricks

Anonim

:is() är det aktuella namnet på pseudoklassen “Matches-Any” i CSS4-arbetsutkastet.

Ursprungligen namngavs denna pseudoklass :any()och implementerades med begränsat leverantörsspecifikt stöd:

/* Never actually worked */ :any(div, p) > em ( /*… */ )

"Matches-Any" pseudoklassnamnet ändrades sedan till :matches()i tidiga versioner av CSS4-arbetsutkastet, med ytterligare (ofullständigt) stöd till vissa webbläsare.

/* Sort of works */ :matches(div, p) > em ( /*… */ )

Slutligen har det nuvarande arbetsutkastet bytt namn på denna pseudoklass till :is(), som för närvarande inte stöds i webbläsare.

/* Will work in the future? */ :is(div, p) > em ( /*… */ )

Målet med ”Matches Any” -väljaren (med alla dess namn) är att göra komplexa grupperingar av väljare lättare att skriva.

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, är det inte som CSS förbehandling?

Att förenkla väljare med :is()liknar verkligen hur CSS-förprocessorer hanterar kapslade regler:

/* 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()! */

Men se upp! Förprocessorer, som Sass, ”rullar ut” dina kapslade regler i en lista med lättförståeliga väljare. :is()hanterar specificitetsregler lite annorlunda:

Specificitet är intressant

Enligt CSS4 Working Draft:

Specificiteten för: är () pseudoklassen ersätts med specificiteten för dess mest specifika argument. En väljare skriven med: is () har alltså inte nödvändigtvis motsvarande specificitet som motsvarande väljare skriven utan: är ().

Det betyder att specificiteten för :is()automatiskt uppgraderas till det mest specifika objektet i listan med 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`! */

Webbläsarstöd

Vi antydde detta tidigare, men :is()har inget webbläsarstöd just nu. Det introducerades i Editor's Draft 1 i CSS Selectors Level 4 Specification. Det betyder att saker och ting fortfarande håller på att formas vilket gör det lite tidigt för webbläsare att samlas kring ett sådant koncept.

Som sagt, vi har bra webbläsarstöd i form av :matches(med leverantörsprefix som :anyfyller i några luckor) för den allmänna funktionaliteten. Och naturligtvis :notär det en annan pseudoklass som kan hjälpa till med matchning.

Vad som är intressant att notera är att :is()det introducerades efter :matchesvilket introducerades efter :any. Det är ungefär som :anyatt ersättas av :matchesvilket som ersätts med :is(), med detaljerna som förändras under vägen. Alltid snyggt för att se hur dessa saker utvecklas.

För att få maximalt stöd för "Matches-Any" krävs att man använder en blandning av de historiska namnen, eftersom webbläsarhantering för närvarande är ett häpnadsväckande leverantörsprefix och experimentella inställningar just nu.

/* 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 ( /*… */ )

Se exempel på pennor på: vilken pseudoklass som helst av CSS-Tricks (@ css-tricks) på CodePen.

Relaterad

  • :matches()
  • :not()
  • :any-link()

Resurser

  • David Barons blogginlägg som förklarar varför han lade till :-moz-anystöd för Gecko
  • MDN-dokumentation
  • CSS Selectors Level 4 Specification (Editor's Draft 1): Specifikationen som introducerar :is()pseudoklassen.
  • Möt Pseudo Class Selectors: CSS-Tricks postar hur pseudoklasser fungerar.