molily Navigation

Visualisierung von HTML-Attributen durch CSS

CSS-Regeln für Benutzerstylesheets, die versteckte Informationen in Webseiten sichtbar zu machen

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.

  • Im Internet Explorer wird Formatvorlage über den Menüpunkt Internetoptionen → Allgemein → Eingabehilfen → Benutzerstylesheet eingebunden.
  • Im Opera 8.5 ist ein Einbinden über den Menüpunkt Extras → Einstellungen.. → Erweitert → Inhalt, Darstellung → Darstellungs-Optionen... → Eigenes Stylesheet möglich.
  • Im Firefox, Mozilla und anderen Gecko-Browsern werden die CSS-Regeln in die Datei userContent.css im Unterverzeichnis chrome des Profil-Verzeichnisses eingetragen.

Das target-Attribut

Neben 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;}

Das title-Attribut

Viele 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.

Das hreflang-Attribut

Das 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;}

Problematische Benutzung von JavaScript kennzeichnen

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.

Anwendung der Tipps: Testumgebung

  1. Dieser Text hat einen Titel. Der mit dem title-Attribut ausgezeichnete Text sollte fein unterstrichen sein und der Inhalt des title-Attributs sollte in eckigen Klammern und kleinerer Schrift dahinter sichtbar sein.
  2. Dieser Verweis öffnet ein neues Fenster (target="_blank"). Dem Verweis sollte ein Akzent in eckigen Klammern vorangestellt sein: [^]. Denkbar wären natürlich auch Unicode-Pfeilsymbole.
  3. Dieser Verweis führt auf eine englischsprachige Seite (hreflang="en"). Dem Verweis sollte der union jack vorangestellt sein.
    Dieser Verweis führt auf eine französischsprachige Seite (hreflang="fr"). Dem Verweis sollte eine französische Flagge vorangestellt sein.
  4. Dieser Verweis führt auf eine englische Seite und wird in einem neuen Fenster geöffnet. Dem Verweis sollte [^en] vorangestellt sein.
  5. Verweis mit javascript: und alert(). Dem Verweis sollte [js] vorangestellt sein.
  6. Verweis mit 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.

Browserunterstützung

  • Die auf der Gecko-Layoutengine basierenden BrowserMozilla, neuere Versionen des Netscape Navigators, Firebird, Camino, Galeon et cetera – zeigen alle Beispiele wie gewünscht an. Gecko versteht sogar den CSS 3-Selektor (getestet ab Mozilla Version 0.9).
  • Safari 1.2 zeigt alle Testbeispiele wie gewünscht an, er versteht ebenfalls den CSS 3-Selektor.
  • Mit Opera 5.12 zeigt die Beispiele Nummer 1, 2 und 4 richtig an, da er die grundlegenden Attributselektoren sowie teilweise mit CSS eingefügte Inhalte unterstützt. Bis auf die CSS 3-Selektoren versteht Opera 7 (getestet ab Version 7 Beta 2) alle Testfälle.
  • Mit dem Microsoft Internet Explorer 6.0 lässt sich kein Testbeispiel erfolgreich nachvollziehen, da dieser keine der erwähnten notwendigen Techniken versteht.

Weiterführende Lektüre

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.