CSS: Mit ::selection markierten Text hervorheben
26.01.2010 in: CSS und Webdesign • 2 Kommentare
Letzte Änderung: 03.06.2010, 12:44 Uhr.
Das Pseudo-Element ::selection stand lange im Entwurf für die CSS3-Selektoren. Das ursprüngliche Ziel war: Die normale Gestaltung des Browsers für markierte Elemente sollte mit CSS ausgedrückt und überschrieben werden können.
Seit dem 10. März 2009 jedoch fehlt es, weil es zu schlecht definiert war und es zu aufwendig gewesen wäre, den Text konsensfähig zu verbessern.
Der alte Text im Wortlaut:
The ::selection pseudo-element applies to the portion of a document that has been highlighted by the user. This also applies, for example, to selected text within an editable text field. This pseudo-element should not be confused with the :checked pseudo-class (which used to be named :selected)
Although the ::selection pseudo-element is dynamic in nature, and is altered by user action, it is reasonable to expect that when a UA re-renders to a static medium (such as a printed page, see CSS21) which was originally rendered to a dynamic medium (like screen), the UA may wish to transfer the current ::selection state to that other medium, and have all the appropriate formatting and rendering take effect as well. This is not required — UAs may omit the ::selection pseudo-element for static media.
These are the CSS properties that apply to ::selection pseudo-elements: color, background, cursor (optional), outline (optional). The computed value of the 'background-image' property on ::selection may be ignored.
Ein paar Lücken springen sofort ins Auge:
- Was soll eine »portion of a document« sein? Wenn ich beispielsweise im Zitat den unteren Teil des ersten Absatzes markiere und den oberen des zweiten: Wie sieht dann die Box des Pseudo-Elements aus? Oder sind es zwei Boxen? Was erwischt p::selection?
- Wenn im markierten Text Generated Content auftaucht: Ist der dann Teil des Dokuments?
- Kann der Selektor
::selection + ::beforezutreffen? Und::selection + ::selection?
Dennoch haben Opera und Webkit den Selektor implementiert, und Mozilla immerhin eine Variante mit dem -moz-Präfix.
Ich empfehle den Einsatz immer dann, wenn heller Text auf dunklem Hintergrund steht. Die normale Markierung kann der Leser sonst vielleicht schlecht oder gar nicht erkennen.
Beispiel:
.dark ::selection
{
color: #000;
background: #ff9;
}
.dark ::-moz-selection
{
color: #000;
background: #ff9;
}
Wir können die beiden Varianten leider nicht bündeln, denn der Browser muß eine Regel ignorieren, wenn er einen Selektor nicht erkennt. Mehr als Vorder- und Hintergrundfarbe kann man derzeit in keinem Browser ändern. Reicht ja auch.
Einen kurzen Test auf die oben genannten Lücken sollte man sich schon gönnen, aber im Groben kann nichts richtig schiefgehen.
Sehr schön, danke. ☺
Cool, es gibt immer wieder noch etwas zu entdecken.