Vielleicht etwas unbekannter, aber sehr nützlich ist die Funktion content in CSS. Hiermit kann mit CSS der Seiteninhalt erweitert werden. Nützlich sind hier die Pseudoklasse :before und :after. Zusammen mit dem []-Selector lassen sich recht praktische Dinge erzeugen. Leider wird dies nur von modernen Browser unterstützt. Wie sooft bei CSS heisst es: “IE-Nutzen müssen leider draußen bleiben.”

Nun aber ein paar kleine Beispiele:

Man möchten in einem Druck-Stylesheet (im Website-Header einzubinden über <link rel="stylesheet" href="print.css" media="print" />) den Inhalt der Links in Klammern ausgeben lassen, da ein Benutzer diese ja in gedruckter Form nicht mehr Lesen kann. Hier muss zwischen internen und externen URLs unterscheiden, da den internen noch der Webseitenname vorangestellt werden sollte.

a[href^="/"]:after {
  content: " (http://website.tld" attr(href) ") ";
}
a[href^="http"]:after {
  content: " (" attr(href) ") ";
}


Die Selektion erreicht man über die eckigen Klammern. Hier kann auf den Inhalt eines Attributes zugegriffen werden. Bspw. fragt href^="/" ab, ob der der Strings in href eins Links mit einem / beginnt. Will man hingegen das Ende des Atributs abfragen wird stat dem ^ ein $ verwendet. Der Inhalt des Atributes href kann mit der Funktion attr ausgegeben werden.

Für das screen-Stylesheet sind aber ebenso Varianten denkbar. So ist eine Kennzeichnung von externen Links durch ein Bild oder ähnliches sinnvoll.

a[href^="http://"], a[href^="https://"] {
  padding-right:10px;
  background: url(extern.gif) right;
}


Hier wird ein kleines Bild (extern.gif) als Hintergrund auf einen Link gesetzt und der Linktext 10 Pixel nach Links verschoben, damit das Bild rechts neben dem Link steht. Ebenso könnte man aber wieder mit content arbeiten.

a[href$=".zip"]:before {
   content:"\2193\2009";
}


Dies stellt den kleine UTF-8-Pfeil ↓ (\2193) und ein Freizeichen (\2009) vor einen Link mit einem zip-Download.

Diese Funktionen geben der Webseite ein hohes Maß an Usability und helfen dem User beim Navigieren.

Man sollte sich aber auf jeden Fall vor Augen halten, dass dies Funktionen sind, die ein Großteil der Nutzer nicht sehen wird, da diese mit dem Internet Explorer unterwegs sind. So sollte nur verzichtbare Funktionalität hierüber realisiert werden und nicht Kernfunktionen der Webseite. Interessant wäre zu wissen, in wie weit der Internet Explorer 7 dies unterstützt.