Internet Explorer 8. Probably the most annoying phrase in the world, considering how much effort we used to put into making our websites work in that browser. While IE8 Countdown is running, the browser still has around 10% of worldwide share. So how do we deal with it to minimize our effort, keep our code base lean and clean, and provide those sad IE8 users with an acceptable user experience?
Well, it’s all a matter of setting priorities right. IE8 doesn’t have to mimic advanced experiences of modern browsers — it just has to be functional. So we can use px as fallback for rem units, and instead of Respond.js, serve a fixed-width layout with extra ie8.css styles. For rgba(), hsla(), we can fall back to solid colours. Lack of :last-child(), :nth-child, box-shadow, border-radius and background-size is usually perfectly acceptable, and we have to serve .eot instead of .woff for web fonts. In order to generate ie8.css, we can either serve a lowest common denominator (mobile view) or a “desktop” view using Conditional Comments, with sass-mq mixin or LESS mixin which collect all styles up to the desktop experience (when built “mobile first”). Last but not least, don’t forget about the good ol’ shiny * { box-sizing: border-box } that saves the day in RWD anyway.
This should be enough. And that’s the strategy we’ve been following for the last few months as well. Depending on thenumber of IE8 users, you could put more or less effort into your IE8 strategy, but serving a basic experience isn’t that difficult, and doesn’t have to take up too much of your time or cost toomuch money — if the client plays along, that is.
