Informationen über Linkziel darstellen

Exzellenter Artikel
von Philipe Fatio | 6 | 14826 Aufrufe

Anzeige Hier werben

Einleitung

Per CSS kann man dem Benutzer nützliche Informationen über das Ziel eines Links darstellen. Ist das Ziel z.B. eine PDF-Datei, so kann man durch ein Icon neben dem Link darauf hinweisen. Auch anzuzeigen, ob ein Link auf eine externe Adresse zeigt, kann dem Benutzer helfen zu entscheiden, ob er diesen Link in einem neuen Fenster oder Tab öffnen möchte.

Es bestehen drei Möglichkeiten per CSS so etwas einzubauen. Nachfolgend werden diese Methoden präsentiert und über ihre Vor- und Nachteile diskutiert.

Beachten Sie bitte, dass der CSS-Selector der hierfür benötigt wird, leider nicht im IE6 funktioniert. Mehr dazu finden Sie auch in den Kompatibilitätsliste.

Selektoren

Um die Links zu wählen, die auf spezifische Dateien verlinken, muss man Attributselektoren verwenden. Das sind Selektoren, die ein Attribut mit einem Wert vergleichen. Hierbei sind folgende Attributselektoren wichtig:

Attributselektor Beschreibung
[attribut^="wert"] Der Attributwert des angegebenen Attributs muss mit dem angegebenen Wert beginnen.
[attribut$="wert"] Der Attributwert des angegebenen Attributs muss mit dem angegebenen Wert enden.

Es gibt einige weitere Attributselektoren. Informationen über alle Selektoren finden Sie in der Referenz CSS Selektoren.

Dateispezifische Selektoren

Wir nehmen als erstes Beispiel ein Link zu einer PDF-Datei. Dieser könnte wie folgt aussehen:

 
HTML
1
…aus dem <a href="/berichte/Jahresbericht07.pdf">Jahresbericht 2007</a> ist zu erkennen, dass…

Um diesen Link auf eine PDF-Datei per CSS anzusprechen, nutzen wir dessen Dateiendung aus.

Wir haben also ein Link (ein <a>-Element), dessen href Attribut mit .pdf endet. Dieser Satz – in CSS-Sprache übersetzt – ergibt:

 
css
1
a[href$=".pdf"]

Wir sehen, dass wir diesen Selektor an weitere Dateitypen anpassen können und dadurch dem Benutzer weitere hilfreiche Informationen anbieten können. Einige Beispiele für gewöhnliche Dateien:

Liste dateispezifischer Endungen
Endung Dateityp
.pdf PDF-Datei
.doc Word-Datei
.pps PowerPoint-Datei
.xls Excel-Datei
.rtf, .rtfd, .txt Generelle Textdateien
.jpg, .jpeg, .png, .bmp, .gif, .svg, .tiff, .tif Generelle Bilddateien
.mov, .avi, .mp4, .wmv Generelle Videodateien
.mp3, .m4a, .wav, .wma Generelle Audiodateien
.psd Photoshop-Datei
.zip, .tar, .rar Komprimierte Archive
.vcf vCard Datei (Adresskarte)
.cal Kalenderdatei

Icons für diese Dateitypen finden Sie im Internet. Achten Sie dabei auf mögliche Copyright einschränkungen. Auf folgenden Seiten finden Sie Icons, die Sie für den persönlichen Gebrauch verwenden können:

Protokoll- und Seitenspezifische Selektoren

Man kann anhand der URL eines Links auch erkennen, ob dieser auf eine Datei zeigt, die auf einer externen Seite liegt. Interne Links beginnen mit einem Schrägstrich, mit Punkte oder einem Dateinamen. Externe Seiten beginnen mit dem Protokoll, wie z.B. http:// oder https://. Wir können anhand Selektoren auf einfache Weise diese Links ansprechen. Dazu verwenden wir den Selektor, bei dem der Anfang des Attributwerts mit der Zeichenkette übereinstimmen muss. Alle externen Links werden also wie folgt selektiert:

 
css
1
a[href^="http://"], a[href^="https://"]

Man kann dies nicht nur für die Unterscheidung interner und externen Links verwenden, sondern man kann auch Links zu spezifischen Seiten selektieren. So kann man Links zu Social-Bookmarking-Seiten stylen, ohne dafür Klassen zu verwenden. So könnte dies realisiert werden:

 
HTML
1
<a href="http://del.icio.us/post?url=http://www.webmasterpro.de/coding/article/css-automatisierte-icons.html&title=Automatisierte%20Icons%20für%20Links">Bei del.icio.us als Lesezeichen hinzufügen</a>
 
css
1
2
3
a[href^="http://del.icio.us/post?"] {
    /* CSS Angaben um den Link zu stylen */
}

Weiter kann man auch den Benutzer auf andere Protokolle mit einem Icon aufmerksam machen. Ein Link zu einer Emailadresse kann mit einem Brief versehen werden, indem alle Links, die mit mailto: beginnen, selektiert werden. Ein Link zu einer Telefonnummer (callto:0123456789) kann mit einem Telefon-Icon verständlich gemacht werden. Hierzu eine Liste mit Protokollen:

Liste verschiedener Protokolle
Link Beschreibung Aktion
mailto:info@meineseite.de Link zu einer Emailadresse Öffnet Standard-Mailprogramm mit neuer Nachricht an angegebene Emailadresse.
skype:heinrich.müller Link zu Skype-Benutzer Startet Gespräch oder Chat mit dem Benutzer über Skype.
msn:ursula58
Link zu MSN-Benutzer Startet Gespräch mit Benutzer über Standard-MSN-Programm.
callto:+4974339428596 Link zu Telefonnummer Öffnet Standard-Telefonprogramm und ruft angegebene Nummer an.

Es gibt viele weitere derartige spezielle Links. Ob solche Links (wie z.B. callto:) vom Browser unterstützt werden, hängt von den auf dem Computer installierten Programmen ab, die sich für diese Links als Ziel registrieren und entsprechende Aktionen durchführen. Hat der Benutzer das Programm nicht installiert, dann wird ihm die gewöhnliche Fehleranzeige präsentiert, dass die Seite nicht gefunden wurde.

Kompatibilität

Firefox2Unterstützt3Unterstützt3.1Unterstützt
IE6Nein7Unterstützt8Unterstützt
Opera9Unterstützt9.5Unterstützt
Safari3Unterstützt3.1Unterstützt4Unterstützt
Unterstützung der Attributselektoren

Da es sich bei diesen Selektoren um CSS3 Selektoren handelt, werden ältere Browser dies nicht unterstützen. Diese Quote ist eher klein, wie rechts zu entnehmen ist.

Style-Methoden

Wie erwähnt, gibt es drei Methoden um nun ein Icon dem Link beizufügen. Die Methode durch ein Hintergrundbild wird wohl verbreiteter sein, hat doch seine Nachteile. Durch generierten Inhalt (::before und ::after) können wir Bilder anzeigen, ohne dass bereits definiertes CSS des eigentlichen Links überschrieben wird. Zusätzlich kann man beide Varianten miteinander kombinieren.

background-image

Wir gehen für dieses Beispiel von einem Icon in der Grösse 16⨉16 Pixel. Wir müssen nun den Linktext verschieben, damit der Text nicht über dem Icon ist. Das Icon ist 16 Pixel breit, dazu addieren wir 4 Pixel abstand zwischen Icon und Text, also ein Abstand von insgesamt 20 Pixel. Diesen Abstand können wir durch padding-right bzw. padding-left erreichen, je nachdem wo Sie das Icon platzieren möchten. Anschliessend deklarieren wir das Hintergrundbild und positionieren es vertikal zentriert und links bzw. rechts ausgerichtet. Nicht zu vergessen, das Bild wird nicht wiederholt. Schon haben wir den Link gestylt. Hier ein Beispiel mit dem Icon links des Textes:

 
css
1
2
3
4
5
6
a[href$=".pdf"] {
    padding-left: 20px;
    background-image: url(icons/pdf.png);
    background-position: center left;
    background-repeat: no-repeat;
}

Hier wurde absichtlich nicht die Kurzform background verwendet, da man dadurch eine definierte Hintergrundfarbe überschreiben würde.

Vorteile

Der Vorteil dieser Methode ist die einfache vertikale Positionierung des Bildes in der Zeile durch background-position.

Nachteile

Die Nachteile sind, dass bereits vorhandenes CSS möglicherweise überschrieben wird, dass bei kleiner Schriftgrösse kein Platz für das Icon besteht und dieses oben und unten abgeschnitten wird und dass wir keine Relativgrössen für den Abstand zwischen Icon und Text verwenden können.

content

Durch die Eigenschaft content kann in Verbindung mit den Pseudoselektoren ::before und ::after Inhalt in ein Element eingefügt werden und zwar zu Beginn oder am Ende eines Elementes. Dieser Inhalt kann auch ein Bild sein. Das Ergebnis ist ähnlich wie ein Link mit einem <img> zu Beginn respektive am Ende. Wir können auch anstatt eines Bildes ein Textpfeil wie ↗ um externe Links zu kennzeichnen, was mit der vorherigen Methode mit Hintergrundbildern nicht möglich ist. Den Abstand zwischen Icon und Text kann man durch margin erzeugen oder einfach durch ein Leerschlag. Damit das Icon bei ungenügend Platz nicht alleine auf einer Linie steht, können wir anstatt eines normalen Leerschlages ein non-breaking space (ein nicht brechender Leerschlag) einsetzen, das den Hexwert 00a0 hat. Das CSS könnte wie folgt aussehen:

 
css
1
2
3
a[href$=".mp3"]::before {
    content: url(icons/music.png) "\00a0";
}

Oder mit margin anstatt eines Leerschlages:

 
css
1
2
3
4
a[href$=".mp3"]::before {
    content: url(icons/music.png);
    margin-right: .25em;
}

Um einen externen Link mit dem vorher gezeigten Pfeil zu kennzeichnen, fügen wir dem Link den Pfeil nach einem Leerschlag hinzu. Der Pfeil kann direkt in das CSS geschrieben werden, oder in UTF-16 hex-Codierung angegeben werden (Backslash gefolgt vom vierstelligen Hexwert).

 
css
1
2
3
a[href^="http://"]::after, a[href^="https://"]::after {
    content: "\00a0\2197";
}
Vorteile

Die Vorteile dieser Methode liegen auf der Hand: Man kann dem Link zusätzlichen Inhalt – Text und/oder Bild – anhängen, ohne dass das CSS des eigentlichen Links verändert wird. Zusätzlich können wir Relativgrössen oder einen Leerschlag für den Abstand verwenden. Was auch Vorteilhaft sein kann, ist, dass wir nichts über die Masse des Bildes wissen müssen.

Nachteile

Ein Nachteil ist, dass wir das Bild nur schwer vertikal positionieren können. Wird ein grosser line-height verwendet, so liegt das Bild völlig am falschen Ort. Auch mit vertical-align: middle wird dieses Problem nicht gelöst. Beachten Sie aber, dass beim Einsatz von reinem Text wie dem Pfeil dieses Problem nicht auftaucht.

content und background-image

Da wir nun die Vor- und Nachteile der einzelnen Methoden kennen, wäre es doch am Besten, beide zu kombinieren um die vertikale Positionierung der Hintergrundbild-Methode und der Isolierung des CSS durch die Pseudoselektoren zu verwenden.

Das heisst nun, wir fügen vor bzw. nach dem Link ein Leerschlag ein. Zusätzlich zu diesem Leerschlag gehen wir wie bei der background-image-Methode vor, indem wir ein seitliches padding von 16 Pixel einfügen und dort dann das Hintergrundbild vertikal zentriert platzieren.

 
css
1
2
3
4
5
a[href$=".doc"]::before {
    content: "\00a0";
    padding-left: 16px;
    background: url(icons/word.png) no-repeat center center;
}

Entsprechend für die Positionierung rechts des Links:

 
css
1
2
3
4
5
a[href^="callto:"]::after {
    content: "\00a0";
    padding-right: 16px;
    background: url(icons/phone.png) no-repeat center center;
}
Vorteile

Die Vorteile sind die vertikale Positionierung des Hintergrundbildes und die Isolierung des CSS durch die Pseudoselektoren.

Nachteile

Ein Nachteil besteht weiterhin: Bei kleiner Schriftgrösse wird das Icon oben und unten abgeschnitten. Dafür kann man zwei CSS-Angaben mehr machen, um in moderneren Browser, die display: inline-block unterstützen, dies zu verhindern:

 
css
1
2
3
4
5
6
7
a[href^="callto:"]::after {
    content: "\00a0";
    padding-right: 16px;
    background: url(icons/phone.png) no-repeat center center;
    display: inline-block;
    min-height: 16px;
}

Für Browser die dies noch nicht implementiert haben, wird die Darstellung durch diese zwei Angaben nicht beeinflusst.

Beispiel

Zuletzt noch ein Beispiel mit allen drei Methoden. Schauen Sie sich den Code an und probieren Sie Ihn aus. Ändern Sie dabei die Schriftgrösse um zu sehen, wie sich die einzelnen Darstellungen verhalten.

Beispiel mit allen methoden  
HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Test</title>
        <style type="text/css" media="screen">
            body {
                font: 10pt/1.6 "Lucida Grande", "Trebuchet MS", sans-serif;
            }
            p.big {
                font-size: 200%;
            }
            a {
                text-decoration: none;
            }
            a:hover, a:focus {
                color: red;
            }
            p.big a:hover, p.big a:focus {
                background-color: #999;
                color: #fff;
            }
            /* Hintergrundbild */
            #background a[href$=".pdf"] {
                padding-right: 20px;
                background: url(../../../edit/image/page_white_acrobat.png) no-repeat center right;
            }
            #background a[href^="mailto:"] {
                padding-left: 36px;
                /* Alle Angaben einzeln, da sonst Hintergrundfarbe überschrieben */
                background-image: url(../../../edit/image/mail.png);
                background-repeat: no-repeat;
                background-position: center left;
            }
            #background a[href^="http://del.icio.us/post?"] {
                padding-left: 20px;
                background: url(../../../edit/image/delicious.png) no-repeat center left;
            }
            #background a[href^="http://digg.com/submit?"] {
                padding-left: 20px;
                background: url(../../../edit/image/digg.png) no-repeat center left;
            }
            #background a[href^="callto:"] {
                padding-left: 20px;
                background: url(../../../edit/image/phone_sound.png) no-repeat center left;
            }
            /* Generierter Inhalt */
            #content a[href$=".pdf"]::after {
                content: "\00a0" url(../../../edit/image/page_white_acrobat.png);
            }
            #content a[href^="mailto:"]::before {
                content: url(../../../edit/image/mail.png) "\00a0";
            }
            #content a[href^="http://del.icio.us/post?"]::before {
                content: url(../../../edit/image/delicious.png) "\00a0";
            }
            #content a[href^="http://digg.com/submit?"]::before {
                content: url(../../../edit/image/digg.png) "\00a0";
            }
            #content a[href^="callto:"]::before {
                content: url(../../../edit/image/phone_sound.png) "\00a0";
            }
            /* Beide Methoden kombiniert */
            #both a[href$=".pdf"]::after {
                content: "\00a0";
                padding-right: 16px;
                background: url(../../../edit/image/page_white_acrobat.png) no-repeat center center;
            }
            #both a[href^="mailto:"]::before {
                content: "\00a0";
                padding-left: 32px;
                background: url(../../../edit/image/mail.png) no-repeat center center;
            }
            #both a[href^="http://del.icio.us/post?"]::before {
                content: "\00a0";
                padding-left: 16px;
                background: url(../../../edit/image/delicious.png) no-repeat center center;
            }
            #both a[href^="http://digg.com/submit?"]::before {
                content: "\00a0";
                padding-left: 16px;
                background: url(../../../edit/image/digg.png) no-repeat center center;
            }
            #both a[href^="callto:"]::before {
                content: "\00a0";
                padding-left: 16px;
                background: url(../../../edit/image/phone_sound.png) no-repeat center center;
            }
        </style>
    </head>
    <body>
        <h1>Test aller drei Methoden</h1>
        <p>Ändern Sie auch die Schriftgrösse, um das Verhalten der Methoden zu beobachten.</p>
        <hr />
        <div id="background">
            <h2>Hintergrundbild</h2>
            <p>Das Jahr 2007 war für die Geschäftszahlen wegen der US Immobilienkrise negativ wie dies dem <a href="Jahresbericht.pdf">Jahresbericht</a> zu entnehmen ist.</p>
            <p class="big"><a href="mailto:wir@sind.nicht.da">Schreiben Sie uns</a> mal was ganz grosses.</p>
            <ul>
                <li><a href="http://del.icio.us/post?url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&amp;title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei del.icio.us als Lesezeichen hinzufügen</a></li>
                <li><a href="http://digg.com/submit?phase=2&url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&amp;title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei Digg hinzufügen</a></li>
            </ul>
            <p>Für weitere Fragen können Sie uns <a href="callto:0123456789">anrufen</a>.</p>
        </div>
        <hr />
        <div id="content">
            <h2>Generierter Inhalt</h2>
            <p>Das Jahr 2007 war für die Geschäftszahlen wegen der US Immobilienkrise negativ wie dies dem <a href="Jahresbericht.pdf">Jahresbericht</a> zu entnehmen ist.</p>
            <p class="big"><a href="mailto:wir@sind.nicht.da">Schreiben Sie uns</a> mal was ganz grosses.</p>
            <ul>
                <li><a href="http://del.icio.us/post?url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&amp;title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei del.icio.us als Lesezeichen hinzufügen</a></li>
                <li><a href="http://digg.com/submit?phase=2&url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&amp;title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei Digg hinzufügen</a></li>
            </ul>
            <p>Für weitere Fragen können Sie uns <a href="callto:0123456789">anrufen</a>.</p>
        </div>
        <hr />
        <div id="both">
            <h2>Beide Methoden kombiniert</h2>
            <p>Das Jahr 2007 war für die Geschäftszahlen wegen der US Immobilienkrise negativ wie dies dem <a href="Jahresbericht.pdf">Jahresbericht</a> zu entnehmen ist.</p>
            <p class="big"><a href="mailto:wir@sind.nicht.da">Schreiben Sie uns</a> mal was ganz grosses.</p>
            <ul>
                <li><a href="http://del.icio.us/post?url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&amp;title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei del.icio.us als Lesezeichen hinzufügen</a></li>
                <li><a href="http://digg.com/submit?phase=2&url=http://www.webmasterpro.de/coding/article/css-informationen-ueber-linkziel-darstellen.html&amp;title=Informationen%20%C3%BCber%20Linkziel%20darstellen">Bei Digg hinzufügen</a></li>
            </ul>
            <p>Für weitere Fragen können Sie uns <a href="callto:0123456789">anrufen</a>.</p>
        </div>
    </body>
</html>

Fazit

Für welche Methode man sich entscheidet, hängt von einigen Faktoren ab, wie z.B.:

  • Grösse des Icon (Hier wurde immer ein Icon mit 16 Pixel angenommen)
  • Grösse des Textes und der Zeilenhöhe
  • Ob die Gefahr von Überschreibung des bereits definierten CSS besteht.
  • Stylen des Links durch text-decoration: underline, da bei den content Methoden das Icon auch unterstrichen wird.

Egal welche Methode, alle haben eines gemeinsam: Mit der Darstellung eines Icons, welches das Ziel etwas genauer beschreibt, kann die Seite etwas schöner aussehen und – am wichtigsten – benutzerfreundlicher werden. Bedenken Sie, welche Dateitypen und Protokolle sinnvoll sind in Ihrem CSS einzubinden. Der Sinn ist nicht alle möglichen Endungen zu erfassen und daher eine Megabyte grosse CSS-Datei zu haben, die der Benutzer dann laden muss. Die Benutzerfreundlichkeit würde darunter abnehmen anstatt zunehmen.

In Zukunft wird durch das neue Bildformat SVG die Grösse des Bildes an die Grösse des Textes angepasst, da dieses Bildformat für Vektorgrafiken ist. Somit wird man eine noch skalierbarere Seite erhalten, was ein Schritt näher zur Auflösungsunabhängigkeit ist (d.h., dass die Darstellungsgrösse beliebig gewählt werden kann, ohne dass dabei Qualitätsverluste entstehen).

Über den Autor: Philipe Fatio
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten