CSS-Optimierung mit dem Firebug-Plugin CSS Usage

Ich muss sagen, das sieht ziemlich vielversprechend aus auf die ersten paar Blicke zum CSS-Optimieren. Der dazugehörige Tipp kam vom Kollegen Michael Hnat von Bluegras: das Firebug-Plugin „CSS-Usage“ (erhältlich unter https://addons.mozilla.org/en-US/firefox/addon/10704). CSS-Usage erweitert Firebug um einen zusätzlichen Tab, wenn man den ausgewählt hat, kann man die Website scannen.

CSS Usage

CSS Usage

Nachdem der Scan beendet ist, sieht man die einzelnen Klassen aller beteiligten Stylesheets mit verschiedenen Farben gekennzeichnet. So sind zum Beispiel nicht verwendete Klassen mit rot markiert, was einem durchaus gut helfen kann, Altlasten loszuwerden. Hellgrün markierte Klassen wurden auf der momentan gescannten Seite gefunden, dunkelgrüne Klassen auf einer der vorher besuchten, man kann sich also größere Teile einer Website anschauen und übereinander scannen.

Man kann sich dann auch noch eine bereinigte Version des CSS exportieren, wo die nicht benutzten Klassen direkt auskommentiert sind, auf dieser Basis kann man die Stylesheets schon recht gut ausmisten. Momentan klappt die Anzeige der Zeilennummern noch nicht richtig, aber die Anhaltspunkte, die man durch das Add-On bekommt, sind wirklich sehr hilfreich. Wenn Ihr noch mehr darüber wissen wollt, könnt Ihr auch mal auf http://spaghetticoder.org/cssusage/ vorbeischauen.

Schreibe einen Kommentar