En Ogiltig Pseudo-Väljare är Lika med en Hel Ignoreras Väljare

0
31

Kanske du vet detta: om någon del av en väljare är ogiltig, det går emot hela väljare. Till exempel:

div, span::butt {
background: red;
}

Även om div är ett fullt giltigt väljare, span:rumpa är inte, och därmed hela väljare är ogiltiga — varken divar eller p::butt element på sidan som kommer att ha en röd bakgrund.

Normalt är det inte ett fruktansvärt stort problem. Det kan även vara ännu användbara, beroende på situationen. Men det finns massor av situationer där det har liksom varit en smärta i, öh, <code>:butt.

Här är en klassiker:

::selection {
bakgrund: ljusblå;
}

Under en lång tid, Firefox inte förstår att väljaren, och det krävs en säljare prefix (::-moz-val) för att få samma effekt. (Detta är inte längre fallet i Firefox 62+, men du tar poängen.)

Med andra ord, detta var inte möjligt:

/* skulle bryta för alla */
::urval, ::-moz-urval {
bakgrund: ljusblå;
}

Det skulle bryta för webbläsare som förstås ::urval och bryta för Firefox som bara förstås ::-moz-urval. Det gjorde det mogna territorium för en preprocessor @mixin, det är säkert.

Det var irriterande nog att webbläsare har tydligen fixat det. I ett samtal med Estelle Weyl, lärde jag mig att detta håller på att ändras. Hon skrev i MDN-dokument:

I allmänhet, om det är ett ogiltigt pseudo-element, eller pseudo-klass i i en kedja eller grupp av väljare, hela selector listan är ogiltig. Om en pseudo-element (men inte pseudo-klass) har en -webkit – prefix, Som av Firefox 63, Blink, Webkit och Gecko webbläsare antar att det är giltigt, inte ogiltigförklara selector listan.

Detta är inte för alla väljare, det är speciellt för pseudo-element. Det är, dubbla kolon (::).

Här är ett test:

Se Pennan Ignoreras Ogiltig Selecotrs??? av Chris Coyier (@chriscoyier) på CodePen.

Jag skulle kalla det en positiv förändring.