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();

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