Ein super seltsamer CSS-Bug, der die Textauswahl beeinflusst

Sie wissen, wie Sie ausgewählten Text (bis zu einem gewissen Grad) mit ::selection stylen können? Nun, Jeff Starr hat aufgedeckt einen verdammt seltsamen CSS-Bug.

Wenn Sie

Lassen Sie den Selektor leer
Verlinken Sie es aus einer externen Stylesheet (anstatt einem <style>-Block)

Beim Markieren von Text wird überhaupt kein Stil angewendet. 😳😬😕

Mit anderen Worten, wenn Sie <link rel="stylesheet" ...> einige CSS, die diese leeren Selektoren enthalten

::-moz-selection {
}
::selection {
}

Dann scheint Text nicht auswählbar zu sein. Man kann den Text tatsächlich immer noch auswählen, also ist es ein bisschen so, als hätte man ::selection { background: transparent; } anstelle von user-select: none; verwendet.

Die Tatsache, dass es in den meisten Browsern (Safari ist eine seltene Ausnahme) so funktioniert, lässt es so aussehen, als sei es so spezifiziert, aber ich nenne es einen Bug. Ein Selektor ohne Eigenschaften darin sollte im Wesentlichen ignoriert werden, anstatt etwas so drastisches zu tun.

Jeff hat eine Demo gemacht. Ich habe auch eine gemacht, um sie zu bestätigen.

Siehe den Stift
Unsichtbarer Textauswahl-Bug von Chris Coyier (@chriscoyier)
auf CodePen.

Kommentare

Avellar

# 11. November 2019

Scheint wirklich ein Bug zu sein, die Spezifikation sagt

Der UA sollte die OS-Standard-Hervorhebungsfarben für ::selection verwenden, wenn weder color noch background-color vom Autor angegeben wurden.

jech

# 11. November 2019

gleicher Effekt, wenn Sie haben

body{
   background: black;
}
::selection {
    background: black;
}

Tyler

# 12. November 2019

Es erscheint auch in Chrome auf Android so.

Konstantin

# 12. November 2019

Dieses Pseudo-Element hat mehr seltsame Nebenwirkungen, als man denken könnte. Zum Beispiel entspricht es nicht den Spezifitätsregeln, wie man es erwarten würde.

Code-Beispiel

Ilya Streltsyn

Permalink zum Kommentar# 13. November 2019

Ich sehe nichts falsch am Verhalten Ihres Beispiels. Stile, die direkt auf das Element angewendet werden, überschreiben immer die von den Eltern geerbten, unabhängig davon, wie sie auf dieses Elternteil angewendet wurden. Der einzige Teil, der vielleicht nicht sehr intuitiv ist, ist, dass ::selection des verschachtelten Elements als Kind des ::selection des Elternelements betrachtet wird.
Konstantin

Permalink zum Kommentar# 13. November 2019

@Ilya Streltsyn,
dies könnte Ihnen helfen zu verstehen, was ich meine. Außerdem gibt es einen neuen Bug in Chromium bezüglich dieses gleichen Verhaltens.

Adam Coti

# 12. November 2019

In Edge wird der Text in der Standardfarbe sichtbar hervorgehoben.

# 12. November 2019

ZUR INFO

Funktioniert wie erwartet (Auswahl wählt aus) in

Safari: 11.1.2 (11605.3.8.1)
Mac: 10.11.6 (El Capitan)

Benjamin Solum

# 12. November 2019

Gute zeitliche Abstimmung des Artikels. Ich bin gerade selbst darauf gestoßen bei einem persönlichen Projekt. Soweit ich weiß, tritt das Problem auch auf, wenn Sie eine Eigenschaft mit einem ungültigen Wert angeben. Nämlich

::-moz-selection {
  background: selectionColor;
}

::selection {
  background: selectionColor;
}

Man muss aufpassen, wenn man Snippets in VS Code verwendet :)

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.