CSS 2.1: Das Pseudo-Element `:first-line`

Allgemeines:

Nach CSS 2.1 bringt das Pseudoelement :first-line bestimmte Formatierungen an der ersten Zeile eines Block- Level- Elementes an.

Die Länge der ersten Zeile eines Absatzes ist von vielen Faktoren abhängig, dazu gehören u. a Bildschirmbreite, Schriftgröße oder Papierformat.

Ein Beispiel: Angenommen, beim Ausdruck einer Seite ist die erste Zeile der Druckseite länger als die erste Zeile auf dem Bildschirm. Dann werden die notierten CSS-Regeln auf die gesamte gedruckte Zeile angewandt, nicht nur auf die Worte, die am Bildschirm in der ersten Zeile gestanden haben.

Das Pseudoelement :first-line ist nur auf Block- Level- Elemente anwendbar, verhält sich jedoch mit einigen Ausnahmen wie ein Inline- Level- Element.

Die Eigenschaften, die mit :first-line für ein Element deklariert sind, müssen an der ersten Textzeile dieses Elementes immer angebracht werden. Dies gilt auch dann, wenn der Text sich innerhalb eines Nachfahrenelementes befindet (siehe zweites Beispiel unten).

Standardstreue Browser müssen mindestens die folgenden Eigenschaften auf Pseudoelemente :first-line anwenden, alle anderen Eigenschaften können auch angewandt werden:

font-Eigenschaften,
color-Eigenschaften,
background-Eigenschaften,
word-spacing,
letter-spacing,
text-decoration,
vertical-align,
text-transform,
line-height.

Das Pseudoelement :first-letter hat in der Kaskade Vorrang vor :first-line.

Eine gemeinsame Einschränkung gilt für alle Pseudoelemente: Sie dürfen nur am Ende aller Selektoren notiert werden, sie müssen also als letztes vor der öffnenden geschweiften Klammer stehen. Ebenfalls nicht erlaubt ist die gleichzeitige Verwendung mehrerer Pseudoelemente im selben Selektor.

Code-Beispiele:

Allgemeines Beispiel:

p:first-line { font-variant: small-caps; }

Beispiel für Auswirkung auf Nachfahrenelement:

div:first-line { font-weight: bold; }

Soll-Ergebnis:

Test
Test

Erlaubte und nicht erlaubte Codierungen:

h1 + p:first-line { font-variant: small-caps; } /* Erlaubt. */

h1:first-line + p { font-variant: small-caps; } /* Verboten! */

p:hover:first-letter { color: navy; } /* Erlaubt. */

p:first-letter:hover { color: navy; } /* Verboten! */

p:first-line:first-letter { color: navy; } /* Verboten! */

p em:first-line { font-variant: small-caps; } /* Verboten! */

Browserunterstützung

Das Pseudo-Element first-line wird größtenteils von allen modernen Browsern unterstützt, mit kleinen Einschränkungen:

: Die Eigenschaft vertical-align wird innerhalb von Fließtext nicht zusammen mit :first-line angewandt. Auch Text, der sich innerhalb eines Nachfahrenelementes befindet, wird nicht formatiert.
IE/Win 5.0: IE/Win erkennt dieses Pseudo-Element erst ab Version 5.5.
Opera 9: Opera bis Version 9 produziert im Zusammenhang mit der Eigenschaft letterspacing gelegentlich Buchstabensalat am Zeilenende.
Konqueror 3.5: Konqueror wendet die Eigenschaft text-transform nicht auf dieses Pseudo- Element an. Dagegen bringt er die deklarierten Eigenschaften auch an Inline- Elementen an.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Besonderheiten im Medientyp `handheld`:

Dieses Pseudo-Element ist nicht Teil des Standards CSS Mobile Profile 1.0. Auch von einer Umsetzung durch einzelne Mobilgeräte ist nichts bekannt.

Wechselwirkungen:

font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height

Ausblick:

CSS3 wird als auffälligste Neuerung den Doppelcolon vor den Bezeichnungen einführen (::first-line). Dies dient vor allem zur Unterscheidung der Pseudoelemente von den Pseudoklassen.