Supported HTML features (compat-api/html)

What does the hint check?

compat-api/html checks if the HTML elements and attributes used are supported in all target 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 target browsers.

Examples that trigger the hint

The blink element was never added to 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 to any version of Internet Explorer. Targeting Internet Explorer browsers of any version will trigger the hint.

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

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">

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 your target browsers are.

<div></div>

The alt attribute of the img element has been added for all versions of all browsers. It will pass the hint regardless of whatever your target 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 target browsers listed.

The target 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:

[
    "a[rel=noopener]",
    "autocomplete",
    "crossorigin",
    "input[inputmode]",
    "integrity",
    "link[rel]",
    "main",
    "spellcheck"
]

In the .hintrc file:

{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "compat-api/html": ["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": ["error", {
            "enable": ["integrity"],
        }],
        ...
    },
    ...
}

Limitations

HTML features not represented in MDN will pass to avoid false-positives. These could result from data missing for a particular browser or because a bogus element was used.

Further Reading

• HTML: Hypertext Markup Language (MDN)
• Browser Compat Data (MDN)