IE’S FAILURE DUE TO A SELECTOR LIMIT

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.

Causes

As 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.

The second point above was the issue we were facing. We figured splitting our ‘application.css’ into 2 files to solve the problem and it did – but situations are not always this easy. Splitting your 1 huge stylesheet is a tedious and time consuming task and so is keeping track of the count of your selectors per file.

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)

I will not go into detail about how to install and get the NODE up and running since there are plenty of tutorials that do just that. If you are on a Mac, I’d say download the app & supply your stylesheet and you are done in a jiffy.