Why use X-UA-Compatible IE=Edge anymore?

Question

I've taken several online courses lately and I still see some instructors add the following meta tag to the top of their documents by default:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

The thinking appears to be that this is just as important and useful as <meta charset="UTF-8">.

But why?

According to Microsoft's Modern.ie documentation it's "best practice" which "ensures Internet Explorer uses the latest engine". Ok, fair enough.

However, if you follow the flow diagram on MSDN it clearly shows that a document without X-UA-Compatible information is forwarded to the user's "Compatibility View" preferences, and if that's not set then just follow the !DOCTYPE declaration.

In other words, unless the user has some Compatibility View settings in place, IE will just follow your !DOCTYPE and use the latest standards mode of your browser for rendering anyway... No need for a X-UA-Compatible IE=Edge statement at all.

As MSDN says: "Use the HTML5 document type declaration to enable edge mode".

So in what circumstances is X-UA-Compatible IE=Edge needed?

Solution 1

In theory, including <meta http-equiv="X-UA-Compatible" content="IE=edge"> forces IE to display your HTML using "Standards Mode" (as opposed to "Quirks Mode"), making it more inline with other modern browsers.

However, as @David's answer points out, unless you're hosting a site in the "Local Intranet" zone, there is very little reason to include it and, according to Microsoft's best practice recommendations, absolutely no reason to include it in the HTML itself. (You should place it in your server config or site headers.)

If you are considering using X-UA-Compatible anywhere in your project, you should remember that the "Compatibility View" logic which uses it is only included in IE8, IE9 and IE10. (It was only introduced in IE8 and was disabled in IE11.)

Also be aware that IE11 is the only officially supported version of IE at this time (EOL support is scheduled for June 15, 2022). All older versions of IE should be considered insecure and not be used.

If that wasn't enough reason to convince you not to use it, consider that Microsoft state that IE8 and above already automatically render in Standards Mode when a <!DOCTYPE is present, making it even more pointless.

You can see for yourself the flow that IE takes to decide what document mode to use:

As you can see, if no X-UA-Compatible meta tag or HTTP header is present, it checks the user's "Compatibility View" settings. If the user doesn't have any for your website, IE then checks for the presence of a <!DOCTYPE declaration. If it finds one it automatically uses the latest Standards Mode (aka "EmulateIEx"). If it doesn't, it reverts to Quirks Mode.

Even more reasons why you shouldn't use the "X-UA-Compatible" meta tag from Microsoft themselves (emphasis mine):

When Internet Explorer encounters the X-UA-Compatible META tag it starts over using the designated version's engine. This is a performance hit because the browser must stop and restart analyzing the content.

In other words, It slows initial page render

The X-UA-Compatible directive is a tool to allow applications to work in the latest Internet Explorer version while updates are made to the application.

It was only ever designed for temporary use.

The best practice is an X-UA-Compatible HTTP Header. Adding the directive to the response header tells Internet Explorer what engine to use before parsing content begins. This must be configured in the web site's server.

In other words, there's better ways of implementing X-UA-Compatible if you absolutely need it.

Starting from 12 January 2016, only the most current version of Internet Explorer available for a supported operating system will receive technical supports and security updates. Internet Explorer 11 is the last version of Internet Explorer, and will continue to receive security updates, compatibility fixes and technical support on Windows 7, Windows 8.1 and Windows 10.

IE11 is the only officially supported version of IE.

The only reason to include the X-UA-Compatible meta tag in your HTML was to override a user's "Compatibility View" settings in IE8, 9 and 10 for your website. In almost every case the user will not have changed these settings (why would they?), and now those browsers are not even supported anymore.

In short: You should never need to include this tag.

Solution 2

If the user is browsing a page located in the "Local Intranet" zone (such as on a corporate intranet), the "compatibility view" is turned on by default. This is when I have used "X-UA-Compatible" to force IE to use the latest engine.

Solution 3

As long as it is set to “Edge” it validates as HTML5, and I'm told it only causes IE to re-render the page if the site was already rendering it in Compatibility mode. Still, putting it in the server config (.htaccess, etc.) is better than putting in the HTML of each page.

Comments

[Chuck Le Butt]

Yep, that seems like a valid use, but in that situation you'd probably want to put it in the server config, or the site's headers anyway? stackoverflow.com/a/9338959/199700

[bennettp123]

Those flow charts are fantastic.

[kilkenny]

There is also a change caused in part by Microsoft deprecating Compatibility View a little. In addition to Local Intranet, if a domain has a lot of subdomains & applications on it, adding Compatibility View for a subdomain applies it to the ENTIRE domain now (before it only applied to the specific subdomain). So if you have even just one application that may require it, you should do this for all your others to avoid support problems.

[Doug Johnson]

Just a note, as of today (10/16/2015), it's true that the compat button in IE11 is gone, but it still can be enabled in the Settings menu, so it still exists as a possibility. We use it today because our web based software is used in corporate intranets that have legacy systems that require compat mode to work, so we have to get around that. Great tip on the HTTP header though, thanks for that!

[boly38]

my 2 cents: do not include <!--[if IE]> before X-UA-Compatible meta tag

[Tom Boutell]

Since it is still possible to enable compatibility view in IE11 and corporate clients are doing that, the header/tag is still useful. I can see why the HTTP header is superior but if the tag is at the very beginning of the DOM little harm is done, and only in browsers that didn't start out in Edge mode. As a provision solely for the occasional user stuck in compatibility view I don't think it's a bad practice to use the tag (right at the top of <head>).

[Chuck Le Butt]

@boutell The Compatibility View button has been completely removed in IE11. The only way a user could view your site in CV in IE11 is if they have manually added your domain to their list of sites to view in CV mode in their settings. docs.microsoft.com/en-us/internet-explorer/ie11-deploy-guide‌​/…

[Tom Boutell]

@ChuckLeButt Or their administrator has done that "for" them via Group Policy. Still very much a thing in corporate settings which is where it's been the biggest win for us to have a way to override it.

[Chuck Le Butt]

@boutell But the administrator would have to target your domain specifically with their group policy. Why would they do that if it could easily be overridden by the site in question anyway? I just can't imagine the scenario you're suggesting at all. Group policy CV settings work for the company's own properties, where they control the site content. Sorry if I'm missing something.

[Tom Boutell]

@ChuckLeButt I see your point and don't have the windows-fu to contradict it... and yet, our client told us they had IE11 in compat mode across the board; how they got it there wasn't really knowledge shared with us. It is possible that they actually had it on an explicit list all along.

[Chuck Le Butt]

@boutell Interesting. Thanks for sharing.

[Albert Wiersch]

A meta tag with http-equiv="X-UA-Compatible" does not currently fail HTML validation.

[ravilov]

@ChuckLeButt, headers are good so long as you're on the network, but if a user chooses to save the page locally, all you're left with is the embedded <meta> tags. That's why it's generally a good practice to replicate important headers as <meta> tags as well.

[Sergei Kovalenko]

For many of windows native applications, if they want to use a web-view, IE turns automatically into IE7 (!) mode. Even today in 2019. For compatibility reasons. And depending of how much effort the developers have put in their win app (the less, the worse), your headers and meta tags won't improve the situation. And none of the modern javascript would work in that web-view component.

[Martin Braun]

Visual Studio Code's bang (!) Emmet Abbreviation will also paste the X-UA-Compatible meta tag. Type ! and tap in an empty HTML document. It's like a hair in the served soup.

[vintprox]

Emmet includes X-UA-Compatible for no reason at all. I had to add an override on ! snippet to let students use it for best practice.