Eugen Zimmer - z-dezign
{ }

CSS-Selektoren verwenden, um HTML-Fehler aufzuspüren

Kategorie(n): Blog & Aktuelles

Wenn HTML falsch geschrieben wird, gibt es viele Möglichkeiten, wie man HTML-Fehler entdecken könnte, um diese zu beheben. Zum Beispiel mit dem W3C Markup Validation Service.

Eine andere Sache, die man tun kann und die sich einfach in einen Entwicklungsworkflow integriert werden kann, ist, einige leicht erweiterte CSS-Selektoren zu verwenden, um mögliche Problembereiche hervorzuheben. Hier sind ein paar Beispiele, wie man CSS-Selektoren verwenden könnte, um HTML-Fehler rauszufinden.

Inline Styles

*[style] { 
    border: 5px solid red; /* Style to make the elements noticeable */
}

Fehlerhafte oder fehlende Link-Ziele

a:not([href])  
a:[href="#"],  
a:[href=""],  
a[href*="javascript:void(0)"] { … }

Unzugängliche Bilder

img:not([alt]) { ... } 
img[alt=""] { ... }

Fehlende Dokumentsprache

html:not([lang]),  
html[lang=""] { ... }

Falscher Zeichensatz

meta[charset]:not([charset="UTF-8"]) { ... }  
meta[charset="UTF-8"]:not(:first-child) { ... }

Unzugängliche Viewport-Attribute

meta[name="viewport"][content*="user-scalable=no"],  
meta[name="viewport"][content*="maximum-scale"],  
meta[name="viewport"][content*="minimum-scale"] { ... }

Unmarkierte Formularelemente

input:not([id]),  
select:not([id]),  
textarea:not([id]) { ... }

label:not([for]) { ... }

input:not([name]),  
select:not([name]),  
textarea:not([name]) { ... }  

form:not([name]):not([id]) { ... }

Leere interaktive Elemente

button:empty,  
a:empty { ... }

Unnötige oder veraltete Attribute

script[type="text/javascript"],  
link[rel="stylesheet"][type="text/css"] { ... }

Quelle: www.bitsofco.de