Externe Links kennzeichnen
Ab heute werden externe Links bei mir mit einem extra Icon gekennzeichnet. Das erleichtert die Entscheidung den Link in einem neuen Fenster oder nicht zu öffnen ;). Außerdem weiß man so vorher schon wann man die Seite verlässt und wann nur auf eine interne Seite verwiesen wird.
Das ganze funktioniert sehr ressourcensparend mit einem CSS 3 Selektor. Die Idee dazu habe ich von den Webkrauts übernommen. Für meinen Blog aber etwas angepasst, so dass nur Links innerhalb der Posts mit dem Icon versehen werden und keine Links in der rechten Navigation. Dort sah das nicht gut aus :). Außerdem habe ich https:// URLs hinzugefügt, die wurden vorher nicht erkannt.
Der CSS-Code dafür lautet:
.chapter a[href^='http://'], .chapter a[href^='https://'] { padding-right: 15px; background: url(images/link_extern.gif) right no-repeat; } .chapter a[href^='http://www.tobiaskoelligan.de'], .chapter a[href^='http://tobiaskoelligan.de'] { padding-right: 0; background: none; } |
Damit werden zuerst alle Links die mit http:// oder https:// anfangen und innerhalb eines Elements mit der Class chapter sind, mit einem Icon am Ende des Links versehen. Dazu wird einfach durch padding-right etwas Platz geschaffen, welcher dann mit dem Hintergrundbild, welches rechts positioniert ist, wieder aufgefüllt wird. So hat man schon mal alle Links markiert, man möchte jetzt aber nur die externen am Ende wirklich markiert haben, daher setzen wir die Einstellung für Links auf die eigene Seite wieder entsprechend zurück, dies geschieht im zweiten CSS Block. Natürlich ebenfalls nur für die Klasse chapter.
Eigentlich sehr leicht, und auch für alle aktuellen Browser erkennbar. Lediglich der IE<7 tut sich noch etwas schwer damit und führt den Code nicht aus, so entsteht aber auch kein direkter Nachteil.
Zusatz:
Möchte man zum Beispiel Links auf PDF Dateien besonders kennzeichnen, kann man dies leicht ebenfalls mit CSS 3 erledigen:
/* Schreibt hinter jedem PDF 'PDF' */ a[href$=".pdf"]:after { font-size: 10px; color: blue; content: " [PDF]"; } |
Danke an Stefan für den Tipp.
Nachtrag:
Wer das Sociable-PlugIn nutzt kann mit:
.chapter a[href^='http://www.tobiaskoelligan.de'], .chapter a[href^='http://tobiaskoelligan.de'], .sociable a[href^='http://'], .sociable a[href^='https://'] { padding-right: 0; background: none; } |
anstatt des zweiten Teils des oberen Blocks, das Verändern der Links dort verhindern.
5 Comments
Dafür gibts übrigens auch ein nettes Plugin -> Link Indication, der erkennt externe Links gleich automatisch und man kann bestimmten URLs ein eigenes Icon zuweisen, wie z.B. Wikipedia. Ist ne nette Spielerei und nützlich finde ich, macht aber vom Quellcode her denk ich genau das gleiche!
Jop, habe ich bei dir gesehen, bzw danach gegoogelt ;)
Aber ich dachte mir, nen extra PlugIn macht WordPress nur “schwerer”, daher hab ichs selber in die CSS Datei eingetragen :). Leichter ist natürlich das PlugIn :).
Danke für den Artikel. Eine kleine Erweiterung habe ich noch:
/* Schreibt hinter jedem PDF 'PDF' */
a[href$=".pdf"]:after {
font-size: 10px;
color: red;
content: " [PDF]";
}
Das ist ganz nett, wenn man angezeigt bekommen möchte, dass ein Link ein PDF statt einer Seite öffnet.
:-)
Das ist eine gute Erweiterung, danke, nehme ich heute Abend mit in den Artikel auf.
Ich bin mit “Link Indication” recht zufrieden =)
Aber eine eigene Umsetzung hat natürlich auch immer ihren Reiz ;-)