Pseudoelemente in CSS
Einige sehr interessante Möglichkeiten zur Formatierung von Elementen auf einer Website bieten die Selektoren aus der Gruppe der Pseudoelemente. Diese kommen an sich in der HTML-Struktur nicht als Elemente vor und werden daher Pseudoelemente genannt. Man kann mit ihnen den ersten Buchstaben oder die erste Zeile formatieren. Außerdem kann man Inhalte vor und nach einem Element per CSS einfügen. Ab CSS3 sind weitere Pseudoelemente hinzugekommen, sodass man einen markierten Bereich im Browser, Rechtschreib- und Grammatikfehler und Platzhalter-Texte in Eingabefeldern formatieren kann. Folgende Pseudoelemente können verwendet werden.
- First-Letter Pseudoelement (1. Zeichen)
- First-Line Pseudoelement (1. Zeile)
- Before Pseudoelement (Davor)
- After Pseudoelement (Danach)
Ab CSS3
- Selection Pseudolement (Auswahl)
- Spelling-Error Pseudoelement (Rechtschreibfehler)
- Grammar-Error Pseudoelement (Grammatikfehler)
- Placeholder Pseudoelement (Platzhalter)
Die Pseudoelemente lassen sich für viele Zwecke einsetzen. Beispielsweise werden in manchen Büchern die ersten Buchstaben von Kapiteln groß dargestellt. Analog dazu könnte man auf Websites das First-Letter Pseudoelement verwenden. Manchmal ist es gewollt, die erste Zeile etwas anders darzustellen. Das könnte man mit dem First-Line Pseudoelement steuern.
Die beiden Pseudoelemente Before und After können für die Generierung von Inhalten eingesetzt werden. Das Besondere dabei ist, dass die generierten Inhalte nicht Bestandteil des normalen HTML-Codes sind, da sie über CSS generiert werden. Manche Entwickler verwenden das, um z.B. auf der Website eine gegen Spambots geschützte E-Mailadresse anzuzeigen. Da Spambots normalerweise nicht darauf programmiert sind, CSS-Codes auszuwerten sondern HTML-Code, hätte man die E-Mailadresse auf diese Art und Weise zumindest gegen viele Spambots geschützt.
Es sind jedoch auch andere Einsatzmöglichkeiten denkbar. Man könnte z.B. auf Websites für Mobilgeräte ein Icon für die Navigation anzeigen lassen. Bei CSS-Stilen für Druckmedien könnte man eine Copyright-Zeile generieren lassen, die beim normalen Betrachten der Website auf den Bildschirmen nicht sichtbar ist. Weitere Einsatzmöglichkeiten wären z.B. Anführungszeichen bei Zitaten, Pfeil-Icons bei Texten, dekorative Überschriften etc. Die Möglichkeiten sind sehr vielfältig.
Ab CSS3
Mit CSS3 sind einige neue Pseudoelemente hinzugekommen. Mit dem Pseudoelement Selection lassen sich Formatierungen auf den Bereich anwenden, den man im Browser markiert. Mit den Pseudoelementen Spelling-Error und Grammar-Error sollen die Texte bei Rechtschreib- und Grammatikfehler formatiert angezeigt werden können, die vom Benutzer eingegeben werden, z.B. in Formularfeldern oder bei editierbaren Inhalten, die ab HTML5 möglich sind. So ist die Anzeige der Rechtschreib- und Grammatikfehler nicht nur auf die roten Wellenlinien beschränkt, die normalerweise unterhalb der fehlerhaften Wörter angezeigt werden. Ebenfalls neu in HTML5 ist das Placeholder-Attribut für Formularfelder. Mit dem Pseudoelement Placeholder lassen sich diese Platzhalter-Texte formatieren.
Schreibweise mit einfachem oder doppeltem Doppelpunkt
Vor CSS3 wurden Pseudoelemente mit einem einfachen Doppelpunkt geschrieben. Ab CSS3 sehen die Spezifikationen den doppelten Doppelpunkt vor, damit man eine bessere Unterscheidung zu den Pseudoklassen hat, die nach wie vor mit einem einfachen Doppelpunkt geschrieben werden. Jedoch sehen die CSS3-Spezifikationen vor, dass ein einfacher Doppelpunkt bei den Pseudoelementen ausreicht, die es bereits vor CSS3 gab.
Einige ältere Browser, z.B. der IE 8 und davor, kennen keinen doppelten Doppelpunkt. Um eine möglichst breite Abdeckung der Browser zu erreichen, könnte man die Pseudoelemente, die es bereits vor CSS3 gab, mit einem einfachen Doppelpunkt schreiben. Die ab CSS3 neuen Pseudoelemente müssen dagegen gemäß den Spezifikationen mit doppeltem Doppelpunkt geschrieben werden. Außerdem werden sie bei Browsern, die nur den einfachen Doppelpunkt kennen, sowieso nicht unterstützt und es wäre nutzlos, diese mit einfachem Doppelpunkt zu schreiben. Die Einfachselektoren, die den Pseudoelementen in der Regel vorangestellt werden, können auch mit Kombinatoren kombiniert werden.
First-Letter Pseudoelement
Mit dem First-Letter Pseudoelement wird der erste Buchstabe in einem Element angesprochen und kann anders als der übrige Text formatiert werden. Beispielsweise ist es häufig erwünscht, den ersten Buchstaben in bestimmten Elementen in größerer Schrift oder andersfarbig darzustellen. Hierfür kann das First-Letter Pseudoelement verwendet werden.
Schreibt man das First-Letter Pseudoelement ohne einen Selektor, gelten die Stile für alle Elemente innerhalb einer HTML-Seite. Mit dem folgenden Codebeispiel würde in allen Elementen der erste Buchstabe in der Schriftgröße 14px dargestellt werden.
::first-letter { font-size: 14px; } In der Regel ist es nicht gewollt, den ersten Buchstaben aller Elemente zu formatieren. Daher wird das First-Letter Pseudoelement mit einem Einfachselektor verknüpft, sodass die Stile nur für die Elemente gelten, die mit dem Einfachselektor angesprochen werden. Einige Beispiele mit verschiedenen Einfachselektoren.
p::first-letter { font-size: 14px; }
.klasse::first-letter { font-size: 14px; }
#id-bezeichnung::first-letter { font-size: 14px; }
[title]::first-letter { font-size: 14px; }First-Line Pseudoelement
Mit dem First-Line Pseudoelement wird die erste Zeile in einem Element angesprochen und kann anders als der übrige Text formatiert werden. Die erste Zeile bezieht sich dabei auf den sichtbaren Bereich, der im Browser dargestellt wird. Verkleinert man z.B. das Browserfenster, werden weniger Zeichen angesprochen als beim breiteren Browserfenster. Das kann z.B. dafür verwendet werden, damit zwischen der ersten Zeile und dem Rest des Texts ein gewisser Abstand vorhanden ist.
Schreibt man das First-Line Pseudoelement ohne einen Selektor, gelten die Stile ebenfalls für alle Elemente innerhalb der HTML-Struktur. Das folgende Beispiel würde dafür sorgen, dass die erste Zeile aller Elemente eine Zeilenhöhe von 30px hätte.
::first-line { line-height: 30px; } Auch beim First-Letter Pseudoelement ist es in der Regel nicht gewollt, die erste Zeile aller Elemente anders zu formatieren und wird deshalb mit anderen Einfachselektoren verknüpft. Einige Beispiele.
p::first-line { line-height: 30px; }
.klasse::first-line { line-height: 30px; }
#id-bezeichnung::first-line { line-height: 30px; }
[title]::first-line { line-height: 30px; }Before Pseudoelement
Mit dem Before Pseudoelement kann man vor einem Element einen Inhalt per CSS generieren. Der generierte Inhalt ist technisch gesehen kein HTML-Inhalt. Das kann für vielfältige Zwecke verwendet werden. Beispielsweise lassen viele Entwickler ein Symbol auf der Seite anzeigen, die sie sonst direkt im HTML-Code eintragen müssten. So werden die Symbole, die nicht Teil des Inhalts sein sollen, davon getrennt.
Hierfür wird innerhalb der geschweiften Klammern (Deklarationsteil) die Eigenschaft content und der Wert eingetragen, der dann vor dem Element angezeigt werden würde. Trägt man keinen Selektor ein, würde der Wert vor allen Elementen angezeigt werden. Beim folgenden Beispiel würde bei allen Elementen der Text Symbol angezeigt werden.
::before { content: "Symbol"; } Auch beim Before Pseudoelement ist es in der Regel nicht gewollt, den generierten Inhalt allen Elementen voranzustellen und es wird deshalb mit einem Einfachselektor verknüpft. So werden sie nur vor den Elementen generiert, die mit dem Einfachselektor angesprochen werden. Außerdem können die Inhalte mit Eigenschafts- und Wertangaben formatiert werden. Einige Beispiele.
p::before { content: "Symbol"; color: red; }
.klasse::before { content: "Symbol"; color: red; }
#id-bezeichnung::before { content: "Symbol"; color: red; }
[title]::before { content: "Symbol"; color: red; }After Pseudoelement
Das After Pseudoelement verhält sich genauso wie das Before Pseudoelement. Nur mit dem Unterschied, dass der generierte Inhalt nach den Elementen angezeigt wird, die angesprochen werden.
Der Vollständigkeit halber sind nachfolgend für das After Pseudoelement ein paar Beispiel-Codezeilen.
::after { content: "Symbol"; color: red; }
p::after { content: "Symbol"; color: red; }
.klasse::after { content: "Symbol"; color: red; }
#id-bezeichnung::after { content: "Symbol"; color: red; }
[title]::after { content: "Symbol"; color: red; }Um Symbole oder Icons darzustellen, kann man sie direkt als Wert schreiben, sofern die Zeichenkodierung das unterstützt. Man kann auch eine eigene Schriftart verwenden und den Wert, beginnend mit einem Backslash, in Hexadezimal schreiben, z.B. content: "\2261"; um ein "Burger-Icon" darzustellen, das häufig für die Navigation auf mobilen Geräten verwendet wird.
Selection Pseudolement
Mit dem Selection Pseudoelement kann man Inhalte formatieren, die beim Betrachten im Browser vom Benutzer markiert wurden. Normalerweise werden markierte Texte in weißer Schrift auf blauem Hintergrund dargestellt und das kann geändert werden.
Wenn man die Stildefinition auf alle Elemente anwenden möchte, reicht ein CSS-Code in folgender Form. Für die Gecko-Engine (FF) benötigt man das Präfix -moz-. Beide Angaben können nicht mit einem Komma getrennt zusammen angegeben werden.
::selection { background: red; }
/* Für Firefox */
::-moz-selection { background: red; }Möchte man, dass die CSS-Regel nur auf bestimmte Elemente angewendet wird, kann man auch Einfachselektoren angeben. Einige Beispiele.
p::selection { background: red; }
.klasse::selection { background: red; }
#id-bezeichnung::selection { background: red; }
[title]::selection { background: red; }
/* Für Firefox */
p::-moz-selection { background: red; }
.klasse::-moz-selection { background: red; }
#id-bezeichnung::-moz-selection { background: red; }
[title]::-moz-selection { background: red; }Spelling-Error Pseudoelement
In einigen Elementen können Benutzer selbst Eingaben vornehmen oder Texte ändern, z.B. in Formularfelder. Ab HTML5 können auch Texte direkt auf Websites eingegeben und geändert werden, die mit dem Attribut contenteditable="true" versehen wurden. Außerdem kann bei diesen Elementen mit dem Attribut spellcheck="..." und den Werten "true" oder "false" die Rechtschreibprüfung aktiviert oder deaktiviert werden. Standardmäßig ist die Rechtschreibprüfung im Browser aktiviert.
Rechtschreibfehler werden normalerweise mit einer roten Wellenlinie angezeigt. Möchte man davon abweichen und den Text anders formatiert darstellen, kann man das Spelling-Error Pseudoelement verwenden.
Mit dem folgenden Code würde die Formatierung der Rechtschreibfehler bei allen Elementen angewendet werden, die vom Benutzer bearbeitet werden können. Ein Beispielcode.
::spelling-error { color: red; }Möchte man die Rechtschreibfehler-Formatierung nur bei bestimmten Elementen anwenden, kann das Spelling-Error Pseudoelement auch mit Einfachselektoren verknüpft werden. Ein paar Beispiele.
p::spelling-error { color: red; }
.klasse::spelling-error { color: red; }
#id-bezeichnung::spelling-error { color: red; }
[title]::spelling-error { color: red; }Generell sollte man vorsichtig beim Einsatz des Spelling-Error Pseudoelements sein, wenn die Browser das irgendwann unterstützen sollten. Denn, wenn die Benutzer fehlerhafte Angaben machen und die Schrift plötzlich anders formatiert werden würde, könnte das verwirrend wirken. Eine rote Wellenlinie reicht eigentlich aus. Vorschlaglisten könnten geeigneter sein.
Grammar-Error Pseudoelement
Das Grammar-Error Pseudoelement verhält sich ähnlich wie das Spelling-Error Pseudoelement. Der Unterschied ist, dass hierbei Grammatikfehler formatiert werden können. Grammatikfehler werden in Browsern normalerweise nicht angezeigt. Das kann sich in Zukunft jedoch ändern.
Der Vollständigkeit halber sind nachfolgend einige Beispiele für das Grammar-Error Pseudoelement.
::grammar-error { color: red; }
p::grammar-error { color: red; }
.klasse::grammar-error { color: red; }
#id-bezeichnung::grammar-error { color: red; }
[title]::grammar-error { color: red; }Placeholder Pseudoelement
Ab HTML5 kann bei Formularfeldern das Attribut placeholder verwendet werden, um den Benutzern einen Hinweis zum Ausfüllen zu geben. Das sähe z.B. wie beim folgenden Eingabefeld aus. Es kann sein, dass der Hinweistext nicht auf allen Browsern angezeigt wird.
Mit dem Placeholder Pseudoelement können solche Hinweistexte formatiert werden.
Der Code für das Placeholder Pseudoelement ist in der Grundform wie folgt. Ein Beispiel, um die Schriftfarbe Rot zuzuweisen.
::placeholder { color: red; }Allerdings haben viele Browser das anders implementiert, sodass man unter Umständen zusätzlich die folgenden Angaben mit verschiedenen Präfixen machen muss, um möglichst viele Browser abzudecken.
::-webkit-input-placeholder { color: red; }
::-moz-placeholder { color: red; }
:-ms-input-placeholder { color: red; }
:-moz-placeholder { color: red; }Die Unterstützung durch die Browser ist nicht bei allen Pseudoelementen gegeben. Insbesondere bei älteren Browser und bei den neuen Pseudoelementen ab CSS3 kann es sein, dass sie nicht bzw. nicht in allen Browsern funktionieren.