, , ESLint plugin to check HTML element and attribute compatibility using browserslist and @mdn/browser-compat-data
npm install eslint-plugin-html-compat

ESLint plugin to check HTML element and attribute compatibility using browserslist and @mdn/browser-compat-data.
- ๐ Accurate compatibility checking using @mdn/browser-compat-data
- ๐ฏ Browser targeting with browserslist integration
- โ๏ธ JSX and HTML support for React and vanilla HTML projects
- ๐งช Experimental feature detection (e.g., attributionsourceid)
- โ๏ธ Configurable browser targets
- ๐ Detailed error reporting with unsupported browser lists
``bash`
npm install --save-dev eslint-plugin-compat-html
Add to your ESLint configuration:
`json`
{
"plugins": ["compat-html"],
"rules": {
"compat-html/html-compat": "error"
}
}
`json`
{
"extends": ["plugin:compat-html/recommended"]
}
`json`
{
"rules": {
"compat-html/html-compat": ["error", {
"browserslistConfig": ["> 1%", "last 2 versions", "not dead"]
}]
}
}
`json`
{
"rules": {
"compat-html/html-compat": ["error", {
"browserslistConfig": ["ie 11", "> 1%"]
}]
}
}
`json`
{
"rules": {
"compat-html/html-compat": ["error", {
"browserslistConfig": ["> 1%", "last 2 versions"],
"ignoreBrowsers": ["ie 11", "opera_mini"]
}]
}
}
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| browserslistConfig | string[] | Project's browserslist | Custom browser targets |ignoreBrowsers
| | string[] | [] | List of browsers to ignore in compatibility checks |
`jsx
// โ Will warn if targeting IE 11
// โ Will warn for older browsers Hidden content
Click to expand
// โ
Widely supported
Content
$3
`jsx
// โ Will warn for all browsers except Safari 14.1+
Link with attribution
// โ
Standard attributes work everywhere
Standard link
`$3
`jsx
// โ Will warn for IE 11
// โ
Widely supported
`๐ฏ Supported Elements & Attributes
The plugin checks compatibility for:
- HTML5 semantic elements:
, ,