Hallo! Um regelmäßig über Neuigkeiten auf dieser Seite informiert zu werden, kannst du den RSS-Feed abonnieren. Mehr Informationen über diese Technik gibt es hier.

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:

1
2
3
4
5

<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:

1
2

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:

1

html body a[href='/'] { background:green !important;}