CSS Rules not applying in IE9
Here’s the scenario : you’ve been adding some nice CSS code to that website you’re working on. It’s all looking good in your favorite browser so you decide to test it on the not-so-favorite ones juste to make sure it looks good too, or at least okay depending on your objective. Then you fire up IE9 and realize some styles simply aren’t applied at all, as if they didn’t exist.
Enter IE9’s wtf limits
IE9 (and older), because it must live up to its reputation of being stupid, has a set of limits. Once they’re reached, the following code is simply ignored. Here they are :
- 4096 selectors
- 31 @import
- 4 level of @import nesting
- ~280Kb file size
These limit apply to each CSS file separately, so in most cases, splitting files should do the trick.
Preventing the bug
I’ll start with the easy one first : don’t use @imports.
For the selector limit, there can be many causes of having a lot of them :
- You run a very big site, in this case just split the files
- You use many JS libs which all come with their base styling plus your overrides. In this case, split the JS-related CSS code in another file you load just before the </body> tag
- You use compass for @extend and/or sprites. In this case check the ouputed css, you may discover some selector hell in there
- You use base64 datauris. Remove some or all of them
Check your selector limit now
While looking for tools and solutions for this, I ran into this little gist.
Copy that in the console and watch the stats.