This site uses cookies for analytics. By continuing to browse this site, you agree to this use.
A JS Foundation Project

New HTML features

New HTML features (compat-api/html-next)

What does the hint check?

compat-api/html-next checks if the HTML elements and attributes used are supported in the targeted browsers.

Why is this important?

New HTML elements and attributes are being implemented all the time. It’s tricky knowing when an element or attribute has become standard among all browsers. This hint will check if you are using elements or attributes that are not supported by your targeted browsers.

Examples that trigger the hint

The blink element was never added on any version of Chrome. Targeting Chrome browsers of any version will trigger the hint.

<blink>Why would somebody use this?</blink>

The srcset attribute of the img element was never added on any version of Internet Explorer. Targeting Internet Explorer browsers of any version will trigger the hint.

<img srcset="foo.jpg, bar.jpg">

The video element and its autoplay attribute was added for versions of Internet Explorer 9 and onwards. Targeting versions of Internet Explorer below version 9 will trigger the hint for the element and its attribute.

<video autoplay></video>

The input type color was not added for any version of Internet Explorer. Targeting any version of Internet Explorer will trigger the hint for this input type.

<input type="color">

The global attribute class was added for versions of Firefox 32 and onwards. Targeting versions of Firefox below version 32 till trigger the hint for the attribute.

<div class="foobar"></div>
<p class="foobar"></p>

Examples that pass the hint

The div element has been added for all versions of all browsers. It will pass the hint regardless of whatever the targeted browsers are.

<div></div>

The global attribute class has been added for all versions of all browsers except Firefox and Firefox for Android. Targeted browsers that are not Firefox will pass the hint regardless of their version.

<div class="container"></div>
<p class="about"></p>

The alt attribute of the img element has been added for all versions of all browsers. It will pass the hint regardless of whatever the targeted browsers are.

<img alt="mountains">

The video element and its autoplay attribute was added for versions of Internet Explorer 9 and onwards. Versions of Internet Explorer from version 9 onwards will pass the hint.

<video autoplay></video>

Can the hint be configured?

This hint throws errors for HTML elements that are not supported in any of the targeted browsers listed.

The targeted browsers can be defined in either the .hintrc or package.json file. This property follows the same convention as browserslist.

{
    "browserslist": [
        "> 1%",
        "last 2 versions"
    ]
}

ignore can be used to specify a list of HTML features to be ignored. The default value is ['integrity'].

In the .hintrc file:

{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "compat-api/html-next": ["error", {
            "ignore": ["blink"],
        }],
        ...
    },
    ...
}

enable can be used to specify a list of HTML features to be checked even if they are included in the ignore list. The default value is [].

In the .hintrc file:

{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "compat-api/html-next": ["error", {
            "enable": ["integrity"],
        }],
        ...
    },
    ...
}

Further Reading