README
highest-available-document-mode
)
Highest document mode (highest-available-document-mode
warns against not informing browsers
that support document modes to use the highest one available.
Why is this important?
Internet Explorer 8/9/10 support document compatibility modes. Because of this, even if the site’s visitor is using, let’s say, Internet Explorer 9, it’s possible that Internet Explorer will not use the latest rendering engine, and instead, decide to render your page using the Internet Explorer 5.5 rendering engine.
Serving the page with the following HTTP response header:
X-UA-Compatible: ie=edge
or specifying the x-ua-compatible
meta tag:
<meta http-equiv="x-ua-compatible" content="ie=edge">
will force Internet Explorer 8/9/10 to render the page in the highest available mode in the various cases when it may not, and therefore, ensure that anyone browsing the site from those browsers will get the best possible user experience that browser can offer.
Of the two methods, sending the HTTP response header instead of using
the meta
tag is recommended, as the latter will not always work
(e.g.: if the site is served on a non-standard port, as Internet
Explorer’s preference option Display intranet sites in Compatibility View
is checked by default).
Notes:
If the
meta
is used, it should to be included in the<head>
before all other tags except for the<title>
and the other<meta>
tags.Appending
chrome=1
to the value of the HTTP response header or the meta tag is not recommended asChrome Frame
has been deprecated for quite some time.
What does the hint check?
By default, the hint checks if the X-UA-Compatible
response header
is sent with the value of IE=edge
, and that the meta
tag isn’t
used.
Examples that trigger the hint for defaults
X-UA-Compatible
response header is not sent:
HTTP/... 200 OK
...
X-UA-Compatible
response header is sent with a value different
than ie=edge
:
HTTP/... 200 OK
...
X-UA-Compatible: IE=7
HTTP/... 200 OK
...
X-UA-Compatible: ie=edge,chrome=1
X-UA-Compatible
response header is sent, but the meta
tag is
also specified:
HTTP/... 200 OK
...
X-UA-Compatible: ie=edge
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>example</title>
...
</head>
<body>...</body>
</html>
Examples that pass the hint for defaults
HTTP/... 200 OK
...
X-UA-Compatible: ie=edge
The hint can be configured to require
the X-UA-Compatible
meta tag. This option is indicated mainly for
the case when the HTTP response header cannot be set.
Examples that trigger the hint
X-UA-Compatible
meta tag is not specified:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
...
</head>
<body>...</body>
</html>
X-UA-Compatible
meta tag is specified with a value different than
ie=edge
:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=9">
<title>example</title>
...
</head>
<body>...</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<title>example</title>
...
</head>
<body>...</body>
</html>
X-UA-Compatible
meta tag is specified in the <body>
:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
...
</head>
<body>
...
<meta http-equiv="x-ua-compatible" content="ie=edge">
...
</body>
</html>
X-UA-Compatible
meta tag is specified in the <head>
, but it’s
not included before all other tags except for the <title>
and the
other <meta>
tags:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<script src="example.js"></script>
<meta http-equiv="x-ua-compatible" content="ie=9">
...
</head>
<body>...</body>
</html>
Examples that pass the hint
HTTP/... 200 OK
...
X-UA-Compatible: ie=edge
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<script src="example.js"></script>
...
</head>
<body>...</body>
</html>
How to configure the server to pass this hint
How to configure Apache
Apache can be configured to add or remove the X-UA-Compatible
header using the Header
directive.
X-UA-Compatible
header on Apache
Adding the <IfModule mod_headers.c>
# Because `mod_headers` cannot match based on the content-type,
# and the `X-UA-Compatible` response header should only be sent
# for HTML documents and not for the other resources, the following
# workaround needs to be done.
# 1) Add the header to all resources.
Header set X-UA-Compatible "IE=edge"
# 2) Remove the header for all resources that should not have it.
<FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ic[os]|jpe?g|m?js|json(ld)?|m4[av]|manifest|map|markdown|md|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)