Nathaniel
Posted on • Originally published at getoutofmyhead.dev
#html #webdev #webperf #todayilearned
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?
This real life example was captured in the wild on theguardian.com weighing 52 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. 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 modes — 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.
Just delete the tag
Just delete it. Both Microsoft and Mozilla 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:
<!doctype html>
chrome=1 and some more weirdness.
Sometimes you'll see an additional value along side IE=edge:
Here's an X-UA-Compatible meta tag found on cnn.com weighing 62 bytes:
<!-- DISGUSTING --><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"><!-- Kill it with fire -->
Disgusting, isn't it?
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 think you should support as many as you can without sacrificing the security of users on modern browsers.
~0.04% of web users still use IE 6-8. 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:
Google dropped support for Chrome Frame in January 2014 and recommends it no longer be used.
Your site may not be accessible to IE 6-8 users at all —much of the web (including dev.to) is not. If your site forces the use of
httpsand does not support TLS 1.0, then IE 6-8 users cannot access your content anyway — makingx-ua-compatibleredundant.If you choose to support IE 6-8 you should assume that those users will not have Chrome Frame installed — asit has long not been supported.
Building your website using the principle of progressive enhancement will always be better than any browser specific hacks.
