Unbenutzte CSS-Selektoren finden

Beim Weiterentwickeln einer Website kommt es immer wieder vor das CSS-Selektoren testweise durch andere ersetzt werden, die alte Variante im Code jedoch nicht gelöscht wird. Oder es werden HTML-Elemente entfernt, die Bezug nehmenden Selektoren werden jedoch vergessen. Im Laufe der Zeit häuft man so immer mehr unnötige Selektoren an, die den CSS-Code unnötig aufblähen. Abhilfe schafft die Firebug-Erweiterung Dust-Me Selectors, welche ungenutzte CSS-Selektoren aufspürt.

Nach der Installation findet sich unten rechts in der Statusleiste neben dem Käfer-Icon ein roter Staubwedel. Klickt man nun mit der linken Maustaste auf den Staubwedel, startet die Überprüfung der aktuell geöffneten Webseite (ohne Unterseiten). Berücksichtigt werden ausschließlich zentrale Stil-Anweisungen in externen CSS-Dateien. Nach ein paar Sekunden öffnet sich ein Ergebnis-Fenster. Auf dem ersten Tab (“Unused Selectors”) sehen sie nun alle unbenutzten CSS-Selektoren inklusive der Quellen- und Zeilenangabe.

Bei komplexen Webprojekten setzt man regelmäßig nicht alle Selektoren auf jeder Unterseite ein, weshalb alle Unterseiten mit überprüft werden sollten. Dust-Me Selectors bietet hierfür zwei Möglichkeiten an.

Zum einen kann man eine automatische Überprüfung aktivieren, die bewirkt, dass sämtliche Seiten die man innerhalb einer Domain manuell ansurft, berücksichtigt werden. Hierzu klickt man mit der rechten Maus auf den Staubwedel, dann auf “Automation” und schließlich auf “Run automatically”. Hat man alle Seiten angesurft, klickt man zur Auswertung mit der linken Maustaste auf den Staubwedel. Diese Variante beinhaltet natürlich stets die Gefahr das Unterseiten vergessen werden.

Die zweite Möglichkeit ist deutlich komfortabler, setzt allerdings die Existenz einer Sitemap (eine spezielle Übersichtsseite zum gesamten Inhalt eines Webprojektes) voraus. Die Sitemap teilt man Dust-Me Selectors mit, indem man mit der rechten Maus auf den Staubwedel, dann auf “Automation” und nun auf “Spider Sitemap” und “Go!” klickt. Nach einiger Zeit werden die Ergebnisse angezeigt, anhand derer es ein leichtes ist, die CSS-Datei von Altlasten zu befreien.

Tipp: Wer zielgerichtete CSS-Selektoren aufspüren möchte, der sollte sich einmal Firefinder anschauen.

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

,

Ebenfalls Lesenswert:

Trackbacks/Pingbacks

  1. Firefox-Addon: Unbenutzte CSS-Selektoren finden - XHTMLforum - 1. Oktober 2009

    [...] finden Hi, gerade habe ich folgenden bolg gelesen und wollte ihn Euch nicht vorenthalten: CSS einfach erkl

Hinterlasse eine Antwort