Externe Links durch einen CSS Trick besonders Kennzeichnen !

Peter Beauvain
2008-06-14 00:13
Dieser Kleine CSS Trick bewirkt eine Kennzeichnung von Links, die auf Ziele ausserhalb der eigenen Website verweisen.
Kleiner Wermutstopfen: bis dato funktioniert dieser CSS Befehl nur mit einen Browser auf Basis von Gecko.

Der Internet Der Internet Explorer und Opera können damit zwar (noch) nichts anfangen, weggenommen wird ihnen jedoch nichts.

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

Baut einfach die folgenden Code Zeilen in euer Stylesheet ein. Natürlich müsst Ihr die URL für die internen Links an eure URL anpassen.

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


a[href^="http://127.0.0.1"],
a[href^="http://127.0.0.1/ContenidoFAQ"] {
   background: transparent;
   padding-right: 0px;
}

Hinweis:
Diese Lösung ist nicht CSS2 valide (siehe z.B. http://www.forum4designers.com/message275354.html)

Auch unter http://underscorebleach.net/jotsheet/2004/12/offsite-external-links-css-attribute-selectors liest sich leider eindeutig heraus, dass die verwendeten "regulären Ausdrücke für CSS" erst in CSS3 zur Verfügung stehen. Manche Browser unterstützen dies bereits, aber dennoch ist es laut aktuellem CSS2 Standard nicht valides CSS! Tags: CSS
Durchschnittliche Bewertung: 4 (3 Abstimmungen)

Es ist möglich, diese FAQ zu kommentieren.