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

Backgrounds für Grid Based Layouts Okay, ich gebe zu, der Titel ist maximal mystisch, passt aber ;) Ich glaube zum Grid Based Design brauche ich nichts mehr zu sagen, und es gibt ja auc...
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...
Initializr – HTML5 Template Generator Nachdem uns derzeit wie blöde Boilerplates um die Ohren geworfen werden stellt sich zu Recht die Frage: welche ist passend für mich, und was mache ich...
Multiple File Uploads, HTML und Open Source Formulare lassen sich inzwischen ganz gut designen, allerdings gibt es ein Formularelement, das alle Design-Versuche vehement abwehrt: der Dateiupload...

2 Kommentare

Schreibe einen Kommentar