query-unused-css-rules-on-current-document-state - 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 (2872B)
       ---
            1 1<- Back        /        codemadness.org        70
            2 i                codemadness.org        70
            3 i                codemadness.org        70
            4 i# Query unused CSS rules on current document state                codemadness.org        70
            5 i                codemadness.org        70
            6 iLast modification on 2010-04-21                codemadness.org        70
            7 i                codemadness.org        70
            8 iToday I was doing some web development and wanted to see all the rules in a                codemadness.org        70
            9 istylesheet (CSS) that were not used for the current document. I wrote the                codemadness.org        70
           10 ifollowing Javascript code which you can paste in the Firebug console and run:                codemadness.org        70
           11 i                codemadness.org        70
           12 i        (function() {                codemadness.org        70
           13 i                for (var i=0;i<document.styleSheets.length;i++) {                codemadness.org        70
           14 i                        var rules = document.styleSheets[i].cssRules || [];                codemadness.org        70
           15 i                        var sheethref = document.styleSheets[i].href || 'inline';                codemadness.org        70
           16 i                        for (var r=0;r<rules.length;r++)                codemadness.org        70
           17 i                                if (!document.querySelectorAll(rules[r].selectorText).length)                codemadness.org        70
           18 i                                        console.log(sheethref + ': "' + rules[r].selectorText + '" not found.');                codemadness.org        70
           19 i                }                codemadness.org        70
           20 i        })();                codemadness.org        70
           21 i                codemadness.org        70
           22 iThis will output all the (currently) unused CSS rules per selector, the output can be for example:                codemadness.org        70
           23 i                codemadness.org        70
           24 i        http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "fieldset, a img" not found.                codemadness.org        70
           25 i        http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "#headerimg" not found.                codemadness.org        70
           26 i        http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "a:hover" not found.                codemadness.org        70
           27 i        http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: "h2 a:hover, h3 a:hover" not found.                codemadness.org        70
           28 i        http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: ".postmetadata-center" not found.                codemadness.org        70
           29 i        http://www.codemadness.nl/blog/wp-content/themes/codemadness/style.css: ".thread-alt" not found.                codemadness.org        70
           30 i                codemadness.org        70
           31 iJust a trick I wanted to share, I hope someone finds this useful :)                codemadness.org        70
           32 i                codemadness.org        70
           33 iFor webkit-based browsers you can use "Developer Tools" and use "Audits" under                codemadness.org        70
           34 i"Web Page Performance" it says "Remove unused CSS rules". For Firefox there is                codemadness.org        70
           35 halso Google Page Speed: »https://code.google.com/speed/page-speed/« this adds        URL:https://code.google.com/speed/page-speed/        codemadness.org        70
           36 ian extra section under Firebug.                codemadness.org        70
           37 i                codemadness.org        70
           38 iTested on Chrome and Firefox.                codemadness.org        70
           39 .