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:


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

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:

Ähnliche Beiträge

Dummy HTML Snippets für Entwickler Mal was schnelles für zwischendurch: In letzter Zeit ist irgendwie ein regelrechter Hype um das gute alte Lorem Ipsum entstanden. Es gibt den Standard...
Automatoon – HTML5 Animationen Deluxe Bei meinem ersten Besuch auf Automatoon gab es ein ziemliches auf und ab, angefangen bei "Das kann ja jeder" über "Wie haben sie das bloss gemacht" bi...
jQuery & Single Page Websites Derzeit schwer im Trend sind Single Page Websites. Dies sind sie zwar schon länger, aber die "neuen" Single Page Websites enthalten durchaus einiges a...
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...

2 Kommentare

Schreibe einen Kommentar