IE8 Rendering Modes: One Meta Tag to Rule Them All
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.
7 comments
Oliver Nassar says
Awesome cover graphic. Great write up.
Matt (ZURB) says
Very cool. Using edge seems like running with scissors (or in this case Narsil), but it's nice of IE to give us a clean option if we choose to do so.
Dwayne says
The functionality to control emulation modes in IE8 is a godsend!
The META tags are a really great approach. It's worth noting that if you're using the Ruby on Rails framework, you can use before_filter to globally send a header not unlike headers['X-UA-Compatible'] = 'IE=EmulateIE7' – the benefits being that you don't have to concern yourself with maintaining the meta tag approach across multiple layouts and, to a lesser extent, that it makes for slightly less HTML to send down to the browser.
A.J. Cates says
How the fuck are they ahead of the curve? How the fuck is this a good idea? I hate having to go back and make changes for IE6, then I have to go back and make different changes for IE7, now IE8. I have to mange 4 different versions of my website and soon 5.
The idea of standards is that everybody shows the same code the same way no matter what. Now in practice it doesn't always work out like this, but at least if your web page becomes 100 years old since it has a standard doc type listing the html version it can be rendered properly. Labeling a web page with a proprietary version number for a proprietary browser is one of the worse things you can do for the internet.
Microsoft needs to get rid of IE as a charity gig. Destroy it for the good of the internet.
Jonathan (ZURB) says
A.J.
The purpose of the meta tag is so you don't have to manage versions of your website , and it's not really meant for you to use on new sites. What this allows you to do is take a site you've already QA'd for IE6 or IE7 and force IE8 to render it with the appropriate engine, instead of creating yet another targeted CSS file for IE8.
Right now sites are QA'd for what exists, but what exists is always changing. Even a site written for Safari 3 may not work in Safari 4 (text outline changed). Should I have to go back and fix my site for the new browser, or can I just add a meta tag that says 'render as Safari 3' and let it go?
Standards will always be the best way to develop a site, and the most likely to work correctly going forwards, but as you yourself say in practice it doesn't work that way. Like it or not we have to QA standards-based sites for Firefox, Safari, IE 6, 7 and 8 and as new versions of those browsers come out things will change. What Microsoft has done is made it so going forward you could write a site for IE8 and permanently set it to that engine. It's not ideal, and it's fixing a problem they helped create, but it's more proactive than they've been in a while.
Bob says
How does this relate to the "compatibility mode"?
