Count the number of rules and selectors for CSS files on the page. Flags up the >4096 threshold that confuses IE

countCSSRules.js

function countCSSRules() {
    var results = '',
        log = '';
    if (!document.styleSheets) {
        return;
    }
    for (var i = 0; i < document.styleSheets.length; i++) {
        countSheet(document.styleSheets[i]);
    }
    function countSheet(sheet) {
        var count = 0;
        if (sheet && sheet.cssRules) {
            for (var j = 0, l = sheet.cssRules.length; j < l; j++) {
                if( !sheet.cssRules[j].selectorText ) {
                    continue;
                }
                count += sheet.cssRules[j].selectorText.split(',').length;
            }

            log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
            log += '\nRules: ' + sheet.cssRules.length;
            log += '\nSelectors: ' + count;
            log += '\n--------------------------';
            if (count >= 4096) {
                results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
            }
        }
    }
    console.log(log);
    console.log(results);
};
countCSSRules();

very awesome. i just paste the whole thing in the console window in firebug and it prints it all out

UPDATED
You can avoid the "operation is insecure* error by adding the following code before "if (sheet && sheet.cssRules)

if (sheet.href != null && sheet.href.indexOf(location.origin) != 0){
     console.log("CSS file couldn't be analyzed because it is not on the same domain: " + sheet.href);
     return;
}

If you add an if statement to count the number of sheets, you can have this also catch IEs bug where it won't load more than 30 stylesheets at a time:

if (document.styleSheets.length >= 30) {
    results += 'Found ' + document.styleSheets.length + ' stylesheets. <= IE9 will ignore stylesheets after 30!\n';
}

just a word to say it's not so reliable. Got the bug and the script indicate <3800 rules :(

IMHO u should change the print line at the end (count is for selectors, not for rules).

if (count >= 4096) {
results += '\n********************************\nWARNING:\n There are ' + count + ' CSS selectors in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' selectors!\n';
}

Same problem here... I got less then 3500 and it still isn't working.

Cool snippet, however it does not seem to count the CSSMediaRule objects, only the first level CSSStyleRule. CSSMediaRule can have multiple CSSStyleRule objects within.

I added this:

for (var j = 0, l = sheet.cssRules.length; j < l; j++) {
    if (!sheet.cssRules[j].selectorText) {
        if (sheet.cssRules[j].cssRules) {
            for (var m = 0, n = sheet.cssRules[j].cssRules.length; m < n; m++) {
                count += sheet.cssRules[j].cssRules[m].selectorText.split(',').length;
            }
        }
    }
    else {
        count += sheet.cssRules[j].selectorText.split(',').length;
    }
}

And went from Rules: 2350, Selectors: 2654 to Rules: 2350, Selectors: 4318.

Thanks @labue! I forked the snippet with your changes https://gist.github.com/krisbulman/0f5e27bba375b151515d

For anyone looking for a Grunt script: (see maxSelectors)
https://github.com/phamann/grunt-css-metrics

Here's a version that takes @include statements into account:

https://gist.github.com/welsh-dwarf/806aa82ccf7fe529dd56

Just a side-note for people saying it's not reliable because their stylesheet has less than 4096 rules and still breaks in IE9 : the number of selectors isn't the only limit regarding CSS files in IE9-.

• Number of @import's (31)
• Nesting @import's (4 levels)
• File size (278Kb|288Kb)

So yes you may have less than 4096 selectors and still have your stylesheet break in IE9, check for datauri images, auto-generated selectors (compass sprites and @extend for example) and if possible move styles used after load in another stylesheet loaded before the closing body tag (modal popups, jQueryUI stylings, that sort of things) so the broser renders elements that are there right away and loads the rest before it happens on the page if it comes from user interaction.

Thanks for the gist, helped me figure out my problem wasn't a selector limit issue, but removing some datauri images did the trick for me.

in my ie8, the rule 4096 does not apply.
as said justinmarsan "stylesheet has less than 4096 rules"

Using @krisbulman's function gave me the actual results i was looking for.

Brilliant job, thanks!

Saw this and just had to remake it with es6.

This snippet counts selectors recursively, so it also finds selectors inside media-queries. Also it requires a modern browser.

(function(){
  var countSelectorsInStylesheet = container => Array.from(container.cssRules).reduce((prev, cur) => {
    prev = rule.selectorText ? prev + rule.selectorText.split(',').length : prev;
    prev = rule.cssRules ? prev + countSelectorsInStylesheet(rule) : prev; 
  });
  Array.from(document.styleSheets).forEach(sheet => console.log(sheet.href, countRules(sheet), 'selectors'));
})();

have fun!

This is great! Saved me a ton of time. As colinbashbash said, I opened Firebug, pasted the code into the console window and clicked run. It took me 30 seconds at the most.

A modified version of @screeny05's snippet, works well on Google Chrome's console.

(function(){
  var countSelectorsInStylesheet = container => Array.from(container.cssRules).reduce((prev, rule) => {
    prev = rule.selectorText ? prev + rule.selectorText.split(',').length : prev;
    prev = rule.cssRules ? prev + countSelectorsInStylesheet(rule) : prev
    return prev
  }, 0);
  Array.from(document.styleSheets).forEach(sheet => console.log(sheet.href ? sheet.href : "inline", countSelectorsInStylesheet(sheet), 'selectors'));
})();

This thread is nice and helpful! I got errors on @ka2n and @screeny05 on Chrome 59. @welsh-dwarf works out-of-the-box!

https://gist.github.com/welsh-dwarf/806aa82ccf7fe529dd56