You've mastered doctypes, now it's time to get control over the new kid on the block in the browser rendering space. Internet Explorer 8 is gaining traction and is actually the first browser to extend — and in many ways replace — the doctype standards/quirks switch. With a single line of code—one meta tag to rule them all—you can **reduce your QA time by exerting total control over how Internet Explorer 8 renders a page.**
Microsoft painted themselves into a corner with Internet Explorer. As far back as IE5 they knew there was a problem — that's why they introduced the doctype switch, to move between quirks (IE5 engine) and standards (IE5 Mac / IE6 engine). When IE6 became dominant, most websites were written with its own strange "standards" in mind, and we know how that ended. Then IE7 compounded the problem; by having its own set of strange behaviours and becoming as dominant as it did, Microsoft guaranteed that there would be thousands of websites built for IE7 specifically, as well as for IE6.
And now we have IE8, by all means the most standards compliant browser Microsoft has ever produced (it can even pass Acid2). However, getting it to use that engine is tricky. You see, IE8 has six (yes, six) rendering modes.
Six rendering modes?!
To be fair, IE8 really has three rendering engines, but there are six different ways to determine which one is used. If you write standards-compliant, valid pages the only thing you really need to know is to use this meta tag at the start of your pages:
- <meta http-equiv="X-UA-Compatible" content="IE=8" />
This tag tells IE8 to use its new standards-compliant engine to render the page, which is exactly what we want. But we said there were six modes, right? There are — but hopefully you won't need to use them.
- <meta http-equiv="X-UA-Compatible" content="IE=X" />
To use one of the other rendering modes, replace the IE=X above with one of these five values:
- IE=5: If you need to use this one...well, shame on you. This tells IE8 to render in IE6 quirks mode — basically using the IE5 engine.
- IE=EmulateIE7: This causes IE8 to behave almost exactly like IE7. If there's a valid, current doctype, use the IE7 engine — if not, use the IE5 engine.
- IE=7: This will always use the IE7 "almost standards" engine, regardless of doctype.
- IE=EmulateIE8: Much like EmulateIE7, this tag will look for a valid doctype and, if it can't find one, will use IE5 (yes, it will go between IE8 and IE5 based on the doctype. We imagine the effect must be fairly spectacular).
- IE=edge: Here we have an interesting case. Right now using edge would have no different effect from using IE=8, but it represents one of very few instances of Microsoft thinking forward, instead of back. Edge tells the browser to use whatever is the latest engine, in IE8's case that would be the new standards engine. In IE9, it'll be likely another new engine, and so on. Edge is a cool idea – you only run the risk of your page breaking in IE9, if Microsoft handles some elements differently going forward. A List Apart has a great post on why this might be a good idea for every browser to implement that's worth a read.
Baffled? Giorgio Sardo over at MSDN put together a great little flow chart explaining the different modes.
Microsoft May Be Ahead of the Curve
Yeah, that hurts to say. Internet Explorer has been a colossal pain for people that design for the web for a long, long time now — and will be for quite some time still. If IE6 and IE7 ceased to exist, replaced entirely with IE8, we might be in pretty good shape. Microsoft has, however, done something potentially cool here, making accurate browser targeting a feature of the browser.
Standards will evolve over time and so will browsers, but there will always be pages older than the software rendering them. Extending this meta tag to the Firefoxes, Safaris, Chromes, etc might give us greater control in the future over how our sites are rendered.
Until then, this is how you rule over Redmond's newest entry in the ongoing browser wars. With IE8 gaining market share it's about time to start adding it to QA lists, and using the correct meta tag will make that process just that much easier.