CSS 2.1 ::Referenz ::Pseudo-Elemente

CSS 2.1: Das Pseudoelement :first-letter

Allgemeines:

Dieses Pseudoelement selektiert das erste Zeichen der ersten Zeile des aktuellen Elementes. Es ist damit möglich, dieses Zeichen durch seine typografische Formatierung besonders herauszustellen. Das Pseudoelement :first-letter kann für alle Elemente, die Text enthalten, definiert werden. Ein Anwenderprogramm kann Zeilenhöhe, Breite und Höhe des Elements abhängig von der Form des Zeichens bestimmen, anders als es im Line- Box- Modell definiert wird.

Das Pseudoelement :first-letter wird stets wie ein Inline- Level- Element behandelt, wenn float:none deklariert ist. Anderenfalls wird es wie ein floatiertes Element behandelt.

Pseudo-Elemente :first-letter müssen eine Reihe von Bedingungen erfüllen:

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

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:

P { font: 1em sans-serif; } H1 + P:first-letter { font: italic bold 3em serif; float: left }

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

h1.titelzeile:first-letter { color: navy; } /* Erlaubt. */

h1:first-letter.titelzeile { color: navy; } /* Verboten! */

Browserunterstützung

Das Pseudo-Element :first-letter wird von den modernen Browsern in Großen und Ganzen unterstützt, mit folgenden Einschränkungen:

IE/Win 5.0
IE/Win erkennt dieses Pseudo-Element erst ab Version 5.5.
IE 7
  • IE 7 honoriert die Eigenschaft float nicht in Verbindung mit der Pseudoklasse :first-letter.
  • Bestimmte Buchstabenkombinationen an Textbeginn, wie 'Ae' oder das holländische 'Ij' erkennt er nicht.
  • Da IE 7 noch keinen generierten Inhalt kennt, kann er auch das erste Zeichen daraus nicht selektieren.
  • Formatierungen mit margin, border oder padding werden nicht wie an Inline- Level- Elementen behandelt, sondern geraten in den Bereich der nächsten Zeile. Zudem werden sie beim Scrollen durch die folgenden Zeile abgeschnitten. Nach Öffnen und Schließen eines anderen Fensters werden sie vollständig dargestellt.
Firefox 1.5
Auch die Gecko-Engine erkennt noch nicht zusammen gehörende Buchstabenkombinationen am Anfang des Absatzes.
Opera 9
Auch bei Opera bis Version 9 können die Formatierungen mit margin, border oder padding mit der nächsten Zeile überlappen. Dieser Browser erkennt ebenfalls noch nicht zusammen gehörende Buchstabenkombinationen am Anfang des Absatzes. Zudem selektiert er das erste Zeichen nicht in generiertem Inhalt.
Konqueror 3.5
Formatierungen mit margin, border oder padding können in die folgenden Zeile hineinragen. Zusammen hängende Buchstabenkombinationen am Textbeginn werden auch hier nicht selektiert. Bei Formatierung von generiertem Inhalt mit :first-letter werden einige Eigenschaften des zugehörigen Elementes übernommen.

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, text-decoration, vertical-align, text-transform, line-height, margin, padding, float, text-shadow, clear

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.

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

 TOP

Die URL dieser Seite ist: thestyleworks.de/ref/pe_first-letter.shtml
Gedruckt am Samstag, dem 24. Juni, 2017.
© Copyright All Contents 2002- 2017 K. Langenberg.
Commercial Use prohibited.


Notizen: