Saving yourself from IE8's Compatibility View

“Luke, I am your father.”

So now that Internet Explorer 8’s officially been released, it’s to be expected that plenty of users will be upgrading. Even if the common visitor to your site doesn’t immediately install IE8 like a panicked nerd who’s been waiting for his new Amiga, over the next three months the new version of Internet Explorer’s will be pushed out over Windows Update. At this moment, Net Applications reports that 67.44% of all visitors tracked are Internet Explorer users. thecounter.com reported seeing as much as 75% of it’s users as IE users. With such a significant share of Internet users using Internet Explorer, it’s only wise to ensure that your site development works well with the new version of Internet Explorer.

The one-button quick fix.

Microsoft has obviously learned from the past and didn’t want to swiftly speed down the road it’s taken in the past when releasing new versions of Internet Explorer. In the end, it was left with the chicken and egg scenario constantly facing new technologies and software. How do you move development forward and build a new platform to support new technologies (and fix broken already existing technologies) without orphaning the current significantly large user base that depends on what’s already been established? The solution the IE8 team came up with was Compatibility View.

Adding an easy access Compatibility View button tacked on to the end of the url box like a fancy revolving door, a quick click can force the rendering engine to use logic that’s similar to what Internet Explorer 7 previously used. It’s important to understand it does not make the Compatibility View button a sort of one-click IE7 as there are some significant changes that may still break a web page that would normally work just fine under Internet Explorer 7. It is, after all, Compatibility View inside Internet Explorer 8.

Bad dog. Sit.

The Compatibility View button may be a great thing for moving technology forward and still allowing visitors to view pages that appear broken correctly but it also raises an important question. Why is there a Compatibility View button in the first place? Does your site require it’s use? And what do users perceive while viewing a site that displays a compatibility button? The Internet Explorer team focused a lot of their attention on one of it’s most famous stigmas, standards compliance.

The Acid2 rendering test, which was so famously known as the yard stick used to compare browser compliance, was often at the center of debate for browser superiority. In the three years since the release of Internet Explorer 7, new browsers emerged, new standards were ratified and new technologies were developed. With a smaller market share and without the need to provide corporate legacy support, new browsers were quick to adapt and provide active support for all the new changes. This meant that more and more developers were deploying new sites focused around these new technologies and using a never ending spaghetti mess of Internet Explorer 7 (and sometimes Internet Explorer 6) workarounds.

“I’ll tell you how I became the prince of a town called Bel-Air.”

With the release of Internet Explorer 8, the team started fresh and has put together a new browser that is better, faster and more secure then any previous version. Full compliance with the CSS 2.1 specification means that the previously, sometimes endless, slew of Internet Explorer 7 specific workarounds are no longer necessary. This also means that the same markup will generate the same results between different browsers that are also CSS 2.1 compliant. Ironically, developers who thought they were going the extra mile to provide a uniform user experience between visitors by using Internet Explorer specific style sheets, meta tags and other various workarounds will soon discover that they’ve shot themselves in the foot.

It’s true that the standards that new browsers supported weren’t supported by Internet Explorer 7 and it’s true that you could get away with making things appear the same in all browsers with those workarounds, but it never meant that it was good development to do so. The Internet Explorer development team at Microsoft did what they needed to do to meet standards compliance. Now that it’s here, developers who didn’t use workarounds and simply limited themselves to using a subset of the standards that were supported by all browsers prior to Internet Explorer 8’s release will be rewarded.

Emulate your sanity.

If your site requires the use of Compatibility View to be navigated properly, then chances are you will need to spend more time testing cross-browser compatibility and find ways to offer functionality in a different manner. Where you want the bar to start will determine how many features you can use and will mostly be determined by the types of visitors your sites receive. Corporate customers or developers who write for specific targets may be able to raise the bar to recent browsers only while developers who tend to sites that serve the vast public may have to keep it as low as Internet Explorer 6. It is possible to write HTML, CSS and Javascript in such a way to support visitors using browsers as far back as Internet Explorer 5 while still providing standards compliance and cross-browser support for recent technologies, it simply requires more thought, testing and planning.

Once you’ve managed to develop, test and validate proper rendering and functionality between different versions of Internet Explorer without using version specific markup, the Compatibility View button will no longer have a need to exist when viewing your sites. Visiting a quick recap by the IE team, we learn that “use of the versioning <META> tag” will not display the Compatibility View button. Specifically, the X-UA-Compatible meta tag will allow you to set which rendering mode should be used viewing your page in Internet Explorer 8. If you’re fighting a losing battle trying to get your site to display correctly in IE8, setting the rendering mode to EmulateIE7 may be the only way to save your sanity.

Living on the edge.

If you’re quick to adapt, offer golden compatibility between browsers without workarounds and have simply no need for a Compatibility View button, then setting the X-UA-Compatible to Edge is the solution for you. Although Microsoft points out that it’s meant mostly for testing scenarios, it can be used to simply confirm to Internet Explorer that you want to have your site render in standards mode, regardless of it’s version. Forcing your site to render using a specific version of Internet Explorer may seem like a good idea at first except that doing so will also negate the need for keeping your code up to date, eventually falling into the problems that legacy support can bring. Let’s not forget also that setting meta tags to render to your site to a specific version of IE is no different then creating CSS spaghetti workarounds. It’s the same pasta with fresh sauce.

As for me, I prefer living on the edge and keeping my virtual pencil sharp, so you can bet you’ll be seeing <meta http-equiv=”X-UA-Compatible” content=”IE=Edge” /> at the top of my sites.