Recently I was asked to modify a site so that it would work across all versions of Internet Explorer from 7-Edge. While I would usually consider browser compatibility of the utmost importance, being asked to have a site work in IE 7 & 8 was a bit absurd but considering the target market for the products sold on the website I might give the benefit of the doubt.
How important is it have your website run in IE7, 8 and 9 in 2016 ?
I usually aim to build all my sitesto work in IE 10 and above. In my honest opinion there is such little traffic coming from the dinosaurs using IE 9 and below to even bother addressing. If you want a site that looks cutting edge then you will have to sacrifice backwards compatibility in older versions of browsers. Trying to get one of the recent WordPress themes to work with IE7-9 is like trying to use your smartphone in the 1980’s.
The image on the right provides the usage statistics from Google Analytics for a 30 day period from February 1, 2016-March 1,2016 by Internet Explorer users by version. As you can see there is an insignificant amount of people (roughly 8%) that are using IE 7, 8 and 9. Remember this sample IS NOT based on the OVERALL visitors on the site, but ONLY for users using Internet Explorer 7-9.
Recently I was working on a site that uses a WordPress theme called Canvas which is sold by woothemes.com. The theme itself is called canvas since it’s a bare bones template which can be built on. It isn’t the most cutting edge template out of the box but is already backwards compatible in IE but presents a lot of style issues that need to be addressed.
If you want to address CSS issues that are for specific Internet Explorer versions you use the following tips.
1. Create a new CSS file for the IE version you’d like to apply custom CSS for. For IE7 call it something like ie7.css
2. Upload the file to the theme folder’s /css directory. If one does exist then create one so you can store all your custom css files in this folder.
3. Add the custom code below to your header.php or preferably through the WordPress dasbhoard through your theme. Most templates allow you to add additional code through the themes management tool. Below are conditional tags that can be added to the header to call the appropriate CSS when necessary.
For IE 7:
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="/path-to-file/relative-path/IE7.css" /> <![endif]-->
For IE 8:<!--[if IE 8]> <link rel="stylesheet" type="text/css" href="/path-to-file/IE7.css" /> <![endif]-->
For IE 9:<!--[if IE 9]> <link rel="stylesheet" type="text/css" href="/path-to-file/IE7.css" /> <![endif]-->
You can get more information on how these header tags work by visiting: https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
4. You can test the changes using the latest version of Internet Explorer. It comes with an emulator that allows you toggle back to previous versons just by hitting F12 and selecting the browser version from the dropdown.