: er () - CSS-tricks

Anonim

:is() er det aktuelle navn for "Matches-Any" pseudoklassen i CSS4-arbejdsudkastet.

Oprindeligt blev denne pseudoklasse navngivet :any()og implementeret med begrænset leverandørspecifik support:

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

:matches()Pseudoklassens navn “Matches-Any” blev derefter ændret til i tidlige versioner af CSS4-arbejdsudkastet, hvor nogle browsere fik yderligere (ufuldstændig) support.

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

Endelig har det nuværende arbejdsudkast omdøbt denne pseudoklasse til :is(), som i øjeblikket ikke understøttes i browsere.

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

Målet med ”Matches Any” -vælgeren (med alle dets navne) er at gøre komplekse grupperinger af vælgere lettere at skrive.

Syntaks

/* 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, er det ikke ligesom CSS forbehandling?

Forenkling af vælgere med :is()svarer faktisk til, hvordan CSS-forprocessorer håndterer indlejrede 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 pas på! Forprocessorer, som Sass, “udruller” dine indlejrede regler til en liste over letforståelige vælgere. :is()vil håndtere specificitetsregler lidt anderledes:

Specificitet er interessant

Ifølge CSS4 Working Draft:

Specificiteten af: er () pseudoklassen erstattes af specificiteten af ​​dens mest specifikke argument. Således har en vælger skrevet med: is () ikke nødvendigvis ækvivalent specificitet til den ækvivalente vælger skrevet uden: er ().

Det betyder, at specificiteten af :is()automatisk opgraderes til det mest specifikke emne på listen over argumenter:

/* 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`! */

Browsersupport

Vi hentydede til dette tidligere, men :is()har ingen browsersupport i øjeblikket. Det blev introduceret i Editorens udkast 1 til CSS Selectors niveau 4-specifikation. Det betyder, at ting stadig bliver formet, hvilket gør det lidt tidligt for browsere at samle sig om et koncept som dette.

Når det er sagt, har vi god browsersupport i form af :matches(med leverandørpræfiks :anyudfyldt nogle huller) til den generelle funktionalitet. Og selvfølgelig :noter der en anden pseudoklasse, der kan hjælpe med matchning.

Hvad der er interessant at bemærke er, at det :is()blev introduceret, hvorefter :matchesdet blev introduceret efter :any. Det er som om :anydet bliver erstattet af :matcheshvilket bliver erstattet af :is(), med detaljerne undervejs. Altid pænt at se, hvordan disse ting udvikler sig.

For at få maksimal understøttelse af "Matches-Any" kræves brug af en blanding af de historiske navne, da browserhåndtering i øjeblikket er en blanding af leverandørpræfikser og eksperimentelle indstillinger på dette tidspunkt.

/* 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 eksemplerne på pennen på: enhver pseudoklasse af CSS-Tricks (@ css-tricks) på CodePen.

Relaterede

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

Ressourcer

  • David Barons blogindlæg, der forklarer, hvorfor han tilføjede :-moz-anystøtte til Gecko
  • MDN-dokumentation
  • CSS Selectors Level 4 Specification (Editor's Draft 1): Specifikationen, der introducerer :is()pseudoklassen.
  • Mød Pseudo Class Selectors: CSS-Tricks indlæg, der beskriver, hvordan pseudoklasser fungerer.