get out of my <head>


What it is and why you don't need it in your website

The x-ua-compatible is everywhere. It appears in the <head> of extremely popular websites — it may even be on your website. But what is it?

X-UA-Compatible meta tag.

this real life example was captured in the wild on weighing…

53 bytes

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

What does x-ua-compatible do?

This tag is used to tell Internet Explorer (IE) to render your web page in specific, non-standard ways.

IE has different different document modes that allow you to view a webpage as if you we're using an older version of the browser.

IE 6 and 7 (and other old browsers) did not properly implement W3C specifications. So, when Microsoft released the (mostly) spec compliant IE 8 — sites built especially for IE 6 and 7 didn't work as expected.

Document modes was the solution to this problem — and the x-ua-compatible meta tag was how you chose a document mode.

To understand why your site definitely does not need this tag, we'll have to dig a little deeper…

What does IE=Edge mean?

IE=edge tells IE to use the latest available document mode. That sounds great — we want everone to get the best experience possible.

But, this is already the default experience! So long as you correctly declare your <!doctype> (which you will), IE will use the latest document mode.1 That means IE 8 uses IE 8 mode. IE 9 uses IE 9 mode, and so on.

All IE=edge does is tell IE to do something it already does. It's maddening.

So, it does nothing. Then why is it everywhere?

My theory —  developers were afraid that IE would render their page in an older document mode. There was a lot of uncertainty surrounding IE and the documentation for this tag is overly complicated — it was better to be safe than sorry.

Using this tag would also stop a compatibility mode button from appearing in IE 8-10. If the button was present, it allowed users to toggle between a spec-compliant mode and older document modes2 — which may have spooked some developers.

x-ua-compatible was added to templates and frameworks by clever developers — who probably know something you don't — and the more it appeared the more it seemed like it was necessary.

Bootstrap, a very popular UI framework made by Twitter, recommended using this tag up until 2018.3

Just delete the tag

Just delete it. Both Microsoft4 and Mozilla5 now recommend correctly declaring your doctype to stop IE from entering compatibility mode (and other browsers from entering quirks mode).

Correctly declaring a doctype is important — it has nothing to do with old ie compatibility modes or x-ua-compatible — you should be doing it anyway.

make sure this code is the first thing in your document

15 bytes

<!doctype html>

chrome=1 and some more weirdness.

Sometimes you'll see an additional value along side IE=edge:

X-UA-Compatible meta tag found on Disgusting, isn't it?

62 bytes

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

This is used to tell IE 6-8 to use Chrome Frame — a browser extension that runs the Chromium JavaScript and rendering engine inside IE — like a browser inside a browser.

This was a solution for legacy browsers to use Google Wave, a predecessor to Google Docs.

Users of IE 6-8 with Chrome Frame installed, could potentially have a better experience if you add that tag…if they exist!

Should your site support IE 6-8 with Chrome Frame installed?

Should your site should support legacy browsers? It's a difficult question — I believe you should support as many as you can without sacrificing security.

~0.04% of web users still use IE 6-8.6 That's millions of people, and their access to your website shouldn't be dismissed without some thought.

There are some things that should be taken into account:

  1. Microsoft Internet Explorer Standards ↩︎

  2. IE8 and the X-UA-Compatible situation ↩︎

  3. bootlint on github ↩︎

  4. Compatibility changes in IE11 ↩︎

  5. Quirks Mode and Standards Mode ↩︎

  6. Information from StatCounter via ↩︎

  7. Chromium Blog ↩︎

  8. Can I Use — TLS 1.1 browser support ↩︎

  9. Progressive enhancement ↩︎