Old IE continues to cause the world pain…

Incase you didn’t know, IE8 and IE9 are pretty horrible web browsers. They have a significant flaw where they can not render webpages if a single stylesheet has more than 4095 selectors. This issue affects all Microsoft browsers until IE10. Wow.

Unfortunately, these terrible browsers still represent over 8% of the worlds internet traffic, and may need to be supported for certain projects. So, what is the easiest way to keep your site compatible with these old versions of IE without driving you mad?

I’ve explored several tools to automate splitting a single large stylesheet into smaller ones to avoid hitting this limit including blesscss, css_splitter, and home rolled scripts but I haven’t found any of them to be a real home run. Each solution is fairly complex in nature which makes sense given the problem at hand. Unfortunately, that complexity also makes for painful debugging when things go wrong. At the end of the day, I would prefer to simply be notified when my CSS files breach the selector limit, and then fix the issue manually by splitting the files into logically related files (ex: application styles vs admin styles).

This is a great usecase for a unit tests and I recently released the rspec-respect_selector_limit gem which contains a reusable matcher for asserting that your stylesheets won’t break old IE. It’s a simple tool to integrate into your existing Rspec testsuite like so:

it 'ensures application.css does not break old IE' do
  expect('application.css').to respect_selector_limit
end

For applications that already have multiple stylesheets, the rspec-respect_selector_limit gem has an additional helper to assert that all of your precompiled CSS files meet the limitations of old IE.

it 'ensures all configured CSS files do not break old IE' do
  expect(precompiled_css_files).to respect_selector_limit
end

This is a simple solution that keeps me in control of when to split out new stylesheets, and as always contributions are welcome!