Generated Content – Eigenschaften für dynamisch generierte Inhalte

content

Beachten Sie bitte, dass content nicht vererbt wird. Da aber :before und :after ihre Eigenschaften vererben, können verschiedene CSS-Eigenschaften auf den Inhalt angewendet werden.

:after bestimmt, dass Inhalte nach dem Element eingefügt werden, das durch den Selektor angegeben ist. Der Doppelpunkt ist zwingend erforderlich.

Syntax: selector:after { ... }.

:before legt fest, dass Inhalte vor dem Element eingefügt werden, das durch den Selektor angegeben ist. Der Doppelpunkt ist zwingend erforderlich.

Syntax: selector:before { ... }.

content weist elf mögliche Werte auf:

• attr(alt) fügt den Text im alt-Attribut als Inhalt ein.
• counter(name) fügt einen Zähler mit Namen als Inhalt ein.
• counter(name, list-style-type) fügt einen Zähler mit Namen als Inhalt ein, der in dem angegebenen Listenstil dargestellt wird (z.B. decimal 1,2,3 ..., upper-latin I, II, III ...).
• counters(name, string) fügt alle Zähler mit Namen als Inhalt ein.
• counters(name, string, list-style-type) fügt alle Zähler mit Namen als Inhalt ein und stellt sie in dem angegebenen Listenstil dar (z.B. decimal 1,2,3 ..., upper-latin I, II, III ...).
• close-quote fügt ein schließendes Hochkomma ein, wie es in der CSS-Eigenschaft für verschachtelte Hochkommas definiert ist.
• no-close-quote fügt kein schließendes Hochkomma ein, sondern zählt die CSS-Eigenschaft quotes herunter.
• no-open-quote fügt kein öffnendes Hochkomma ein, sondern zählt die CSS-Eigenschaft quotes hoch.
• open-quote fügt ein öffnendes Hochkomma ein, wie es in der CSS-Eigenschaft für verschachtelte Hochkommas definiert ist.
• string fügt eine Zeichenkette oder einen Text in Hochkommas ein.
• url("urladdress") ist eine URL-Adresse in Hochkommas.

Beispiel

h1 {  color: #666666; font: 16px Verdana }
h1:before {  content: "Kapitel "attr(title)" "; 
             color: red; 
             font: bold 16px/120% Georgia, Times }
...
<h1 title="1">Background - Eigenschaften f&uuml;r den Hintergrund</h1>
<p>Stile f&uuml;r die Gestaltung des Hintergrunds von Elementen</p>
<h1 title="2"> Border - Eigenschaften f&uuml;r den Rahmen</h1>
<p>Stile f&uuml;r die Gestaltung eines Rahmens um ein Element</p>
<h1 title="3">Dimension</h1>
<p>Stile f&uuml;r die Abmessungen und Ausrichtung von Elementen </p>

Bemerkung

Mozilla sowie Netscape unterstützen lediglich das Einfügen einfacher Inhalte wie Texte oder Bilder, allerdings auch attr- und url-Werte. Zähler hingegen sind nur in Opera 5+ implementiert.

Und so sollte es aussehen, wenn ein Browser den Stil content unterstützt:

Die Nummerierung der Kapitel wird durch das title-Attribut des <h1>-Tags bewirkt. Dabei könnte das title-Attribut von einem PHP-Skript auch als dynamischer Inhalt aus der Datenbank geliefert werden.

↑

counter-increment

Wenn die display-Eigenschaft des Elements auf none gesetzt ist, wird der Zähler nie erhöht. Wenn die visibility-Eigenschaft des Elements auf hidden gesetzt ist, kann der Zähler erhöht werden.

none ist die Voreinstellung und verhindert das Hochzählen des Zählers.

identifier number Der Identifier-Teil des Wertepaares ist zwingend erforderlich, denn er identifiziert den Zähler und kann sich auf eine Klasse, einen Identifier oder Selektor beziehen. Der Zahlenwert number des Wertepaares ist optional und kann negative oder positive Werte annehmen. Wenn er nicht angegeben ist, wird der Zähler per Vorgabe um "1" erhöht.

Beispiel

h1 {  color: #666666; font: 16px Verdana, sans-serif}
h1:before { content:"Kapitel " counter(kapitel) "  ";
            counter-increment: kapitel; 
            color: red; 
            font: bold 16px/120% Georgia, serif }
...
<h1>Background - Eigenschaften f&uuml;r den Hintergrund</h1>
<p>Stile f&uuml;r die Gestaltung des Hintergrunds von Elementen</p>
<h1> Border - Eigenschaften f&uuml;r den Rahmen</h1>
<p>Stile f&uuml;r die Gestaltung eines Rahmens um ein Element</p>
<h1>Dimension</h1>
<p>Stile f&uuml;r die Abmessungen und Ausrichtung von Elementen </p>

Und so sollte es aussehen, wenn ein Browser das Hochzählen unterstützt:

In diesem Beispiel wird die Nummerierung der Kapitel einzig durch die Eigenschaft counter-increment des Stylesheets bewirkt.

↑

counter-reset

Wenn die display-Eigenschaft eines Elements mit none angegeben ist, kann der Zähler nicht zurückgesetzt werden. Wenn die visibility-Eigenschaft eines Elements mit hidden angegeben ist, kann der Zähler zurückgesetzt werden.

none ist die Voreinstellung und verhindert, dass der Zähler zurückgesetzt wird.

identifier number Der Identifier-Wert des Wertepaares ist zwingend erforderlich und identifiziert den Zähler. Er kann durch eine Klasse, eine id oder durch einen Selektor angesprochen werden. Der optionale numerische Wert ist der Wert, auf den der Zähler zurückgesetzt wird, wenn der spezifische Selektor vorgefunden wird. number kann positive und negative Werte annehmen. Wenn number nicht angegeben ist, wird der Zähler per Vorgabe auf "0" zurückgesetzt.

Der folgende Beispielcode vom W3C nummeriert Kapitel als 1, 1.1, 1.1.1 usw.

Beispiel

ol        { counter-reset: item }
li        { display: block }
li:before { content: counters(item, "."); 
            counter-increment: item }

↑

quotes

none verhindert die Darstellung von Anführungszeichen in der content-Eigenschaft.

string string kommt immer paarweise vor und definiert ein Paar aus öffnenden und schließenden Hochkommas. Die erste Zeichenfolge string definiert die öffnenden Hochkommas, die zweite Zeichenfolge string die schließenden Hochkommas. Jedes Anführungszeichen muss in doppelte öffnende und schließende Hochkommas gesetzt werden und darf keine Leerzeichen enthalten. Wenn Leerzeichen enthalten sind, werden sie dargestellt.

Beispiel

<html> 
<style type="text/css"> 

q:lang(en) { quotes: """ """ "'" "'" } oder
q:lang(ge) { quotes: "»" "«" ">" "<"  }
</style> 
...
<q>Dies sind <q>eingebettete</q> Hochkommas.</q> 
...
<html>  

Darstellung

»Dies sind >eingebettete< Hochkommas.«

↑