Highest document mode (`highest-available-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][doc
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:

``text X-UA-Compatible: ie=edge`

or specifying the x-ua-compatible meta tag:

`html`

will force Internet Explorer 8/9/10 to render the page in the highest available mode in [the various cases when it may not][ie complications], 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 themetatag 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 optionDisplay intranet sites in Compatibility
View is checked by default).

Notes:

* If the meta is used, it should to be included in the before all other tags except for the<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and the other </code><meta><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tags.* Appending </code>chrome=1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to the value of the HTTP response header or the meta tag is not recommended as [</code>Chrome Frame<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> has been deprecated][chrome frame] for quite some time.<h2 class="text-xl font-semibold mt-5 mb-3">What does the hint check?</h2>By default, the hint checks if the </code>X-UA-Compatible<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> response header is sent with the value of </code>IE=edge<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and that the </code>meta<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag isn’t used.<h3 class="text-lg font-medium mt-4 mb-2">$3</h3></code>X-UA-Compatible<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> response header is not sent:</code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">text HTTP/... 200 OK... </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></code>X-UA-Compatible<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> response header is sent with a value different than </code>ie=edge<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">text HTTP/... 200 OK... X-UA-Compatible: IE=7 </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">text HTTP/... 200 OK... X-UA-Compatible: ie=edge,chrome=1 </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></code>X-UA-Compatible<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> response header is sent, but the </code>meta<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag is also specified:</code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">text HTTP/... 200 OK... X-UA-Compatible: ie=edge </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>example
...

...

`

`$3`

`text HTTP/... 200 OK

... X-UA-Compatible: ie=edge`

The hint can be configured to require theX-UA-Compatiblemeta tag. This option is indicated mainly for the case when the HTTP response header cannot be set.

`$3`

X-UA-Compatible meta tag is not specified:

`html example ... ...`

X-UA-Compatiblemeta tag is specified with a value different thanie=edge:

`html example ... ...`

X-UA-Compatible meta tag is specified in the :

`html example ... ... ...`

X-UA-Compatible meta tag is specified in the , but it’s not included before all other tags except for the<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and the other </code><meta><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tags:</code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>example

...

...

`

`$3`

`text HTTP/... 200 OK

... X-UA-Compatible: ie=edge`

`html example ... ...`

`How to configure the server to pass this hint`

How to configure Apache

Apache can be configured to add or remove the X-UA-Compatibleheader using the [Header directive][header directive].

`$3`

`apache

# Because mod_headerscannot match based on the content-type, # and theX-UA-Compatibleresponse 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.

Header unset X-UA-Compatible

`Removing the` X-UA-Compatible `header on Apache`

If the header is sent, in most cases, to make Apache stop sending theX-UA-Compatiblerequires removing the configuration that adds it (i.e.: something such asHeader set X-UA-Compatible "IE=edge"). However, if the header is added from somewhere in the stack (e.g. the framework level, language level such as PHP, etc.), and that cannot be changed, you can try to remove it at theApachelevel, using the following:

`apache Header unset X-UA-Compatible`

Note that:

* The above snippets work with Apache v2.2.0+, but you need to have [mod_headers][mod_headers] [enabled][how to enable apache modules] in order for them to take effect.

* If you have access to the [main Apache configuration file][main apache conf file] (usually calledhttpd.conf), you should add the logic in, for example, a [][apache directory] section in that file. This is usually the recommended way as [using.htaccess files slows down][htaccess is slow] Apache!

If you don't have access to the main configuration file (quite common with hosting services), add the snippets in a.htaccessfile in the root of the web site/app.

For the complete set of configurations, not just for this rule, see the [Apache server configuration related documentation][apache config].

How to configure IIS
$3

To add the X-UA-Compatible header you can use a [URL rewriterule][url rewrite] rule that matches thetext/html content-typeheader of a response and adds it:

`xml`

Note that if your site uses a mime type different than text/html(e.g.:application/xhtml+xml) to serve HTML content, you'll have to update the value ofpattern.

`Removing the` X-UA-Compatible `header on IIS`

If the header is set by IIS using the above technique, removing the code should be enough to stop sending it.

If the header is set at the application level you can use the following:

`xml`

Note that:

* The above snippet works with IIS 7+. * You should use the above snippet in theweb.configof your application.

For the complete set of configurations, not just for this rule, see the [IIS server configuration related documentation][iis config].

`Can the hint be configured?`

requireMetaElement can be set to trueto allow and require the use ofmeta tag.

In the [.hintrc][hintrc] file:

`json { "connector": {...}, "formatters": [...], "hints": { "highest-available-document-mode": [ "warning", { "requireMetaElement": true }], ... }, ... }`

Also, note that this hint takes into consideration the [targeted browsers][targeted browsers], and if Internet Explorer 8/9/10 aren’t among them, it will suggest removing themetatag and/or not sending the HTTP response header.

`How to use this hint?`

This package is installed automatically by webhint:

`bash npm install hint --save-dev`

To use it, activate it via the [.hintrc][hintrc] configuration file:

`json { "connector": {...}, "formatters": [...], "hints": { "highest-available-document-mode": "error", ... }, "parsers": [...], ... }`

Note: The recommended way of running webhint is as a devDependency` of
your project.

Highest document mode (`highest-available-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?

Serving the page with the following HTTP response header:

``text X-UA-Compatible: ie=edge`

or specifying the x-ua-compatible meta tag:

`html`

Notes:

`$3`

`text HTTP/... 200 OK

... X-UA-Compatible: ie=edge`

The hint can be configured to require theX-UA-Compatiblemeta tag. This option is indicated mainly for the case when the HTTP response header cannot be set.

`$3`

X-UA-Compatible meta tag is not specified:

`html example ... ...`

X-UA-Compatiblemeta tag is specified with a value different thanie=edge:

`html example ... ...`

X-UA-Compatible meta tag is specified in the :

`html example ... ... ...`

`$3`

`text HTTP/... 200 OK

... X-UA-Compatible: ie=edge`

`html example ... ...`

`How to configure the server to pass this hint`

How to configure Apache

Apache can be configured to add or remove the X-UA-Compatibleheader using the [Header directive][header directive].

`$3`

`apache

# 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.

Header unset X-UA-Compatible

`Removing the` X-UA-Compatible `header on Apache`

`apache Header unset X-UA-Compatible`

Note that:

* The above snippets work with Apache v2.2.0+, but you need to have [mod_headers][mod_headers] [enabled][how to enable apache modules] in order for them to take effect.

If you don't have access to the main configuration file (quite common with hosting services), add the snippets in a.htaccessfile in the root of the web site/app.

For the complete set of configurations, not just for this rule, see the [Apache server configuration related documentation][apache config].

How to configure IIS
$3

To add the X-UA-Compatible header you can use a [URL rewriterule][url rewrite] rule that matches thetext/html content-typeheader of a response and adds it:

`xml`

Note that if your site uses a mime type different than text/html(e.g.:application/xhtml+xml) to serve HTML content, you'll have to update the value ofpattern.

`Removing the` X-UA-Compatible `header on IIS`

If the header is set by IIS using the above technique, removing the code should be enough to stop sending it.

If the header is set at the application level you can use the following:

`xml`

Note that:

* The above snippet works with IIS 7+. * You should use the above snippet in theweb.configof your application.

For the complete set of configurations, not just for this rule, see the [IIS server configuration related documentation][iis config].

`Can the hint be configured?`

requireMetaElement can be set to trueto allow and require the use ofmeta tag.

In the [.hintrc][hintrc] file:

`json { "connector": {...}, "formatters": [...], "hints": { "highest-available-document-mode": [ "warning", { "requireMetaElement": true }], ... }, ... }`

`How to use this hint?`

This package is installed automatically by webhint:

`bash npm install hint --save-dev`

To use it, activate it via the [.hintrc][hintrc] configuration file:

`json { "connector": {...}, "formatters": [...], "hints": { "highest-available-document-mode": "error", ... }, "parsers": [...], ... }`

Note: The recommended way of running webhint is as a devDependency` of
your project.

`Removing the` X-UA-Compatible `header on IIS`

`Removing the` X-UA-Compatible `header on IIS`

@hint/hint-highest-available-document-mode

Highest document mode (`highest-available-document-mode`)

Why is this important?

`$3`

`$3`

`$3`

`How to configure the server to pass this hint`

`$3`

`Removing the` X-UA-Compatible `header on Apache`

$3

`Can the hint be configured?`

`How to use this hint?`

Further Reading

@hint/hint-highest-available-document-mode

Highest document mode (`highest-available-document-mode`)

Why is this important?

`$3`

`$3`

`$3`

`How to configure the server to pass this hint`

`$3`

`Removing the` X-UA-Compatible `header on Apache`

$3

`Can the hint be configured?`

`How to use this hint?`

Further Reading

@hint/hint-highest-available-document-mode

Highest document mode (highest-available-document-mode)

Why is this important?

$3

$3

$3

How to configure the server to pass this hint

$3

Removing the X-UA-Compatible header on Apache

$3

Removing the X-UA-Compatible header on IIS

Can the hint be configured?

How to use this hint?

Further Reading

@hint/hint-highest-available-document-mode

Highest document mode (highest-available-document-mode)

Why is this important?

$3

$3

$3

How to configure the server to pass this hint

$3

Removing the X-UA-Compatible header on Apache

$3

Removing the X-UA-Compatible header on IIS

Can the hint be configured?

How to use this hint?

Further Reading

Highest document mode (`highest-available-document-mode`)

`$3`

`$3`

`$3`

`How to configure the server to pass this hint`

`$3`

`Removing the` X-UA-Compatible `header on Apache`

`Removing the` X-UA-Compatible `header on IIS`

`Can the hint be configured?`

`How to use this hint?`

Highest document mode (`highest-available-document-mode`)

`$3`

`$3`

`$3`

`How to configure the server to pass this hint`

`$3`

`Removing the` X-UA-Compatible `header on Apache`

`Removing the` X-UA-Compatible `header on IIS`

`Can the hint be configured?`

`How to use this hint?`