CSS-Pseudoelemente der nächsten Generation

W3C Pseudo-Elements Module Level 4

Das W3C hat den Arbeitsentwurf für die CSS-Pseudoelemente überarbeitet. Ich war gespannt, welche Pseudoelemente wir in Zukunft benutzen können und habe einmal reingeschaut. Neben klassischen, schon lange bekannten Pseudoelementen findet sich im Arbeitsentwurf Nützliches wie ::selection oder ::placeholder, die bereits (teilweise in leicht modifizierter Variante) in den aktuellen Browsern funktionieren.

Im meinen Beitrag geht es neben diesen neuen Pseudolementen außerdem um die klassischen Pseudoelemente, um doppelte und einfache Doppelpunkte und um die Darstellung der Pseudoelemente in Browserentwicklertools.

Pseudoelemente in CSS 2.1

Schon in CSS 2.1 gab es Pseudoelemente, und zwar vier:

  • :first-letter zur Auswahl des ersten Buchstabens
  • :first-line zur Auswahl der ersten Zeile
  • :before und :after, um Inhalte vor bzw. nach dem Element zu ergänzen

Pseudoelemente in CSS3

In CSS3 (genau genommen in der Spezifikation „Selectors Level 3“, die seit 29.9.2011 offiziell verabschiedet ist) kamen keine neuen Pseudoelemente hinzu. Neu ist in CSS3 nur die Syntax von Pseudolementen. Um Pseudoelemente von Pseudoklassen zu unterscheiden, werden Pseudoelemente mit doppeltem Doppelpunkt geschrieben und Pseudoklassen mit einfachem. In CSS3 schreibt man also:

::first-letter

::first-line

::before und ::after

Pseudoklassen wie :hover oder auch :nth-child() werden hingegen weiterhin mit einfachem Doppelpunkt geschrieben.

Der (inzwischen wirklich alte) Internet Explorer 8 unterstützt zwar alle klassischen Pseudoelemente, allerdings nur in der Syntax mit einfachem Doppelpunkt. Er versteht also :before, aber nicht ::before. Deswegen verwende ich üblicherweise immer nur die einfachen Doppelpunkte bei den klassischen Pseudoelementen.

Klassische Pseudolemente in den Browserentwicklertools

Chrome und Firefox (seit Version 35) zeigen die Pseudoelemente zur Erzeugung von Inhalten direkt im HTML-Code.

::before in den Firefox-Entwicklertools

Und dort – unabhängig davon, wie es im Dokument steht, mit doppelten ::

Die anderen Pseudoelemente erscheinen normal im CSS-Part.

Am Rande: Es gibt jede Menge Einsatzmöglichkeiten für Pseudoelemente zur Erzeugung von Inhalten. Am häufigsten werden diese aber sicher zum Clearen von Floats verwendet (beispielsweise im so genannten Microclearfix-Hack).

Neuerungen im Level 4 bei den Pseudoelemente

Im Level 4 gibt es ein paar Neuerungen: Man kann die durch den Benutzer ausgewählten Inhalte formatieren, den Platzhaltertext von Formularen formatieren und die Art bestimmen, in der Rechtschreibfehler angezeigt werden.

::selection – Auswahl formatieren

Über das Pseudolement ::selection kann man den gerade vom Benutzer markierten Inhalt hervorheben.

Das funktioniert recht gut in den modernen Browsern: Chrome und Safari können es, der Internet Explorer unterstützt es ab Version 9, der Firefox kann es mit Präfix -moz-; allerdings funktioniert es nicht unter iOS.
Damit benötigt man folgenden Code (da der IE8 das sowieso nicht unterstützt, sind die doppelten Doppelpunkte hier auf jeden Fall angesagt):

::-moz-selection {
color: #00FF39;
background-color: #201651;
}
::selection {
color: #00FF39;
background-color: #201651;
}

Auswahl formatieren

Links normale Standardhervorhebung bei Markierung, rechts mit angepassten Farben

Achtung, es funktioniert nicht, wenn man diese Regeln zusammenfasst, da wenn der Browser auf eine ungültiges Pseudoelement stößt, den Rest ignoriert:

/* GEHT NICHT */
::-moz-selection, ::selection {
color: #00FF39;
background-color: #201651;
}

Dass das Pseudoelement ::selection eine so gute Browserunterstützung hat, liegt daran, dass es schon einmal in einer Vorversion der Selektoren Level 3 auftauchte.

Zu beachten ist allerdings, dass nicht alle CSS-Eigenschaften bei der Formatierung der Auswahl verwendet werden können, genau genommen nur folgende: color, background-color, cursor, outline, text-decoration, text-emphasis-color und text-shadow.

Außerdem verhalten sich die Browser unterschiedlich, wenn das Fenster mit dem ausgewählten Text den Fokus verliert. Im Firefox sieht der ausgewählte Text dann wieder so aus wie ohne Formatierung; im Chrome und Internet Explorer bleibt die gewählte Formatierung.

::placeholder – Platzhaltertext formatieren

HTML5 erlaubt es, Platzhaltertexte für Eingabefelder in Formularen anzugeben.

<input type="email" placeholder="name@domain.de" name="email" id="email" />

Das Aussehen dieser Platzhaltertexte kann über ::placeholder gestaltet werden.

::placeholder {
color: red;
}

::placeholder ist der vom W3C vorgeschlagene Name für dieses Pseudolement. In den Browsern ist es anders implementiert, deswegen muss man es folgendermaßen angeben:

::-webkit-input-placeholder {
color: red;
}
::-moz-placeholder {
color: red;
}
:-ms-input-placeholder {
color: red;
}
::placeholder {
color: red;
}

Rot formatierter Platzhaltertext

Grammatik- und Rechtschreibfehler hervorheben

Aktuelle Browser haben eine Rechtschreibprüfung integriert, die sich durch spellcheck="true" aktivieren lässt.

<textarea rows="10" cols="30" name="kommentar" id="kommentar" spellcheck="true"></textarea>

Wie Grammatikfehler und Rechtschreibfehler hervorgehoben werden sollen, soll ebenfalls über Pseudolemente möglich sein. Hierfür ist ::spelling-error (Rechtschreibfehler) und ::grammar-error (Grammatikfehler) vorgesehen.

::spelling-error { color: orange; }
::grammar-error { color: red; }

Derzeit funktioniert das allerdings noch in keinem Browser. Ich bin nicht ganz so überzeugt, ob es richtig ist, wenn sich das gestalten lässt: Normalerweise hat man sich ja an die Anzeige der Fehler gewöhnt und wahrscheinlich ist es irritierend, wenn das auf einer Webseite ganz anders aussieht. Aber wahrscheinlich gab es dasselbe Argument ursprünglich auch mal gegen die Verwendung der Pseudoklassen :visited und Co. 😉

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>