Skip to content

Instantly share code, notes, and snippets.

@mischah

mischah/_readme.md

Last active Aug 29, 2015
Embed
What would you like to do?

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.

(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 : ]');
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment