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

Schnellere Webentwicklung mit MarkerCSS? Mit all den notwendigen Browser-Workarounds, und der generellen Schreibwütigkeit, die man zur Erstellung von CSS aufbieten muss, gehen derzeit viele B...
Bei der Navigation mit der Tastatur arbeiten In letzter Zeit hat sich das Web durch Online-Anwendungen auf die Fahne geschrieben, Desktop-Anwendungen ablösen zu wollen bzw. zu ersetzen. Die Ansät...
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...
Inline Labels für Formularfelder „Normalerweise sollte man“ die Beschriftung für ein Input-Field immer mit dem Tag

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.