(Freitag, den 20. November 2009 um 18:49 Uhr)

Seit 7 Jahren beschäftige ich mich mit Webprogrammierung. Hier ist also der erste Teil meiner CSS-Tipps.

Mich hat immer genervt, nicht zu wissen wohin ein Link führt. Man muss immer erst der Tooltip anschauen, um zu wissen ob man auf dem aktuellen Webauftritt bleibt.

Ich fand die Idee von Wikipedia super, hinter alle externe Links ein Icon zu setzen. (falls jemand weiß, ob Wikipedia wirklich als erstes dies hatte, bitte Bescheid sagen)

Da ich kein Zeit habe bei allen externen Links auf meiner Seite die CSS-Class ‚outlink‘ zu setzen, benutze ich CSS.

Dafür sind die in CSS 3 spezifizierten Attribut-Selektoren notwendig, welches von allenaktuellen Browsern unterstützt werden. (u.a. )

/* jeder Link wird rechts um 15px erweitert und am rechten Rand wird ein Hintergrundbild eingefügt (unser Icon)*/
a[href^="http://"]{
 padding-right: 15px;
 background: transparent url(../images/link/12pxexternal.png) no-repeat center right;
}

/*dies kann man weglassen, dadurch wird nur dem Besuchten Link ein anderes Icon gegeben*/
a:visited[href^="http://"]{
 padding-right: 15px; 
 background: transparent url(../images/link/12pxexternal-visited.png) no-repeat center right;
}

/* damit die internen Links kein Icon bekommen, muss man die Einstellungen hier löschen.
ersetze 'url' durch deine Url, in meinem Fall hab ich zb 'josias.polchau.de' genommen*/
a[href*="url"],
a:visited[href*="url"],
a[href^="/"]{
 padding-right: 0px;
 background: none;
}

Als Grafik hab ich das Wikipedia Icon genommen, dass unter Copyleft steht: