_readme.md

IEs weird CSS limits which leads to ignoring CSS rules and files

IE9 is still having the following weird limits when it's coining to CSS

• 4096 rules limit
• 31 <style> and <link> tags limit

See MSDN for details.

This gist contains a JavaScript file based on this stackoverflow answer which is counting the rules and selectors within every CSS file and total amount of CSS files <style> tag itself.

Please fire that script in a modern browser 😘

Output is printed to the console of the dev tools of your choice.

countCss.js

(function(){
    var warning = '',
        filesAndTags = 0,
        log = '';

    if (!document.styleSheets) {
        return;
    }
    for (var i = 0; i < document.styleSheets.length; i++) {
        countSheet(document.styleSheets[i]);
        filesAndTags++;

    }
    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) {
                warning += 'There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
            }
        }
    }
    if (filesAndTags > 31) {
        console.warn('There are ' + filesAndTags + ' CSS files and inline <style> tag in your HTML file - IE will ignore the last ' + (filesAndTags - 31) + ' files/tags!');
    } else {
        console.info('With ' + filesAndTags + ' your HTML file is not exceeding the 31 <style> and <link> tags limit. IE is good to go : ]');
    }
    console.log(log);
    if (warning !== '') {
        console.warn(warning);
    } else {
        console.info('None of your stylesheets is exceeding the 4096 selector limit. IE is good to go : ]');
    }
    
})();