query-unused-css-rules-on-current-document-state.md - www.codemadness.org - www.codemadness.org saait content files
 (HTM) git clone git://git.codemadness.org/www.codemadness.org
 (DIR) Log
 (DIR) Files
 (DIR) Refs
 (DIR) README
 (DIR) LICENSE
       ---
       query-unused-css-rules-on-current-document-state.md (1680B)
       ---
            1 Today I was doing some web development and wanted to see all the rules in a
            2 stylesheet (CSS) that were not used for the current document. I wrote the
            3 following Javascript code which you can paste in the Firebug console and run:
            4 
            5         (function() {
            6                 for (var i=0;i<document.styleSheets.length;i++) {
            7                         var rules = document.styleSheets[i].cssRules || [];
            8                         var sheethref = document.styleSheets[i].href || 'inline';
            9                         for (var r=0;r<rules.length;r++)
           10                                 if (!document.querySelectorAll(rules[r].selectorText).length)
           11                                         console.log(sheethref + ': "' + rules[r].selectorText + '" not found.');
           12                 }
           13         })();
           14 
           15 This will output all the (currently) unused CSS rules per selector, the output can be for example:
           16 
           17         http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "fieldset, a img" not found.
           18         http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "#headerimg" not found.
           19         http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "a:hover" not found.
           20         http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "h2 a:hover, h3 a:hover" not found.
           21         http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: ".postmetadata-center" not found.
           22         http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: ".thread-alt" not found.
           23 
           24 Just a trick I wanted to share, I hope someone finds this useful :)
           25 
           26 For webkit-based browsers you can use "Developer Tools" and use "Audits" under
           27 "Web Page Performance" it says "Remove unused CSS rules". For Firefox there is
           28 also Google Page Speed: <https://code.google.com/speed/page-speed/> this adds
           29 an extra section under Firebug.
           30 
           31 Tested on Chrome and Firefox.