Linkcheck mit CSS3

Bei der HTML-Umsetzung eines Designs werden in der Regel alle Links entweder gar nicht, oder mit einem # versehen. Dies liegt in der Regel daran, das die Zielseiten noch nicht existieren, oder später (bei Umwandlung der HTML-Seiten in ein Theme) vom CMS automatisch gesetzt werden.

Gerade bei komplexen Seiten besteht aber die Gefahr, das man vergisst Links zu setzen, dieser Umstand wird sich auch über einen längeren Zeitraum nicht ändern, da kein Link oder die Raute zumindest technisch kein toter Link ist.

Lösung ist in der Regel, alle Links mal eben vor dem Launch mit der Maus zu checken. Dies ist eine mühsame und nervige Aufgabe, vor allem wenn man weiß, das man mit rund 2 Zeilen CSS3 tote Links im Design anzeigen lassen kann.

Ausgangspunkt ist die folgende Navigationsstruktur:

<ul id="navigation>
   <li><a href="/">Startseite</a></li>
   <li><a href="#">Kontakt</a></li>
   <li><a href="">Impressum</a></li>
</ul>

Ergänzt man nun das CSS um die beiden folgenden Zeilen:

html body a:not([href]), html body a[href=''] {background: red !important;}
html body a[href='#'] {background: yellow !important;}

Werden alle hrefs, die keinen Link haben mit einem roten Hintergrund versehen, und alle die nur einen Anchor haben mit einem gelben. Natürlich lässt sich das Szenario auch für andere Links aufbauen:

html body a[href='/'] { background:green !important;}

Ähnliche Beiträge

Einfaches HTML Testing mit dem HTML Inspector Damals, als ich noch den Firefox verwendet habe, gab es ein nettes Tool mit dem man testen konnte ob HTML valide ist. Dann kam HTML5, alles wurde ande...
Google Font API – @font-face einfach verwenden @font-face ist eine ziemlich nette Sache die einem Cufon und schlimmeres erspart, dummerweise ist @font-face allerdings auch mit einigem Aufwand verbu...
Bacon.js – Bezier-Kurven für Texte Das Leben eines Webworkers ist nicht einfach, vor allem dann wenn man einem Kunden erklären muss, dass ein Bild mit Transparenz - auch wenn es dreimal...
Mozilla Thimble – HTML & CSS lernen Meine persönliche Meinung ist ja, das Mozilla anstatt sich auf den Browser zu konzentrieren, in den diversesten Nebenprojekten aufreibt. Teilweise kom...

2 Kommentare

Schreibe einen Kommentar