no-unsupported-browser-features

Warns when using HTML elements or attributes that are not supported by the project's target browsers, via browserslist.

This rule uses @mdn/browser-compat-data for the browser support check.

info

Split from the former no-unsupported-features rule (#3989), which also covered experimental and non-standard features. Use the no-experimental-features rule for experimental elements/attributes, or the no-nonstandard-features rule for non-standard ones.

Note: If your project does not have a browserslist configuration, this rule is a no-op (it does nothing).

Default Severity

warning

How It Works

Reads the project's browserslist configuration and checks whether each HTML element and attribute is supported in all target browsers. Features that were once supported but later removed from a browser are also reported (e.g., "removed in 50").

Options

Option	Type	Default	Description
browserslist	string | string[]	-	Override the browserslist query.
browserslistConfig	string	-	Explicit path to a browserslist configuration file.
browserslistEnv	string	-	Browserslist environment name (e.g., "production").
ignoreFeatures	string[]	[]	Features to ignore.

ignoreFeatures Format

Uses exact string matching (no glob or wildcard patterns), except for the case of letters. The element part is compared as the tag names of the language are: case-sensitively where the parser tells the case of a tag name apart (JSX, Svelte, Astro, MDX), and without regard to ASCII case otherwise. The attribute part is compared as the DOM compares the name of that attribute (see Attribute name case).

• "dialog" — Ignores the <dialog> element. The element name is compared as the document compares tag names: without regard to ASCII case in HTML, and exactly in a syntax that tells tag names apart (JSX, Svelte), where DIALOG is not <dialog>.
• "input[list]" — Ignores the list attribute on <input> elements. The attribute name is compared as the DOM compares it with the attribute that is checked: LIST is the same attribute in HTML, and on an HTML element in JSX or Svelte, but on an <svg> element that JSX sets, only the same spelling is.

Examples

Configuration:

{
  "rules": {
    "no-unsupported-browser-features": {
      "options": {
        "browserslist": "ie 11"
      }
    }
  }
}

❌ Examples of incorrect code for this rule

<dialog>This is a dialog</dialog>

✅ Examples of correct code for this rule

<div>This is a div</div>

Interface

{
  "no-unsupported-browser-features": boolean
}

Options

{
  "no-unsupported-browser-features": {
    "options": {
      "browserslist"?: string | string[]
      "browserslistConfig"?: string
      "browserslistEnv"?: string
      "ignoreFeatures"?: string[]
    }
  }
}

Property	Type	Default Value	Description
browserslist	string | string[]	undefined	undefined
browserslistConfig	string	undefined	Explicit path to a browserslist configuration file.
browserslistEnv	string	undefined	Browserslist environment name (e.g., "production").
ignoreFeatures	string[]	undefined	Features to ignore. Element name ("dialog") or attribute pattern ("input[list]").

Default Severity

warning