You’ve felt the horror. You’re busy plugging away at creating a website for a company, eaking out visual design and code with passionate intensity. Suddenly you get a phone call with edits for problems you can’t reproduce on your computer. Perhaps you’re using Chrome, pull up firefox… nothing. Click on safari.. looking good.
“Um, excuse me.. what browser are you using?”
“Internet Explorer 8”
You can just smell the dust wafting through the air at their office, some foregone conclusion that nope.. it’s just the accounting computer we don’t need to update it’s software.
Just like the move for more empathy for website visitors, making sure our websites are backwards compatible is a empathetic move. One that could make and retain customers.
If your website caters to non web savvy people, IE8 is now the standard of who you need to make your website backward compatible for.
Although the bane of our existence as web designers there are some go to tools for people who want to be able to have cool things and still cater to people who are a little less web technology forward to say the least.
Modernizr is a great tool for simulating media queries in older browsers
If you have responsive elements on your website, and particularly if you have built mobile first your up-to-date visitors might have a really great experience but media queries that help with catering to mobile devices can make a website look weird on Internet Explorer 8. Modernizr allows you to simulate those media queries using a polyfill. Download it here, and add it the head of your site with a simple call to javascript. Of course this code assumes you have modernizr.js in a file called js within the same file your site files are in.
<script src="js/modernizr.js"></script>
Or if you are working in WordPress add modernizr to your theme by enqueuing the script in your functions.php file.
function childtheme_script_manager() {
wp_register_script('new_service', get_stylesheet_directory_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);
}
Likely there will already be a place where the theme is ‘enqueuing scripts’ so the part after from wp_register_scripts down to the last semicolon will be placed inside that script manager.
If editing the functions.php file of your WordPress theme is new to you, try it… it’s a powerful feeling. But if you still can’t bring yourself to it, theres’ a plugin for that.
You can use Internet Explorer workarounds that will allow you to target only that browser with your CSS.
<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
So in your page if you had an element that had a class of .header-logo, you could give it some IE8 specific CSS by putting this in your style sheet.
.ie8 .header-logo {margin-top: 10px;}
This is lovely and perfectly legitimate ‘hack’ that is super useful if you spot something you’d like to fix on only one class in Internet Explorer 7
.element {
margin-bottom: 20px;
*margin-bottom: 10px;
}
Adding an asterisk targets IE7 and doesn’t serve up that specific style to any other browsers
This is a ‘hack’ that is positively delightful if you’d like to fix only one class for Internet Explorer 8
.element {
margin-bottom: 20px;
margin-bottom: 10px\9;
}
Adding a \9 after the style and before the semicolon makes it so the style can only be read by IE8. Highly useful if an element isn’t quite working how’d like it on only that one browser.
I highly suggest dusting off a cheap old PC if you are currently rocking a Mac, and checking out your websites in developer mode on Internet Explorer. Newer versions of Internet Explorer allow you to emulate older versions of the software to see if you have any bugs or visual quirks. And with the method above you can smooth them over and deliver a good experience for people using older versions of Internet Explorer.
For further reading consider checking out CSS3 Pie
CSS3 PIE (http://css3pie.com/) – PIE stands for Progressive Internet Explorer. It is an IE specific behavior that can, when applied to an element, allow IE to recognize and display a number of CSS3 properties. Using PIE helps you be able to use commonly appreciated CSS properties such as border-radius, box-shadow and background gradients in IE8.
Have any other awesome resources for targeting and serving up deliciousness to older browsers or in particular making your website compatible for IE8? Tweet at me or leave a comment. I’d love to have you as part of the conversation.
