Dr.Web - Das Online Magazin für Seitenbetreiber

CSS: Externe Links kennzeichnen

Vielleicht haben sie es schon bemerkt, einen Browser auf Basis von Gecko vorausgesetzt, externe Links machen nun durch ein Icon auf sich aufmerksam.

Eine hilfreiche Sache, schließlich verlässt man über einen solchen Link nicht nur diese Seite, man muss auch ein neues Browserfenster hinnehmen. Freilich ist es nicht möglich Tausende Links über Nacht mit einer Grafik zu ergänzen. CSS musste einspringen.

CSS formatierte Links

Der Trick besteht darin jedem Link ein Icon als Hintergrund zuzuweisen. Interne Links werden durch eine zweite Regel ohne Grafik gezeigt.

 a[href^="http:"] {
background: transparent
url('/images/aoutside.gif') 100% 50% no-repeat;
padding-right: 10px;
}

      a[href^="http://drweb.de"],
a[href^="http://www.drweb.de"]
{
background: transparent;
padding-right: 0px;
}

Wer mehr über diese etwas komplizierten Regeln erfahren möchte, wird bei Kryogenix bedient. Der Internet Explorer und Opera können damit zwar (noch) nichts anfangen, weggenommen wird ihnen jedoch nichts. Apples Safari kann es und ebenso der noch nicht öffentliche Opera 7.2.