Nach einem Link den URI anzeigen
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Wenn die Seite gedruckt wird, sollen nach einem Link die dazugehörigen URIs (Uniform Resource Identifiers) angezeigt werden.
Lösung
Weisen Sie den Browser mit dem Pseudoelement :after an, die URIs der Links in einem Absatz mit auszugeben:
p a:after {
content: " <" attr(href) "> " ;
}Diskussion
Selektoren wie :after werden als Pseudoelemente bezeichnet. Der Browser interpretiert den Selektor, als enthielte das Webdokument ein zusätzliches Element.
Sie können beispielsweise mit folgendem CSS-Code dem ersten Buchstaben eines Absatzes eine Größe von zwei em-Einheiten zuweisen:
p:first-letter {
font-size: 2em;
}Mit Hilfe des Selektors :after (oder auch mit dem verwandten Selektor :before) können Sie nach (oder vor) einem Element automatisch erzeugte Inhalte einfügen. In diesem Rezept wird der Wert des Attributs href, das den URI enthält, der angezeigt werden soll, nach jedem a-Element innerhalb eines Absatzes eingefügt.
Die um den URI zusätzlich angezeigten spitzen Klammern müssen in der CSS-Regel mit Anführungszeichen umgeben werden. Um den URI visuell besser vom übrigen Inhalt abzusetzen, wird vor und nach den spitzen Klammern außerdem jeweils ein Leerzeichen eingefügt. Zwischen den Klammern steht die Funktion attr(x), mit der wir den Wert des href-Attributs auslesen. Dieser wird nun als Zeichenkette in den erzeugten Inhalt eingebunden.
Ein weiteres Beispiel für die Vielseitigkeit dieses Pseudoelements zeigt sich, wenn die vollständigen Wörter zu Akronymen in einem Dokument voller Modewörter angezeigt werden sollen. Dazu muss das vollständige Wort im title-Attribut eines abbr- oder acronym-Elements stehen:
<p>Das <acronym title="World Wide Web Consortium">W3C</a> erfindet wunderbare Dinge wie zum Beispiel <abbr title="Cascading Style Sheets">CSS</abbr>!</p>In einer CSS-Regel weisen Sie dann den Browser an, den Wert des Attributs title auszugeben:
abbr:after, acronym:after {
content: " (" attr(title) ") ";
}Vor Root-Links den Domainnamen anzeigen
Bei Links relativ zum Wurzelverzeichnis werden beim Ausdruck nur der Schrägstrich und die folgenden Verzeichnis- und Dateinamen angezeigt. Durch den Einsatz des Substring- Selektors aus der CSS 3-Spezifikation können Sie dies Problem umgehen:
p a:after {
content: " <" attr(href) "> " ;
}
p a[href^="/"]:after {
content: " <http://www.csscookbook.com" attr(href) "> " ;
}Das Caret-Zeichen (^) weist den Selektor an, nur Links zu finden, die mit einem Schrägstrich beginnen. Auf diese Weise können wir die Root-Links von relativen und absoluten Links unterscheiden und ihnen die nötigen Regeln zuweisen.
Momentan funktionieren mit Hilfe von Pseudoelementen erzeugte Inhalte nur in Firefox, Netscape 6+ und Safari. Internet Explorer für Windows unterstützt erzeugte Inhalte (noch?) nicht. Zudem gibt es noch keine große Unterstützung für die CSS 3-Spezifikation.
Siehe auch
Das Rezept Schriftgrößen und -maße festlegen zur Definition von Schriften in einem Webdokument und die CSS 2.1-Spezifikation zu erzeugten Inhalten.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln