Externe Links mit CSS3 formatieren

Hinweis: Dieser Artikel ist älter als zwei Jahre (letzte Änderung: 13. August 2014) und evtl. nicht mehr aktuell.

Lange hatten wir nach einer "einfachen" Lösung gesucht um unsere externen Links sowie Mail-Links etc. speziell mit einer kleinen Grafik zu kennzeichnen.

Bsp:
http://www.example.org
Icon extern
mail{at}example.org Icon Mail

Nun sind wir auf die Attribut-Selektoren in CSS3 gestoßen. Mit dem Attribut-Selektor können verschieden Zeichenketten miteinander verglichen werden. Hier mal 4 Beispiele:

  • [attribut=wert]: vergleicht den Wert des Attributs auf genaue Übereinstimmung mit der Zeichenkette
  • [attribut^=wert]: ^ vergleicht den Wert des Attributs mit dem Anfang der Zeichenkette
  • [attribut$=wert]: $ vergleicht den Wert des Attributs mit dem Ende der Zeichenkette
  • [attribut~=wert]: ~ vergleicht den Wert des Attributs mit einem durch Leerzeichen getrennten Wort in der Zeichenkette

Wenn wir jetzt also externen Links, Maillinks, ftp-Links, rss-Links, .zip und .pdf Files etc. eine kleine Grafik als (rechten) background mitgeben wollen, nutzen wir nur Beispiel 2 und 3 (vergleichen des Anfangs und des Endes).
Die angegebenen Grafiken sind nur Beispieldateien. Diese müssen natürlich auf die eigenen Icons angepasst werden.

Zuerst formatieren wir also die externen Links http, ftp, wiki, mailto

/*exterer Link*/
a[href^="http:"] { background: url(images/extern.gif) no-repeat right top; padding-right: 13px; }
/*ftp Link*/
a[href^="ftp:"] { background: url(images/ftp.gif) no-repeat right; padding-right: 13px; }
/*wikipedia Link*/
a[href^="http://www.wiki"], a[href^="http://wiki"] { background: url(images/wiki.gif) no-repeat right; padding-right: 13px; }
/*mailto Link*/
a[href^="mailto:"] {background: url(images/mail.gif) no-repeat right; padding-right: 17px;}

Wichtig dabei ist uns, dass die internen von den externen Links unterschieden werden können. Also müssen wir die internen Links “zurück formatieren” (background:none), so dass der User nur bei den “externen Links” die Grafik sieht.

/*interner Link*/
a[href^="https://im-tal.net"], a[href^="https://im-tal.net"] { background: none; padding-right: 0; }

Und danach kommen dann die ganzen File-Links dran, als Bsp. haben wir PDF, ZIP und RSS angegeben. Natürlich können sämtliche andere Dateiformate, wie .doc, .xls, .ppt usw. auch überprüft werden.

/*PDF Link*/
a[href$=".pdf"] {background: url(images/pdf.gif) no-repeat right; padding-right: 13px;}
/*ZIP Link*/
a[href$=".zip"] {background: url(images/zip.gif) no-repeat right; padding-right: 13px;}
/*RSS Link*/
a[href$=".rss"], a[href$=".rdf"] {background: url(images/rss.gif) no-repeat right; padding-right: 13px;}

CSS3 ist noch nicht verabschiedet (wird es wohl auch so schnell nicht ;-) ), aber die meisten neueren Browser wie FF2+3 und IE7+8 setzen es bereits teilweise/vollständig um.

Empfehle uns: email facebook google plus twitter

Artikel Informationen

  • Erstellt am Montag, 5. Januar 2009 um 22:32 (Letzte Änderungen 13. August 2014, 11:52) und abgelegt unter WordPress mit den Tags: ,
  • Kommentare zu diesen Eintrag im Kommentar Feed Feed.
  • Du kannst einen Kommentar hinterlassen. Pingback ist im Augenblick nicht erlaubt.

2
Hinterlasse einen Kommentar

2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
  Abonnieren  
neuste älteste beste Bewertung
Benachrichtige mich zu:

[…] habe ich die Ursprungsversion des Codes benutzt, was aber dazu führte, das sämtliche ausgehende Links mit dem Externen Symbol […]

[…] In diesem Beitrag wird auf im-Tal.net ausführlich diese Umsetzung dokumentiert und auch wenn der Beitrag nicht mehr ganz neu ist, funktioniert die Beschreibung in meinem Theme immer noch wunderbar, wie ihr ja bereits beim Lesen dieses Beitrages sehen könnt. […]