We recently had a client who wanted an all singing all dancing modern website – but as a big company with an International reach, their website also needs to be available to the widest possible audience. Therefore despite all the modern bells and whistles, they wanted the site to perform well on Internet Explorer v7.
IE7 was released in 2007, almost 2 years before chrome was available to the public. At the time it was exciting because the alternative we’d been stuck with was IE6 which had more than it’s fair share of caveats. However, it soon became clear that IE7 also had it’s limitations.
When building a site that needs to work for such a range of browsers it’s important to consider a strategy. You could code the whole site to work across browsers old and new, but you need to be extremely careful about the CSS and code you write and you can often feel yourself very limited in what you can do. You want to create a beautiful site but you’re doing it with one hand tied behind your back if you’re not allowed to use modern techniques. So another option is to code effectively 2 versions of the site, one for modern browsers and one for old.
Or you could do what we opted for, where we coded additional versions of key pages / sections of the site so that visitors on IE7 get a slightly limited view of the whole site, but they can at least pick up key product and contact information. There’s also a message on every page of the site that politely suggests they upgrade their browser to see the full site.
If someone tries to visit a page of the site from IE7 that doesn’t have an IE7 version, they’re taken to the home page (or rather, the IE7 version of the home page).
There are lots of things to consider when coding for IE7, if you’re used to modern techniques, so here are my top 5:
1. CSS3 is not supported
This means things like border-radius, animations, nth-child selectors, and transforms will not function in Internet Explorer 7.
2. You cannot use SVGs
IE did not support Scalable Vector Graphics until IE9, so you won’t be able to have easily scalable graphics for high resolution displays without involving a large amount of unnecessary data.
3. jQuery 1.12 is the last supported version
You will need to ensure you include v1.12 of jQuery to ensure that your site will work with IE 7, as from v1.13 onwards they have dropped legacy support for IE 6/7/8.
4. Use text-align: center over margin: auto
Using margin: auto in IE7 seems to have its quirks, and so it is widely recommended to put your content in a wrapper and apply text-align: center in order to align content to the middle of the page.
5. RGBA returns a solid colour, not transparency
If you want a transparent shape on your page then you have two options; use filters or, if you are putting content in front of the transparent area, then a simple transparent image will have to suffice as the filters are applied over the content.