eslint-plugin-compat-html


ESLint plugin to check HTML element and attribute compatibility using browserslist and @mdn/browser-compat-data.

✨ Features

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

🚀 Installation

``bash
npm install --save-dev eslint-plugin-compat-html
`

📖 Usage

$3

Add to your ESLint configuration:

`json
{
"plugins": ["compat-html"],
"rules": {
"compat-html/html-compat": "error"
}
}
`

$3

`json
{
"extends": ["plugin:compat-html/recommended"]
}
`

$3

`json
{
"rules": {
"compat-html/html-compat": ["error", {
"browserslistConfig": ["> 1%", "last 2 versions", "not dead"]
}]
}
}
`

$3

`json
{
"rules": {
"compat-html/html-compat": ["error", {
"browserslistConfig": ["ie 11", "> 1%"]
}]
}
}
`

$3

`json
{
"rules": {
"compat-html/html-compat": ["error", {
"browserslistConfig": ["> 1%", "last 2 versions"],
"ignoreBrowsers": ["ie 11", "opera_mini"]
}]
}
}
`

🔧 Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| browserslistConfig | string[] | Project's browserslist | Custom browser targets |
| ignoreBrowsers | string[] | [] | List of browsers to ignore in compatibility checks |

📝 Examples

$3

`jsx
// ❌ Will warn if targeting IE 11


This is a modal dialog

Close

// ❌ Will warn for older browsers


Click to expand

Hidden content

// ✅ Widely supported



`

$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:

,

,