Bessere E-Mail-Links mit CSS

In seinem Artikel "Better Email Links: Featuring CSS Attribute Selectors" beschreibt Chris Coyier wie man mit Hilfe eines kleinen CSS-Tricks mehr aus einfachen "E-Mail senden"-Links machen kann.

Er macht hier von der Tatsache Gebrauch, dass alle E-Mail-Links mit "mailto:" beginnen. Sie lassen sich so sehr einfach von den anderen Links auf Dokumente unterscheiden und mittels Pseudo-Selektor ansprechen. Mit der folgenden CSS-Definition werden zum Beispiel alle E-Mail-Links rot dargestellt:

<style type="text/css" media="screen">
  a[href^="mailto"] {
    color: red;
  }
</style>

Daraus kann man aber mehr machen! Über die Eigenschaft "content" kann man vor und nach Elementen Inhalt einfügen. Wie wäre es zum Beispiel, wenn man die E-Mail-Adresse nehmen dem E-Mail-Link anzeigt, wenn der Benutzer mit der Maus über den Link geht? Dazu gibt man dem title-Attribut des Links als Wert die E-Mail-Adresse, und gibt diese dann mittels CSS wieder aus.

CSS-Quellcode:

<style type="text/css" media="screen">
  a[href^="mailto"]:hover:after {
    content: " > " attr(title);
  }
</style>

HTML-Quellcode:

<a href="mailto:info@domain.de" title="info@domain.de">E-Mail senden</a>

Das schaut dann im Browser so aus:

Die Vorteile dieser Art der Darstellung sind, dass der Benutzer mehr Informationen zu dem Link bekommt und schon vor dem Klick darauf weiß, was passieren wird. Man bietet Benutzer von modernen Browsern (nein, der Internet Explorer gehört nicht dazu) somit einen echten Mehrwert und bleibt trotzdem abwärtkompatibel.

Mit dem CMS webEdition kann dies natürlich auch realisieren. Bei allen Linkdialogen (we:link, bei WYSIWYG-Textareas, Link-Feld in Objekten usw.) hat man die Möglichkeit, einen Text für das title-Attribut zu definieren:



Mit Sicherheit finden sich für diese Technik auch noch weitere nützliche Einsatzmöglichkeiten. Und es ist nur zu hoffen, dass der Browser aus Redmond auch irgendwann mal zur Gilde der "modernen Browser" gehören wird - um uns allen das Leben etwas schöner und speziell den Web-Entwicklern das Leben etwas leichter zu gestalten.

Dirk Einecke
(living-e AG / Professional Services - webEdition)