At Idyllic Software we do a lot of Ruby on Rails work. I was recently working on a Rails app which dealt with a lot of views (HTML templates) and as a result had a lot of stylesheets responsible for them. We encountered a strange problem: Have you ever had Internet Explorer (IE) fail to load your styles or render them properly while other browsers (modern) are doing a smart job at that? This makes us developers wonder what could possibly have gone wrong and start to check for any JS errors on the page. At first this is what we did. Gladly, it had nothing to do with JS errors. When you are using Rails, ‘application.css’ contains all @import rules to import other stylesheets in the directory. Rails basically compiles all stylesheets into 1 gigantic stylesheet called ‘application.css’ and this is where the trouble starts. My‘application.css’ had around 7000 selectors and apparently this was causing IE to fail silently. It was weirder as this was not happening on local but on our staging server.
CausesAs per Microsoft’s knowledge base following or one of the following could be the issue. Note: Following applies to internet explorer versions from 6 to 9
- All style tags after the first 31 style tags are not applied.
- All style rules after the first 4,095 rules are not applied.
- On pages that uses the @import rule to continuously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.
Solution:If you are badass and have a lot of time on your hand, you can go ahead and do it manually. If you prefer the smarter way instead, choose blesscss.This niffy utility will split your big css file into several smaller ones each having number of selectors within the handling limits of IE. There are 2 ways to use blesscss.
- The NODE way
- Use MAC app (Preferred)