Für alle Web-Arbeiter: Es ist immer hilfreich, die Lesbarkeit des Contents zu erhöhen. Sehr dienlich in dieser Hinsicht sind kleine Icons neben entsprechenden Links, die auf die Art des Links hinweisen. Bei Ask the CSS Guyhabe ich einen einfachen Weg gefunden, es ohne Javascript oder zusätzliche img-Tags umzusetzen. Funktioniert mit IE7, Firefox und Safari. Um es für euch einfacher zu machen, habe ich das Tutorial im folgenden ins Deutsche übersetzt:

Zuerst müsst ihr ein paar Icons erstellen, am besten im .gif-Format. Sie sollten alle dieselbe Grösse haben und transparenten Hintergrund. Beispiele:

Beispiel 1 – Link zu PDF-Datei – HTML
Folgende Zeile HTML-Code:

generiert einen Link, der in etwa so aussieht:

Beachtet, dass es keine Klassen, IDs oder ähnliches gibt, die diesen Link von anderen Links unterscheidet. Der einzige Hinweis, dass hier ein .pdf-Icon stehen sollte, ist die Dateiendung .
pdf am Ende des a href-Tags. Mit neuen CSS-Selektoren, die von Firefox, Internet Explorer 7 und Safari unterstützt werden, kann man Styles anwenden, die sich auf die Werte innerhalb der Tag-Attribute beziehen (hier auf “files/holidays.pdf“)

Beispiel 1 – Link zu PDF-Datei – CSS
Wenn wir also im CSS folgendes auf den obigen HTML-Code anwenden:

a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}

müssten wir folgende Anzeige im Browser erhalten:

Wie funktionierts? Die oben genannte CSS-Regel spricht alle Tags an, deren href -Verweis auf .pdf endet. Der Verweistext wird auf der rechten Seite mit ein wenig extra-Padding versehen und somit entsteht Platz für ein PDF-Icon, das als fest platziertes Hintergrundbild eingebunden wird. Das Dollar-Zeichen im CSS-Code ($) spricht hierbei die Dateiendung an. Da das href-Attribut den Wert “files/holidays.pdf” hat, trifft die CSS-Abfrage zu und das Icon wird neben dem Link dargestellt.

Beispiel 2 – mailto: Links
Ziemlich einfach bisher. Wie siehts mit dem mailto: Link aus? Schauen wir uns folgenden HTML-Code an:

Dann weisen wir folgenden Style zu:

a[href ^="mailto:"] {
padding-right: 20px;
background: transparent url(icon_mail.gif) no-repeat center right;
}

Beachte das “ Caret” Zeichen oder auch “ Zirkumflex” (^) in der CSS-Regel. Mit dem Caret und dem Gleichzeichen “^=” fragt man über CSS den Anfang des href-Links ab. Wenn dieser nun mit mailto: beginnt, trifft die CSS-Abfrage zu und das Email-Icon wird neben dem Link dargestellt.
Und so sieht’s aus:

Beipiel 3 – Popup-Links
Entwickler, die den HTML-Code (Markup) vom Verhalten der Objekte trennen, sollten natürlich einen entsprechenden Bezeichner wählen, zum Beispiel class=”popup”:

Dieser Klasse wird dann auf ganz herkömmliche Weise folgende Eigenschaft zugewiesen:

a.popup {
padding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
}

Diese CSS-Regel spricht alle a-Tags der Klasse “ popup” an. Der Linktext wird wie vorher auf der rechten Seite mit ein wenig extra-Padding versehen und wir erhalten Platz für ein Popup-Icon.

Einen einzelnen Wert aus mehreren Werten herauspicken:
Was aber, wenn dem Tag mehrere Klassen oder IDs zugewiesen sind?
Wie hier:

Die Klasse ist jetzt nicht mehr “ popup“, sondern “ popup specialstyle“, womit die oben genannte CSS-Regel nicht mehr greifen würde.Ein Lösung, sich einzelne Werte herauszugreifen, die durch Leerzeichen getrennt sind, ist folgende:

a[class ~="popup"] {
adding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
}

Die Tilde (Auf der deutschen Tastatur: AltGr und +) kombiniert mit dem Gleichzeichen spricht alle Klassen an, deren Bezeichnung den genannten Wert enthält, sofern er durch Leerzeichen begrenzt ist. Perfekt für unsere Zwecke”.

Zusammengefasst: Diese Selektoren sind alles andere als neu, und die Liste ist bei weitem nicht vollständig. Aber der Internet Explorer 7 ist nun auf dem Markt, und mit diesen kleinen Schmankerln kann man dessen CSS-Fähigkeiten ausreizen. Firefox ist ja eh mustergültig.

Hier gibt’s noch eine .zip-Datei, die ihr direkt von askthecssguy.com herunterladen könnt. An dem Link seht ihr dann auch das Icon, das ich für Dateien mit der Endung
.zip,.doc und .pdf eingebunden habe.

Der CSS-Guy hat noch mehr zu dem Thema geschrieben. Guckt ihr hier:
Hyperlink Cues with Favicons.

Video fehlt? Zur alten Version dieses Posts
Tags: |