En Ugyldig Pseudo-Velgeren er Lik en Hel Ignorert Selector

0
33

Kanskje du vet dette: dersom en del av en selector er ugyldig, er det her ugyldiggjør hele velgeren. For eksempel:

div span::rumpe {
bakgrunn: rød;
}

Selv om div er en helt gyldig selector, span:rumpe er ikke, og det hele selector er brutt — verken divs heller span::rumpe elementer på siden vil ha en rød bakgrunn.

Normalt er det ikke et veldig stort problem. Det kan til og med være enda nyttig, avhengig av situasjonen. Men det er nok av situasjoner hvor det har slags blitt en smerte i, eh, <code>: – rumpe.

Her er en klassisk:

::utvalget {
bakgrunn: lightblue;
}

For en lang tid, Firefox skjønte ikke at velgeren, og det kreves en leverandør prefiks (::-moz-utvalget) for å få samme effekt. (Dette er ikke lenger tilfelle i Firefox 62+, men du tar poenget.)

Med andre ord, det var ikke mulig:

/* ville bryte for alle */
::utvalget, ::-moz-utvalget {
bakgrunn: lightblue;
}

Det ville bryte for nettlesere som forstås ::valg og bryte for Firefox som bare forstås ::-moz-utvalget. Det gjorde det modne territorium for en preprosessor @mixin, det er sikkert.

Det var irriterende nok til at nettlesere har tilsynelatende løst det. I en samtale med Estelle Weyl, lærte jeg at dette blir endret. Hun skrev i MDN-dokumenter:

Vanligvis, hvis det er en ugyldig pseudo-element eller pseudo-klasse i i en kjede eller gruppe av velgere, hele selector listen er ugyldig. Hvis en pseudo-element (men ikke pseudo-klasse) har en -webkit – prefiks, Som av Firefox 63, Blink, Webkit og Gecko nettlesere antar det er en gyldig, ikke forhindre velgeren listen.

Dette er ikke for alle selector; det er spesielt for pseudo-elementer. Det er dobbelt kolon (::).

Her er en test:

Se Penn Ignorert Ugyldig Selecotrs??? ved Chris Coyier (@chriscoyier) på CodePen.

Jeg vil kalle det en positiv endring.