css-café

9. Generierte Inhalte

• Die Pseudoelemente :before und :after
• 9.1 content
• 9.2 quotes
• 9.3 counter-reset
• 9.4 counter-increment

Diese Gruppe von Eigenschaften wurde mit der CSS2-Spezifikation eingeführt, um zusätzliche Informationen dynamisch darzustellen.

Allerdings ist die Browserunterstützung noch sehr mangelhaft und wenig einheitlich. Internet Explorer unterstützen diese Eigenschaften überhaupt nicht, Geckos sowie Safari und Konqueror tasten sich langsam heran. Nur Opera unterstützt generierte Inhalte bereits in größerem Umfang.

Weiterhin bleibt zu bedenken, daß mittels CSS generierte Inhalte nicht im eigentlichen Dokument enthalten sind und so allen Anwendern ohne CSS-Unterstützung vorenthalten werden. Schon aus diesem Grund ist die Verwendung dieser Eigenschaften sehr umstritten, die äußerst mangelhafte Unterstützung durch die diversen Browser macht sie mehr oder weniger unbrauchbar – zumindest für den öffentlichen Einsatz im Web.

Für eigene Zwecke wie zum Beispiel ein User-Stylesheet kann man aber durchaus damit experimentieren.

Die Pseudoelemente :before und :after

Diese Pseudoelemente können Elementen des eigentlichen Quellcodes zugewiesen werden und über die Eigenschaft content zusätzliche Informationen transportieren, der entweder vor (:before) oder nach (:after) dem eigentlichen Elementinhalt eingefügt wird. Dabei erben die Pseudoelemente die Eigenschaften des eigentlichen Elements, können aber auch frei formatiert werden.

^ nach oben

9.1 content

Ermöglicht die Ausgabe zusätzlicher Inhalte vor oder nach einem Element [CSS2].

Beispiel:
p.hinweis:before {content: "Achtung: ";}

Werte	normal | none | Zeichenkette | URI | Zähler | attr(Attribut) | open-quote | close-quote | no-open-quote | no-close-quote | inherit
Default	normal
Vererbt	nein

Diese Eigenschaft ist nur auf die Pseudoelemente :before und :after anwendbar.

• Zeichenkette – hier kann ein beliebiger Text notiert werden;
• URI – Adresse einer externen Ressource, zum Beispiel ein Bild;
• Zähler – (counter) ermöglicht das Einfügen einer automatischen Nummerierung;
• attr(Attribut) – fügt den Inhalt eines beliebigen Attributs hinzu;
• open-quote, close-quote – abhängig von der Eigenschaft quotes werden werden einleitende und abschließende Anführungszeichen gesetzt;
• no-open-quote, no-close-quote – es werden keine einleitenden bzw. abschließenden Anführungszeichen gesetzt.

^ nach oben

9.2 quotes

Ermöglicht die Angabe verschiedener Anführungszeichen [CSS2].

Beispiel:
blockquote {quotes: „\00AB" „\00BB";}

Werte	Zeichenkette | none | inherit
Default	abhängig vom Gerät des Anwenders
Vererbt	ja

Der Wert wird paarweise angegeben, zuerst für das öffnende, dann für das schließende Anführungszeichen. Es können auch mehrere Paare angegeben werden, um verschachtelte Zitate zu kennzeichnen.

Die Darstellung der Anführungszeichen hängt von der definierten Schriftart (und dem verwendeten Browser) ab. Hier eine Liste der geläufigsten Anführungszeichen:

Hexadezimal	Beschreibung
\0022	Doppeltes ASCII-Anführungszeichen
\0027	Einfaches ASCII-Anführungszeichen (Apostroph)
\00AB	Doppelte spitze Klammer links
\00BB	Doppelte spitze Klammer rechts
\2018	Einfaches Anführungszeichen links (6 oben)
\2019	Einfaches Anführungszeichen rechts (9 oben)
\201C	Doppeltes Anführungszeichen links (66 oben)
\201D	Doppeltes Anführungszeichen rechts (99 oben)
\201E	Doppeltes unteres Anführungszeichen (99 unten)
\2039	Einfache spitze Klammer links
\203A	Einfache spitze Klammer rechts

^ nach oben

9.3 counter-reset

Ein Counter wird auf 0 bzw. einen anzugebenden Wert gesetzt [CSS2].

Beispiel:
ol#quellen {counter-reset: mein-zaehler 2;}

Werte	Zählername integer | none | inherit
Default	none
Vererbt	nein

^ nach oben

9.4 counter-increment

Einen Zähler um 1 bzw. einen anzugebenden Wert erhöhen [CSS2].

Beispiel:
ol.li {counter-increment: mein-zaehler;}

Werte	Zählername integer | none | inherit
Default	none
Vererbt	nein