Using the asset pipeline seems like a no brainer. It works great it almost every circumstance. It is sort of like magic, you deploy to production and all your files are neatly bundled into one concatenated application file. This works great, until it doesn’t. Even the asset pipeline, at some point, has to deal with Internet Explorer.
Hitting the limit
Limit – “The point, edge, or line beyond which something cannot or may not proceed.”
The definition above perfectly describes the behavior of Internet Explorer when dealing with large stylesheet files. IE (6-9) cannot proceed past 4095 rules in one stylesheet. The behavior that occurs is really hard to understand and debug. Once IE hits the magic number of 4095 it stops applying style rules to the page. Ruh ro!
What about the rails?
Now that we know about this problem, the question is… What does this have to do with Rails and the asset pipeline? Well, you could imagine that if you started to build a large enough site with several stylesheets and they were all combined into one sheet (via the asset pipeline), you could start to approach that 4095 limit. Again, once you hit that limit IE will stop applying styles and your page will look broken.
The only thing we can do is breakup. Breaking up the stylesheet into smaller ones will hopefully put us under the 4095 limit. Remember the limit is per stylesheet, so if we break the rules up we shouldn’t have a problem.
There a gem for that
Of course, with Rails there is a a gem for everything. This case being no exception. The css splitter gem has been built just for this reason. Full disclosure: I have not used this gem but it looks like an easy solution.
For my project I didn’t use the css splitter gem. Most of my styles were in two different stylesheets, plus bootstrap. I made another stylesheet rule in my layout for bootstrap and split the files up manually. Since bootstrap has a ton of rules that was originally putting me over the 4096 limit. The last thing to remember is to remove “*= require_tree .” from your application.css file.
<%= stylesheet_link_tag "application", :media => "all" %>
<%= stylesheet_link_tag "bootstrap", :media => "all" %>
As much as we would all like IE to go away, it’s not going anywhere soon. The good news is with some relatively easy manipulation we can get our site back up and running full speed ahead.