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

HTML Table CSS Style Generator Nachdem ja nun der Bann von HTML Tables scheinbar aufgehoben worden ist, darf man es ja wagen diese wieder zu verwenden. Das macht auch Sinn, weil tab...
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...
HTML5 & CSS3 – Was funktioniert in welc... HTML5 und CSS3 nähert sich in großen Schritten, und spätestens dann wird sich im Bereich der Webentwickler die Spreu vom Weizen trennen, da beides ebe...
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...

2 Antworten auf „Linkcheck mit CSS3“

  1. *VorDenKopfSchlag* Das ist so ein Tip, so simple und doch so gut und man kommt selber einfach nicht auf sowas. Ab sofort gehört das aber zu meinen STandrads in styles. Danke.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.