npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

v5.0.23

Published

hint for best practices related to usage of the X-UA-Compatible meta tag and response header

Downloads

106,052

Readme

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. 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 as Chrome 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

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

Adding the X-UA-Compatible header on Apache

<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)$">
        Header unset X-UA-Compatible
    </FilesMatch>

</IfModule>

Removing the X-UA-Compatible header on Apache

If the header is sent, in most cases, to make Apache stop sending the X-UA-Compatible requires removing the configuration that adds it (i.e.: something such as Header 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 the Apache level, using the following:

<IfModule mod_headers.c>
    Header unset X-UA-Compatible
</IfModule>

Note that:

  • The above snippets work with Apache v2.2.0+, but you need to have mod_headers enabled in order for them to take effect.

  • If you have access to the main Apache configuration file (usually called httpd.conf), you should add the logic in, for example, a <Directory> section in that file. This is usually the recommended way as using .htaccess files slows down Apache!

    If you don't have access to the main configuration file (quite common with hosting services), add the snippets in a .htaccess file 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.

Adding the X-UA-Compatible header on IIS

To add the X-UA-Compatible header you can use a URL rewrite rule rule that matches the text/html content-type header of a response and adds it:

<configuration>
     <system.webServer>
        <rewrite>
            <outboundRules>
                <rule name="X-UA-Compatible header">
                    <match serverVariable="RESPONSE_X_UA_Compatible" pattern=".*" />
                    <conditions>
                        <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
                    </conditions>
                    <action type="Rewrite" value="IE=edge"/>
                </rule>
            </outboundRules>
        </rewrite>
    </system.webServer>
</configuration>

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 of pattern.

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:

<configuration>
     <system.webServer>
        <httpProtocol>
             <customHeaders>
                <remove name="X-UA-Compatible"/>
             </customHeaders>
         </httpProtocol>
    </system.webServer>
</configuration>

Note that:

  • The above snippet works with IIS 7+.
  • You should use the above snippet in the web.config of your application.

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

Can the hint be configured?

requireMetaElement can be set to true to allow and require the use of meta tag.

In the .hintrc file:

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

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

How to use this hint?

This package is installed automatically by webhint:

npm install hint --save-dev

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

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

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

Further Reading