Is Your Website Ready for Internet Explorer 8?
January 11th, 2009 Filed under: Tutorials by AndrewIf you’re a web designer who likes to stay on top of things, then you’re fully aware of the coming of Internet Explorer 8, and the devastating havoc it will bring to the world. Microsoft promises IE 8 to be fully standards compliant, which of course is a good thing. No more silly hacks to make a particular element behave correctly, right? The downside of things is that all that work you put into your website to look pretty and proper in IE 6 & IE 7, will completely destroy your layout in IE 8.
How is this possible you ask? When IE 7 was released, it carried over most of the annoying non-standards compliant behaviors from IE 6. In turn, the transition wasn’t as painful (it still hurt though, and there were many websites that still broke) and most of the IE 6 style fixes still applied to IE 7. IE 8 however, runs off of a completely different rendering engine.
Since IE 8 is standards compliant, it behaves just like any other browser, such as Firefox and Opera. But what happens to websites that were optimized for IE 7? They break! Microsoft knows this fact, which is why they introduced “Compatibility View.” This entails a button next to the browser’s address bar. When clicked, IE 8 renders the page in compatibility view, which is a fancier way of saying “IE 7 mode”. Awesome, so now the user will know to push the button when they encounter a website that is looking mighty disheveled. That is fine and dandy, but I feel the user shouldn’t have this kind of power, and it’s the web designer’s responsibility to make sure their websites look good, no matter which browser is being used. There are quick fixes that will keep your client from biting your head off, which leads to my next topic.
Microsoft knew that the transition into standards compliance would be difficult, so they enlisted the help of the Web Standards Project. “Browser Version Targeting” is the solution they came up with. With a brand spanking new tag, you can instruct Internet Explorer to render a page in a specific browser version. So the quick fix for any non IE 8 compliant web pages is to insert this new tag into the head section, and tell IE 8 to behave just like IE 7.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
As a benefit, this tag also makes the Compatibility Button disappear. What if your site is IE 8 ready and you don’t want your pages to ever see the light of day of IE 7? Simple, tell the browser to render the page with IE 8’s rendering engine.
<meta http-equiv="X-UA-Compatible" content="IE=8" />
This is a good solution for the time being, but do we want our pages to always be rendered under IE 7 or 8? By the time IE 12 is released, why would we still force IE 7 mode? With the simple “edge” keyword, our sites will render in the latest browser version while killing the compatibility view option.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Since IE 8 is fully standards compliant, does this mean we can now forget about cross browser compatibility on IE 7? Absolutely not! I still check my pages under IE 6 because I know for a fact there are still people using it on older machines and operating systems. I’m afraid we’re not out of the woods yet; we still have a few years to go before earlier non compliant predecessors are phased out.
So in conclusion, I strongly recommend that you start testing your pages under IE 8. Beta 2 is currently available, although it is still awfully buggy. If you find layout issues under IE 8, the quick fix is to force an earlier version through browser version targeting. This of course is a temporary fix; you shouldn’t have your pages render under IE 7 forever, so the best course of action is to revisit your work and correct any problems for IE 8. Get rid of the compatibility view option, and you come out as a capable web designer who stays on top of things!
A List Apart features a much more detailed article on this subject, so please check it out if you would like to learn more about IE 8 and browser version targeting.
One Response to “Is Your Website Ready for Internet Explorer 8?”
Leave a Reply
You must be logged in to post a comment.
Microsoft also recently introduced the “Emulate IE7″ mode. Simply put, with this mode enabled, pages without standard DOCTYPEs are rendered in Quirks mode. Compared to IE=7 mode, which displays pages in Standards mode, no matter what the DOCTYPE. To emulate IE 7, the tag would be written as: