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

CAPTCHA für Suchmaschinen Eine interessante Idee ist bei mir im Google Reader rein geflattert. Verstehen kann man sie allerdings erst wenn man sich vor Augen hält, was ein Bot ...
Schnelle Darstellung von Daten mit Recline.js Manchmal sind die Anforderungen eines Kunden ganz einfach: eine CSV-Datei als sortierbare Tabelle online stellen zum Beispiel. Hört sich einfach an, i...
Abhängigkeiten in Formularen mit dependsOn Es kristallisiert sich immer mehr heraus das man aufgrund der UX in komplexen Formularen Abhängigkeiten einführt. Ein einfaches (wenn auch durchaus se...
CSS Trashman – CSS optimieren und entschlack... Man kennt das ja, mal eben aus einer Webseite ein Element raus geworfen, das spezialisierte CSS dafür bleibt erhalten. Dann hat man Elemente doppelt d...

2 Kommentare

Schreibe einen Kommentar