: er () - CSS-triks

Anonim

:is() er det nåværende navnet på "Matches-Any" pseudoklassen i CSS4-arbeidsutkastet.

Opprinnelig ble denne pseudoklassen navngitt :any()og implementert med begrenset leverandørspesifikk støtte:

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

:matches()Pseudoklassenavnet “Matches-Any” ble deretter endret til i tidlige versjoner av CSS4-arbeidsutkastet, med tilleggsstøtte (ufullstendig) gitt til noen nettlesere.

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

Endelig har det nåværende arbeidsutkastet gitt denne pseudoklassen nytt navn :is(), som for øyeblikket ikke støttes i nettlesere.

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

Målet med "Matches Any" -velgeren (med alle navnene) er å gjøre komplekse grupperinger av velgere lettere å 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; )

Hei, er ikke det som CSS forhåndsbehandling?

Å forenkle velgerne med :is()ligner faktisk på hvordan CSS-forprosessorer håndterer nestede 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 pass opp! Forprosessorer, som Sass, “utruller” de nestede reglene dine til en liste over lett forståelige velgere. :is()vil håndtere spesifisitetsregler litt annerledes:

Spesifisitet er interessant

I henhold til CSS4 Working Draft:

Spesifisiteten til: er () pseudoklasse erstattes av spesifisiteten til det mest spesifikke argumentet. Dermed har ikke en velger som er skrevet med: is () nødvendigvis tilsvarende spesifisitet til den tilsvarende velgeren som er skrevet uten: is ().

Det betyr at spesifisiteten til :is()blir automatisk oppgradert til det mest spesifikke elementet i 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`! */

Nettleserstøtte

Vi hentydet til dette tidligere, men :is()har ingen nettleserstøtte for øyeblikket. Den ble introdusert i Editor's Draft 1 av CSS Selectors Level 4 Specification. Det betyr at ting fortsatt blir formet, noe som gjør det litt tidlig for nettlesere å samle seg om et konsept som dette.

Når det er sagt, har vi god nettleserstøtte i form av :matches(med leverandør-prefiks :anyfylt ut noen hull) for den generelle funksjonaliteten. Og selvfølgelig :noter det en annen pseudoklasse som kan hjelpe til med å matche.

Det som er interessant å merke seg er at det :is()ble introdusert etter :matcheshvilket ble introdusert etter :any. Det er som om :anydet blir erstattet av :matchessom blir erstattet av :is(), med detaljene som endres underveis. Alltid pent å se hvordan disse tingene utvikler seg.

For å få maksimal støtte for "Matches-Any" kreves det å bruke en blanding av de historiske navnene, ettersom nettleserhåndtering for øyeblikket er en mengde leverandørprefikser og eksperimentelle innstillinger på dette punktet.

/* 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 penneksemplene på: hvilken som helst pseudoklasse av CSS-Tricks (@ css-tricks) på CodePen.

I slekt

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

Ressurser

  • David Barons blogginnlegg som forklarer hvorfor han la :-moz-anyGecko til støtte
  • MDN-dokumentasjon
  • CSS Selectors Level 4 Specification (Editor's Draft 1): Spesifikasjonen som introduserer :is()pseudoklassen.
  • Møt Pseudo Class Selectors: CSS-Tricks innlegg som beskriver hvordan pseudoklasser fungerer.