Ongeldige Pseudo Selector is Gelijk aan een Hele Genegeerd Kiezen

0
18

Misschien kent u deze: indien een onderdeel van een selector is ongeldig is, teniet zou doen de hele selector. Bijvoorbeeld:

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

Hoewel div is een perfect geldige kiezen, span:kont niet, dus de hele selector is ongeldig, noch divs noch span::kont-elementen op de pagina een rode achtergrond.

Normaal gesproken is dat niet een vreselijk groot probleem. Het kan ook nog nuttig zijn, afhankelijk van de situatie. Maar er zijn tal van situaties waar de soort is een pijn in de, uh, <code>:kont.

Hier is een klassiek:

:: {
background: lightblue;
}

Voor een lange tijd, Firefox niet begrijpen dat kiezen, en vereist een vendor prefix (::-moz-selectie) om hetzelfde effect te krijgen. (Dit is niet langer het geval in Firefox 62+, maar neem je het punt.)

In andere woorden, dit was niet mogelijk:

/* zou breken voor iedereen */
::selectie, ::-moz-selectie {
background: lightblue;
}

Dat zou breken voor browsers die begrepen ::selectie en breken voor Firefox die uitsluitend verstaan:-moz-selectie. Het maakte het rijpe gebied voor een preprocessor @mixin, dat is zeker.

Dat was vervelend genoeg dat browsers hebben blijkbaar vast. In een gesprek met Estelle Weyl, heb ik geleerd dat dit wordt veranderd. Ze schreef in de MDN-documenten:

Over het algemeen, als er een ongeldige pseudo-element of pseudo-class binnen in een keten of groep van kiezers, de hele selector lijst is ongeldig. Als een pseudo-element (maar niet pseudo-class) heeft een -webkit prefix, Zoals van Firefox 63, Blink, Webkit en Gecko browsers aannemen dat het geldig is, niet dat de kiezer lijst.

Dit is niet voor enig kiezen; deze is speciaal voor pseudo-elementen. Dat dubbele dubbele punten (::).

Hier is een test:

Zie de Pen Genegeerd Ongeldige Selecotrs??? door Chris Coyier (@chriscoyier) op CodePen.

Ik noem dat een positieve verandering.