Vielleicht kennen Sie diesen: Wenn ein Teil eines Selektors ungültig ist, macht er den gesamten Selektor ungültig. Zum Beispiel
div, span::butt {
background: red;
}Auch wenn div ein absolut gültiger Selektor ist, ist span:butt keiner, daher ist der gesamte Selektor ungültig – weder divs noch span::butt Elemente auf der Seite erhalten einen roten Hintergrund.
Normalerweise ist das kein riesiges Problem. Es kann je nach Situation sogar nützlich sein. Aber es gibt viele Situationen, in denen es eine echte Qual war, äh, :butt.
Hier ein Klassiker
::selection {
background: lightblue;
}Lange Zeit verstand Firefox diesen Selektor nicht und benötigte ein Vendor-Präfix (::-moz-selection), um denselben Effekt zu erzielen. (Dies ist in Firefox 62+ nicht mehr der Fall, aber Sie verstehen den Punkt.)
Mit anderen Worten, das war nicht möglich
/* would break for everyone */
::selection, ::-moz-selection {
background: lightblue;
}Das würde für Browser, die ::selection verstanden, und für Firefox, das nur ::-moz-selection verstand, fehlschlagen. Das machte es zu einem idealen Gebiet für ein @mixin in einem Präprozessor, das ist sicher.
Hier noch ein Ding.
/* For navigation with submenus */
ul.submenu {
display: none;
}
ul.menu li:hover ul.submenu,
ul.menu li:focus ul.submenu,
ul.menu li:focus-within ul.submenu {
display: block;
}
/* Oh no! We've broken all menu functionality in IE 11,
because it doesn't know what `:focus-within` is so it
throws out the entire selector */Dieses Verhalten ist so ärgerlich, dass die Browser es anscheinend behoben haben. Im Gespräch mit Estelle Weyl erfuhr ich, dass dies geändert wird. Sie schrieb in den MDN-Dokumenten
Im Allgemeinen ist die gesamte Selektorliste ungültig, wenn ein ungültiges Pseudo-Element oder eine ungültige Pseudoklasse innerhalb einer Kette oder Gruppe von Selektoren vorhanden ist. Wenn ein Pseudo-Element (aber keine Pseudoklasse) ein
-webkit-Präfix hat, nehmen Browser mit Firefox 63, Blink, Webkit und Gecko es als gültig an und machen die Selektorliste nicht ungültig.
Das gilt nicht für jeden Selektor; es gilt speziell für Pseudo-Elemente. Das heißt, für Doppelpunkte (::).
Hier ist ein Test
Ich würde das als positive Veränderung bezeichnen.
Ich habe Shoptalk mit Google Podcasts gehört und Sie sprechen genau dieses Thema an; kurz darauf empfiehlt Google Assistant diesen Artikel. So nützlich und doch so erschreckend.
Gute Nachrichten!
Ich bin in letzter Zeit ein paar Mal auf dieses Problem gestoßen, als ich :focus-within verwendet habe. Funktioniert in modernen Browsern einwandfrei, da es unterstützt wird, aber in älteren Browsern (IE schlägt wieder zu!). Nicht schwer zu beheben, aber definitiv nervig. Ich wünschte, sie würden es ändern, damit Browser ungültige Selektoren einfach ignorieren, anstatt fehlerhaft zu sein. :/
Ich bin vor ein paar Monaten auf ein ähnliches Problem mit Firefox gestoßen. Früher galt ::webkit-präfixierter Selektor als ungültig, und somit wurde der gesamte Selektor und die darin enthaltenen Regeln ignoriert. Das war besonders ärgerlich, wenn Tools wie Autoprefixer verwendet wurden, die Präfixe für Sie hinzufügten und Ihre Stile in Firefox brachen.
(Übrigens haben sie gute Arbeit geleistet, um das Problem zu beheben, seit ich es in ihrem Bugzilla gemeldet habe, und ich schätze, es wurde in Version 63 des Browsers behoben.)
Es ist wahrscheinlich erwähnenswert, dass es sich nicht um *irgendein* Pseudo-Element handelt (noch nicht), sondern nur um
-webkit-präfixierte Pseudo-Elemente. Dies geschieht aus Kompatibilitätsgründen, da WebKit- und Blink-basierte Browser diese Pseudo-Elemente auf diese Weise behandelt haben und viele Websites auf diesem Verhalten beruhen.Es gibt einen Vorschlag, diese Regel umzukehren und alle Pseudo-Elemente (und wahrscheinlich sogar Pseudoklassen) als potenziell gültige Selektoren zu behandeln, *außer* denen, die häufig für Browser-Selektor-Hacks verwendet wurden. Aber dieser Vorschlag schien nicht genug Zugkraft zu bekommen...