Externe Links kennzeichnen

Alexander Bogomolov ¦ 06.04.2009 ¦

Wer kennt das nicht: Man liest einen Artikel und klickt auf einen Link und landet auf einer ganz anderen Seite. Dabei wollte man eigentlich noch auf der vorherigen Seite sich was angucken. Es wäre doch schön zu wissen welcher der Links zu einer externen Seite führt und welcher nicht. Dies dient definitiv zur Verbesserung der Usability.

Alle haben es schon einmal gesehen. Externe Links werden meistens mit einem kleinen Icon ausgezeichnet. Doch wie unterscheidet man die Links möglichst automatsch, ohne alle externe Links manuell mit einer eigenen Klasse auszustatten?

Inzwischen gibt es einen sehr einfachen Weg. Mit der Einführung der Selektoren in CSS ist es nur ein Kinderspiel:

a[href^="http://"] {
  padding-right:25px;
  background:url('externer_link.png') no-repeat right center;
}

Dieser vier Zeilen fügen immer einen Icon rechts von einem externen Link ein, wenn dessen HREF-Attribut mit „http://“ beginnt.

Leider funktionieren diese Selektoren im Internet Explorer erst ab der siebten Version. Für alle Vorbänger muss man wohl oder übel jeden externen Link mit einer Klasse versehen.

Kurz noch eine Übersicht über die Möglichkeiten der CSS-Selektoren:

a[target] { … }
Zeichnet alle Links, die ein TARGET-Attribut haben, aus.

a[target=_blank] { … }
Zeichnet alle Links, die ein TARGET-Attribut mit dem Wert „_blank“ haben, aus.

a[href^="http://"] { … }
Zeichnet alle Links, deren Wert des HREF-Attributs mit „http://“ beginnt, aus.

a[href$="de"] { … }
Zeichnet alle Links, deren Wert des HREF-Attributs mit „de“ endet, aus.

a[href*="de"] { … }
Zeichnet alle Links, deren Wert des HREF-Attributs „de“ beinhaltet, aus.

Wie Sie sehen gibt es echt tolle Möglichkeiten wie man mit Hilfe von CSS die Elemente selektieren kann.
Weitere Infos zu den CSS-Selektoren: http://www.w3.org/TR/css3-selectors/#selectors

Ich hoffe dieser Artikel könnte Ihnen weiterhelfen. Sollte das der Fall sein, dann würde ich mich über ein Kommentar oder einen Backlink sehr freuen.

Abgelegt in Kategorie: (X)HTML & CSS, Web-Entwicklung ¦ , ,

«
»

4 Kommentare zum Artikel “Externe Links kennzeichnen”

  1. Konsti ¦ 06.04.2009 - 13:32

    Find’ ich echt ganz gut das mal zu lesen :D Die Selektoren werd’ ich bei Gelegenheit auch sicherlich bei anderen Dingen einbauen. Das lustige an deinem Artikel finde ich aber, dass der externe Link den du selber angibst keine Markierung hat und somit genau zu den Links gehört, die du bemängelst :D Kein gutes Vorbild und vor allem in hinblick auf deinen Artikel kontraproduktiv ;)

  2. StarSt0rm ¦ 06.04.2009 - 17:53

    Jop, du hast recht… Ist wohl bei dem ganzen “Umgestalten” vergessen worden.
    Leider kann man diese Technik nicht direkt bei WordPress einsetzen, da WortPress
    nur mit absoluten URLs arbeitet. So ist jeder Link, nach diesem Beispiel, ein externer.
    Habe es aber nun korrigiert. Danke!

  3. Dominik ¦ 20.05.2009 - 12:17

    Leider kann man diese Technik nicht direkt bei WordPress einsetzen, da WortPress nur mit absoluten URLs arbeitet.

    … dann änder doch einfach den Selector auf

    a[href^="http://www.starstormdesign.de/"]

    Müsste doch eigentlich funktionieren, oder?

    Welche Browser unterstützen das denn?

  4. StarSt0rm ¦ 20.05.2009 - 12:46

    Ja, es funktioniert auch. Habe nur zu dem Zeitpunkt nicht daran gedacht.
    Auf http://www.kimblim.dk gibt es eine sehr übersichtliche Tabelle, die die Kompatibilität darstellt. :)

Kommentar verfassen