externer Link

externer Link

Links, mit der die eigene Seite verlassen werden, sollten aus Barrierefreiheitsaspekten wie auch aus Benutzerfreundlichkeitsgründen entsprechend gekennzeichnet werden. Die beste Lösung dafür ist via CSS solche Links zu kennzeichnen. Hierfür gibt es in CSS3 die Möglichkeit über Attribut-Selektoren solche Links gesondert zu markieren.

CSS-Code zum Kennzeichnen von externen Links:

/* Alle Links kennzeichnen (intern + extern) */
 #content a[href^="http://"],
 #content a[href^="https://"] {
    background:transparent url(../images/link_externer.png) center right no-repeat;
    display:inline-block;
    padding-right:15px;
   }
/* Alle internen Links nachbearbeiten */
  #content a[href^="http://www.meinedomain.de"],
  #content a[href^="https://www.meinedomain.de"],
  #content a[href^="https://meinedomain.de"],
  #content a[href^="http://meinedomain.de"]
  {
    padding-right: 0;
    background: transparent;
  }

Um die Links entsprechend markieren zu können, wird das HREF-Attribut als Auswahlkriterium herangezogen. Der erste Code-Block kennzeichnet erst einmal alle Links, die in ihrem HREF-Attribut auf eine HTTP oder HTTPS-Seite verlinken. An diesen Links wird eine Hintergrundgrafik hinterlegt und entsprechend mit einem rechten Innenabstand sichtbar gemacht.

Der eigentliche Trick kommt im nachfolgenden CSS-Code-Block. In diesem Block werden die CSS-Eigenschaften für Hintergrund und Innenabstand aller Links, die in ihrem HREF-Attribut die eigene Domain stehen haben, wieder zurückgesetzt. Somit bleiben nur noch die Links markiert, die nicht auf die eigene Domain verweisen.

weiterführende Informationen:

Attribut-Selektoren – Erklärung auf CSS3.info
Grafiken zum Kennzeichnen von externen Links
„Attributbedingte Formate definieren“ auf SelfHTML