(DIR) <- Back
       
       
       # Query unused CSS rules on current document state
       
       Last modification on 2010-04-21
       
       Today I was doing some web development and wanted to see all the rules in a
       stylesheet (CSS) that were not used for the current document. I wrote the
       following Javascript code which you can paste in the Firebug console and run:
       
               (function() {
                       for (var i=0;i<document.styleSheets.length;i++) {
                               var rules = document.styleSheets[i].cssRules || [];
                               var sheethref = document.styleSheets[i].href || 'inline';
                               for (var r=0;r<rules.length;r++)
                                       if (!document.querySelectorAll(rules[r].selectorText).length)
                                               console.log(sheethref + ': "' + rules[r].selectorText + '" not found.');
                       }
               })();
       
       This will output all the (currently) unused CSS rules per selector, the output can be for example:
       
               http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "fieldset, a img" not found.
               http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "#headerimg" not found.
               http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "a:hover" not found.
               http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "h2 a:hover, h3 a:hover" not found.
               http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: ".postmetadata-center" not found.
               http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: ".thread-alt" not found.
       
       Just a trick I wanted to share, I hope someone finds this useful :)
       
       For webkit-based browsers you can use "Developer Tools" and use "Audits" under
       "Web Page Performance" it says "Remove unused CSS rules". For Firefox there is
 (HTM) also Google Page Speed: »https://code.google.com/speed/page-speed/« this adds
       an extra section under Firebug.
       
       Tested on Chrome and Firefox.