Mit Hilfe von speziellen CSS-Regeln können einige wichtige HTML-Attribute, welche durch Browser oft nicht direkt ausgegeben werden und so der Informationsgehalt dem Benutzer vorenthalten wird, sichtbar gemacht machen. Dazu bedient man sich erzeugter beziehungsweise eingefügter Inhalte, genauer gesagt der Eigenschaft content, der Pseudoelemente :before und :after sowie Attributselektoren.
Es bietet sich an, die im Folgenden vorgestellten CSS-Regeln in einer externen Formatvorlagen-Datei zusammenzutragen und als Benutzerstylesheet (user style sheet) einzubinden, welches standardmäßig auf alle betrachteten Webseiten angewendet wird.
target-AttributNeben der Verwendung für Framesets wird das target-Attribut dazu gebraucht, um in der Regel unvermittelt neue Browserfenster beim Aktivieren eines Hyperlinks zu öffnen. Mittels der folgenden Regel können target="_blank"-Attribute gekennzeichnet und gegebenenfalls außer Kraft gesetzt werden, indem der Browser beispielsweise angewiesen wird, den Link nicht in einer neuen Browserinstanz zu laden:
a[target="_blank"]:before {content:"[^]"; color:#f00;}
title-AttributViele Webautoren geben dem Benutzer durch title-Attribute Zusatzinformationen, welche bei vielen Browsern durch sogenannte »Tooltips« angezeigt werden. Da in der Regel Elemente mit title-Metainformationen nicht durch eine abweichende Formatierung gekennzeichnet werden, bleibt es dem Zufall überlassen, ob der Benutzer den Mauszeiger über das Element bewegt und die Beschreibung dabei entdeckt.
Durch folgende Regel können alle Elemente, welche ein title-Attribut enthalten, durch eine Art Unterstreichung hervorgehoben werden. Die Browser Mozilla und Opera (Version 7) wenden ähnliche Formatierungen standardmäßig bei abbr- und acronym-Elementen an.
*[title] {border-bottom:thin dotted #777; cursor:help;}
Bei Blockelementen könnte diese Regel eventuell problematisch werden, weshalb möglicherweise nicht auf alle Elemente abgezielt werden sollte.
Wenn beispielsweise als Eingabegerät in erster Linie die Tastatur verwendet wird oder der Zusatztext leichter zugänglich sein soll, ist es hilfreich, den Inhalt des title-Attributs im Fließtext anzuzeigen. Dazu kann folgender Regel verwendet werden:
*[title]:after {content:" ["attr(title)"]"; font-size:0.8em;}
Dies bewirkt, dass der title-Text in eckigen Klammern in kleinerer Schrift hinter das ausgezeichnete Element gestellt wird.
hreflang-AttributDas Attribut hreflang kennzeichnet die Sprache eines Verweisziels. Es wird momentan noch recht wenig von Netzautoren verwendet, unter anderem weil gängige Browser es nicht darstellen beziehungsweise einfach zugänglich machen, wodurch ein ausdrücklicher Zusatz nötig ist, welcher die Sprache des Zieldokuments beschreibt. Per CSS könnte das jeweilige Sprachenkürzel (de, fr, en usw.) dem Link vorangestellt werden:
a[hreflang]:before {content:"["attr(hreflang)"]"; color:#a00;}
Ebenso besteht die Möglichkeit, den Verweis durch eine vorangestellte Grafik, welche etwa eine Landesflagge symbolisiert, zu kennzeichnen:
a[hreflang="en"]:before {content:url(flag-en.png);}
Vorausgesetzt wird, dass eine Grafikdatei namens flag-en.png im Verzeichnis des Benutzerstylesheets existiert.
Speziell für solche Anwendungsfälle existiert im Übrigen ein Attributselektor, mit welchem auch Kürzel für Sprachunterarten erkannt werden. Diese Sprachcodes setzen sich aus dem Hauptkürzel und beliebig vielen über Bindestriche abgetrennten Kürzeln für Untergattungen zusammen. Während a[hreflang="en"] nur a-Elemente mit exakt dem Attribut hreflang="en" auswählt, trifft der Selektor a[hreflang|="en"] zusätzlich auch auf Hyperlink-Elemente zu, deren hreflang-Attributwert lediglich mit en beginnt – beispielsweise en-gb (britisches Englisch) und en-us (amerikanisches Englisch).
Falls beide oben genannte Fälle – target="_blank" und hreflang – eintreten, kann mit mehreren Attributselektoren gearbeitet werden:
a[hreflang][target="_blank"]:before {content:"[^"attr(hreflang)"]"; color:#f00;}
Viele Netzseiten verwenden javascript: mit anschließendem JavaScript-Code als Verweisziel. Im Artikel Popups mit JavaScript finden sich Argumente gegen javascript: als Verweisziel. Um solch eventuell unliebsame Verweise kenntlich zu machen, bevor sie anwählt werden, bieten sich folgende Regeln an:
a[href^="javascript:"]:before {content:"[js] "; color:#f55;}
a[href="#"][onclick]:before {content:"[js] "; color:#f55;}
Der Attributselektor [href^="javascript:"], beziehungsweise verallgemeinert [attribut^="wert"], wählt diejenigen Elemente, deren Wert des angegebenen Attributs (href) mit der angegebenen Zeichenkette (javascript:) beginnt. Dieser Selektortyp ist erst in CSS 3 verfügbar und momentan noch nicht standardisiert.
title-Attribut ausgezeichnete Text sollte fein unterstrichen sein und der Inhalt des title-Attributs sollte in eckigen Klammern und kleinerer Schrift dahinter sichtbar sein.target="_blank"). Dem Verweis sollte ein Akzent in eckigen Klammern vorangestellt sein: [^]. Denkbar wären natürlich auch Unicode-Pfeilsymbole.hreflang="en"). Dem Verweis sollte der union jack vorangestellt sein.hreflang="fr"). Dem Verweis sollte eine französische Flagge vorangestellt sein.javascript: und alert(). Dem Verweis sollte [js] vorangestellt sein.href="#" und onclick (alert()). Dem Verweis sollte [js] vorangestellt sein.Die verwendeten Farben lassen sich natürlich durch noch auffälligere beziehungsweise dezentere Farben austauschen.
Jesse Rudermans Artikel User Styles: example rules for user style sheets (englisch) bietet weitere Beispiele und verlinkt weitere Quellen, darunter die Klassiker The CSS Anarchist’s Cookbook und The CSS Anarchist Strikes Again! von Eric Meyer (ebenfalls beide englischsprachig). Matthias Gutfeldt bietet eine Übersetzung davon: Kochbuch für CSS-Anarchisten.
Autor: molily — E-Mail: zapperlott@gmail.com — Letzte Änderung: 07.12.2005 — Impressum