CSS
Generated Content mit CSS
Ja da schau her! Man lernt nie aus.
Ich wusste zum Beispiel noch nicht, dass man mit Cascading Style Sheets (CSS) auch Content generieren kann. Für mich war das bisher etwas, um vorhandenen (HTML) Content zu formatieren. Aber nein, Stylesheets können auch Text bzw. HTML Code produzieren!
Und das geht zum Beispiel so.
Aha. Hier wird dann also bei der Verwendung des h2 tags immer der Text "Chapter " davorgesetzt.
Abgesehen von der :before Pseudoklasse gibt es noch die :after Pseudoklasse. Diese bestimmen, wo der generierte Content erscheinen soll: vor oder nach dem angegebenen Selektor.
Hinter dem Property-Namen content: kann jetzt aber auch nicht nur ein konstanter String stehen (wie im Beispiel oben; der übrigens auch HTML Code enthalten kann!), sondern noch so einiges mehr und das Schöne ist: man kann sie alle kombinieren, indem man sie einfach durch ein Leerzeichen getrennt hintereinanderschreibt.
Die folgenden Werte gibt es:
In Klammern gibt man eine interne oder externe URL an und kann so z.B. eine Grafik oder ein Audiofile einbauen. Wenn man also nach jeder h2 Überschrift zweimal nacheinander ein kleines Ornament zur Trennung vom folgenden Text haben will, schreibt man ins CSS File:
Hier schreibt man in Klammern den Namen des Attributs, dessen Inhalt man darstellen will. Schöner Anwendungsfall: will man unter jedem Bild eine Bildunterschrift haben, erfasst man diese einfach im alt Attribut des Bildes und schreibt dieses nach dem Bild raus:
Hiermit kann man dem Browser das Zählen beibringen – aber eine Erklärung würde den Rahmen dieses Blog-Beitrags sprengen. Auf Wunsch gern ein anderes Mal ...
Verwendet man inherit als Wert der content Property, wird einfach der bei dem Vaterelement angegebene content verwendet. (Reminder: CSSs sind ja hierarchisch, daher auch das "Cascading" im Begriff.)
Fügt Anführungs- bzw. Schlusszeichen hinzu. Hat aber mit der quotes Property zu tun und die wird nicht so richtig von allen Browsern unterstützt (außer Firefox und Opera). Ist ein komplexes Thema. Wer mehr wissen will, kann hier mal reinschauen.
Die "no-..." Varianten erhöhen bzw. erniedrigen den Quotationlevel um eins ohne Anführungszeichen auszugeben.
Hiermit wird kein Content hinzugefügt.
Ein Anwendungsfall in Kombination mit Attribut-Selektoren: wenn man möchte, dass jeder Link auf seinen Seiten, der auf die eigene Homepage (also z.B. auf index.html) verweist, immer ein kleines Home-Icon (z.B. ein Häuschen) vor dem Link enthält, schreibt man ins CSS File einfach sowas hier (vorausgesetzt, das Icon liegt im Ordner images und der Filename ist "homeicon.png"):
Oder man möchte einen kleinen Pfeil nach jedem Link haben:
Quelle: "CSS, DHTML & Ajax" by Jason Cranford Teague, Peachpit Press, Fourth Edition.
Ich wusste zum Beispiel noch nicht, dass man mit Cascading Style Sheets (CSS) auch Content generieren kann. Für mich war das bisher etwas, um vorhandenen (HTML) Content zu formatieren. Aber nein, Stylesheets können auch Text bzw. HTML Code produzieren!
Und das geht zum Beispiel so.
h2:before
{
content: 'Chapter ';
}
Aha. Hier wird dann also bei der Verwendung des h2 tags immer der Text "Chapter " davorgesetzt.
Abgesehen von der :before Pseudoklasse gibt es noch die :after Pseudoklasse. Diese bestimmen, wo der generierte Content erscheinen soll: vor oder nach dem angegebenen Selektor.
Hinter dem Property-Namen content: kann jetzt aber auch nicht nur ein konstanter String stehen (wie im Beispiel oben; der übrigens auch HTML Code enthalten kann!), sondern noch so einiges mehr und das Schöne ist: man kann sie alle kombinieren, indem man sie einfach durch ein Leerzeichen getrennt hintereinanderschreibt.
Die folgenden Werte gibt es:
url()
In Klammern gibt man eine interne oder externe URL an und kann so z.B. eine Grafik oder ein Audiofile einbauen. Wenn man also nach jeder h2 Überschrift zweimal nacheinander ein kleines Ornament zur Trennung vom folgenden Text haben will, schreibt man ins CSS File:
h2:after
{
content:
url(images/ornament.png) url(images/ornament.png);
display:
block;
}
attr()
Hier schreibt man in Klammern den Namen des Attributs, dessen Inhalt man darstellen will. Schöner Anwendungsfall: will man unter jedem Bild eine Bildunterschrift haben, erfasst man diese einfach im alt Attribut des Bildes und schreibt dieses nach dem Bild raus:
img:after
{
content:
attr(alt);
display:
block;
}
counter()
Hiermit kann man dem Browser das Zählen beibringen – aber eine Erklärung würde den Rahmen dieses Blog-Beitrags sprengen. Auf Wunsch gern ein anderes Mal ...
inherit
Verwendet man inherit als Wert der content Property, wird einfach der bei dem Vaterelement angegebene content verwendet. (Reminder: CSSs sind ja hierarchisch, daher auch das "Cascading" im Begriff.)
open-quote/close-quote, no-open-quote/no-close-quote
Fügt Anführungs- bzw. Schlusszeichen hinzu. Hat aber mit der quotes Property zu tun und die wird nicht so richtig von allen Browsern unterstützt (außer Firefox und Opera). Ist ein komplexes Thema. Wer mehr wissen will, kann hier mal reinschauen.
Die "no-..." Varianten erhöhen bzw. erniedrigen den Quotationlevel um eins ohne Anführungszeichen auszugeben.
normal bzw. none
Hiermit wird kein Content hinzugefügt.
Use cases
Ein Anwendungsfall in Kombination mit Attribut-Selektoren: wenn man möchte, dass jeder Link auf seinen Seiten, der auf die eigene Homepage (also z.B. auf index.html) verweist, immer ein kleines Home-Icon (z.B. ein Häuschen) vor dem Link enthält, schreibt man ins CSS File einfach sowas hier (vorausgesetzt, das Icon liegt im Ordner images und der Filename ist "homeicon.png"):
a[href='index.html']:before {
content:
url(images/homeicon.png);
}
Oder man möchte einen kleinen Pfeil nach jedem Link haben:
a[href]:after {
content:
url(images/linkarrow.png);
}
Quelle: "CSS, DHTML & Ajax" by Jason Cranford Teague, Peachpit Press, Fourth Edition.
|