For many of our sites IE9 and (hopefully not) below are part of the scope. So here is something to remember when things aren’t showing up as expected (well even more than usual) on IE9. Internet Explorer can’t handle more than 4,095 selectors in a single CSS file. This is definitely pretty easy to run into when you’re using frameworks, media queries, had some nesting fun, and running it through a compiler down to a single file.
The rules from Microsoft are:
• A sheet may contain up to 4095 rules
• A sheet may @import up to 31 sheets
• @import nesting supports up to 4 levels deep
For an explination on how the numbers where reached check out the post from 2011 here.
How to tell if you reached the stylesheet limit:
- Are you using IE9 or below?
- Are the styles being compiled into one stylesheet?
- Is the markup correct but the styles aren’t being applied?
- Is the sun rising in the west and setting in the east?
If you answered yes to the first three chances are you have reached the IE limit. If number four is a yes, you probably shouldn’t be worrying about IE right now.
Don’t worry there are other less prophetic ways to count.There is an online counter to upload or link to files. Another option would be to run this js function to count the number of rules and selectors.
If you were a CSS monster and went over it’s now time to divide those files up. As always, all projects are different so the how to part is up to you. One thing to remember is you can conditionally load the divided files for only IE9 and below and continue to serve the main single file for everything else.
May the IE force be with you.