IE9 is the devil

Here at Wellbe, we have a large and varied client base. And, since those clients are in health care with the usual health care budget and machine upgrade issues, something in the horrible neighborhood of 20% of our clinical users are still using…<shudder>…IE9.

IE9 has a selector limit of 4095 selectors and 31 import statements per stylesheet. Back in the Internet dark ages (you know, half a decade ago), I’m sure this seemed like a ridiculously high number. But, as CSS has grown to handle more and more of the web’s appearance, 4095 is not nearly enough. And with a Rails pipeline that concatenates all styles into one long sheet, we started hitting that limit. After several months of limping along, pulling out old IE8-specific styles and searching through stylesheets for unused selectors, we had to do something else.

After some research, we started using a great gem by zweilove that automatically splits css files up for antiquated browsers like IE9. This worked great on our QA servers as well as on production. Locally, since the stylesheets are not concatenated and thus didn’t need to use the css_splitter gem, the selector limit wasn’t an issue. For a while. It was a blissful six months. But, then we introduced semantic-ui into one section of our app, which overruns the selector limit all on its own, and hit the selector limit in the stylesheet for one big feature in another section of the app. We started compiling assets for production locally so that we could benefit from the css_splitter gem in the local environment, but this was horribly time-consuming as the assets needed to be re-compiled every time a change was made. It could take a couple of hours to make a couple rounds of UI changes. Nope, not workable.

Disabling Semantic-UI for one section of the app, temporarily, got the remainder of the styles to render locally to be able to do bug fixes. (I can’t imagine why our QA staff frowned on my previous method of making CSS changes “blind” without being able to see results, forcing them to deploy to their QA servers to see if my guess had been successful.) But, the other section of our app wasn’t using Semantic-UI. So, why weren’t any of the styles rendering? I tried turning off all but one stylesheet — still, no styles. With all but one stylesheet disabled, we were nowhere near hitting the selector limit, so it should have been working.

Having exhausted that possibility brought me to media queries, unlikely as that seemed. When you have the meta tag for http-equiv=”X-UA-Compatible” set correctly, it should allow IE9 to understand media queries. (Notice the use of the word “should,” as in that horrible phrase “this should work.”) In our layout files, we have a series of stylesheet_link_tags that look something like this, one for each device category:

<! — [if IE 9]>
<%= stylesheet_link_tag “wellbe/standalone-1024_split2”, media: “only screen and (min-width: 1024px) and (max-width: 1199px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)” %>

The _split2 is for the css_splitter gem to be able to do its magic. And the rest is to allow for responsiveness. It all works just fine in production, so it took a moment of desperation before I tried disabling it locally, expecting it to have no effect. But, switching it the following… bingo, we have styles!

<! — [if IE 9]>
<%= stylesheet_link_tag “wellbe/standalone-1024_split2”, media: “only screen and (min-width: 1px) and (max-width: 1199px)” %>

Well, we have some styles. Not a full bingo yet. Some of the styles still weren’t rendering. Upon digging further, I found that several of our stylesheets were exceeding the selector limit. So, I started splitting them in half and portioning sections of them off into other sheets where it made sense. Checking again showed that more styles rendered but some still didn’t. We officially have reached that horrible rock and hard place between the selector limit and, now, exceeding the 31 import statements allowed in one sheet.

At this point, I had spent more time on IE9 than any one person should have to endure, so upon chatting with our UX/UI designer, we decided that temporarily disabling stylesheets from the big _imports.sass file we use to import all stylesheets would be a workable solution when testing locally. It’s not an ideal solution, and I could have started splitting the _imports.sass that pulls in all the partials into multiple files, each below the 31 ‘@import’ statement limit. But, I was desperate to get back to work on actual useful work, so this hacked together solution can limp us along until we can finally retire support for IE9. At which point, IE10 will likely become the albatross we all use to justify that end-of-day beer.