CSS 2.1: `content`

Erläuterungen

Diese Eigenschaft legt den Inhalt der Zeichenkette fest, die mit Hilfe der Pseudoelemente :before und :after plaziert wird.

Mit Hilfe der Eigenschaft display lassen sich die generierten Inhalte in einer Block-, Inline- oder Marker-Box plazieren, dennoch haben sie keinen Einfluß auf den Dokumentstammbaum.

In der Regel erben generierte Inhalte die Stylesheet-Angaben des Elternelements, es lassen sich aber auch eigene Regeln für generierte Inhalte deklarieren.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

normal: Dieser Wert wurde mit CSS 2.1 neu eingeführt. Er bewirkt, dass der Browser das in der CSS-Regel beschriebene Pseudoelement nicht generiert. Der Grund für die Ergänzung ist, dass bis jetzt durch die Deklaration :before {content: ""} eine leere Box generiert wurde. Auf Grund der Bedeutung, die die Deklaration content:normal in CSS 3 haben wird, wurde dieser Wert nicht none genannt.
none: Das Pseudoelement wird nicht erzeugt. Der Wert none ist der deklarierte Wert.; Die Werte normal none sind vor allem dann nützlich, wenn man Stylesheets für verschiedene Medien erstellt und nicht alle generierten Inhalte auf allen Medien dargestellt werden sollen, z. B. Bildschirminhalte, die nicht unbedingt im Druck ausgegeben werden sollen. (In der Praxis hat dies nur wenig Bedeutung, weil IE/Win 6 die Eigenschaft content als Ganzes nicht versteht.)
<string>: Steht für eine Zeichenkette. Zeichenketten werden in einfache oder doppelte Hochkommata eingeschlossen. Treten innerhalb des Texts ebenfalls Hochkommata auf, wird ihnen ein '\' als Escape- Sequenz vorangestellt.
<uri>: Bezeichnet eine externe Datenquelle, d.h. eine Datei. Ein Anwenderprogramm, der die angegebene Datei nicht darstellen kann, sollte sie ignorieren. Es gibt keine Möglichkeit, per CSS die Größe einer Grafik zu verändern oder anzupassen.
<counter>: Der Wert counter arbeitet zusammen mit den Eigenschaften counter-increment und counter-reset. Er generiert einen benannten Zähler, der ähnlich dem Zähler vor benannten Listen ausgegeben wird.
attr(x): Dieser Wert verweist auf ein Attribut X. Dieses Attribut X ist im HTML- Code ein Attribut des HTML-Elementes, dem diese CSS-Regel durch ihren Selektor zugeordnet ist. Wenn das HTML-Element das genannte Attribut nicht aufweist, dann bleibt die Zeichenkette leer.; Im Beispiel 1 unten (entstammt den CSS 2.1 Specs) wird der Inhalt des ALT-Attributes eines IMG-Elements entnommen und als generierter Content dem IMG-Element noch einmal vorangestellt.
open-quote und close-quote: Greift auf die mit der Eigenschaft quotes erzeugte Zeichenkette zurück und setzt sie als Zeichen für das linke bzw. rechte Hochkomma.
no-open-quote und no-close-quote: Unterdrückt die Ausgabe des linken bzw. rechten Hochkommas. Die Inkrementierung der Schachtelungstiefe für Zitate wird dadurch aber nicht unterbrochen.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

img:before { content: attr(alt); } /* Beispiel 1 */ a:before { content:url(link.gif); } /* Beispiel 2 */ P.tipp:before { content:"Tipp: "; } /* Beispiel 3 */

Browserunterstützung

Die Eigenschaft content wird nur relativ lückenhaft von den modernen Browsern unterstützt:

Firefox 1.5: Die Gecko-Engine erkennt die Werte counter und attr() nicht (die aber beide in CSS 2.1 nicht mehr vorhanden sind). Die Werte bezügl. Quotierungen werden korrekt verarbeitet, Probleme gibt es aber bei Anwendung der Eigenschaft quotes.
IE/Win 5.x, IE/Win 6, IE 7: Der IE/Win unterstützt diese Eigenschaft nicht.
IE/Mac 5.x: Der IE/Mac unterstützt diese Eigenschaft ebenfalls nicht.
Opera 7+: Opera unterstützt alle Werte mit Ausnahme von url().
Safari 1.3: Der Apple-Browser erkennt nur Textstrings und Schlüsselworte, dabei hat er ähnlich der Gecko-Engine Probleme bei der Anwendung der Eigenschaft quotes. Die Werte url() und attr() erkennt er nicht.

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.

Wechselwirkungen:

:before, :after,
counter-increment, counter-reset, display, quotes

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
(Leere Zeichenkette)	Absolutwert für `<uri>`, Ergebnis-String für `attr(x)`, sonst spezifizierter Wert	Nein	Pseudoelemente `:before` und `:after`	Nicht zutreffend	Alle