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

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