CSS-Quicktipp: Tippfehler bei Selektoren finden

Wenn eine Formatierung nicht bei einem Element ankommt, so kann das die unterschiedlichsten Ursachen haben. Zuerst sollte man immer in die Entwicklertools kontrollieren, ob dort die CSS-Deklarationen irgendwie beim Element auftauchen. Dafür ruft man die Entwicklertools auf (Klick mit rechter Maustaste und „Element untersuchen“ oder Ähnlich). Dann wählt man das Element im HTML-Teil links aus und kontrolliert die CSS-Regeln im rechten Bereich. Wenn die Angaben überhaupt nicht vorkommen, bedeutet das, dass es entweder einen Tippfehler beim Selektor gibt oder – bei zusammengesetzte Selektoren – dass die Verschachtelung nicht stimmt.

Eine sehr rasche Möglichkeit, solche Probleme zu finden, besteht darin, sich die im Dokument nicht benutzten Selektoren anzeigen zu lassen.

Möglicherweie fehlerhafte Selektoren im Chrome anzeigen lassen

Im Chrome wählt man den Tab „Audits“ und klickt auf „Run“. Unter Webpage-Performance gibt es den Punkt „Remove unused CSS rules“ und dort erhält man die Selektoren, die auf keines der Elemente auf der Webseite zutreffen.

fehlerhafte Selektoren im Chrome aufspüren

Die angegebenen Selektoren kann man dann genauer überprüfen. Im Beispiel soll es wohl container und nicht cntainer heißen.

Es kann aber hier natürlich auch Angaben geben, die an sich korrekt sind, nur gerade im aktuellen Dokument nicht benötigt werden. Das wird beispielsweise häufiger der Fall sein, wenn man etwa normalize.css benutzt, um eine einheitliche Basis für Formatierungen zu definieren.

Möglichkerweise fehlerhafte Selektoren im Firefox suchen

Für Firefox gibt es das nützliche Plug-in dust-me-selectors das dasselbe leistet.

Fehlerhafte Selektoren im Firefox finden

 

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>