useBaseline (CSS)

Language CSS

Summary

• Rule available since: v2.4.7
• Diagnostic Category: lint/suspicious/useBaseline
• This rule isn’t recommended, so you need to enable it.
• This rule doesn’t have a fix.
• The default severity of this rule is warning.
• Sources:
  • Inspired from css/use-baseline
  • Inspired from @html-eslint/use-baseline

How to configure

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "useBaseline": "error"
      }
    }
  }
}

Description

Disallow CSS properties, values, at-rules, functions, and selectors that are not part of the configured Baseline.

Baseline tracks the availability of web platform features across core browsers. This rule helps you avoid features that aren’t supported in the browsers you need to target.

Features are categorized into three tiers:

• Limited: Not yet available in all core browsers.
• Newly available: Available in all core browsers for less than 30 months.
• Widely available: Available in all core browsers for at least 30 months.

By default, the rule reports on anything that is not Baseline widely available.

Code inside @supports blocks is exempt: if you feature-detect a capability before using it, the rule does not flag it.

Examples

Invalid

a {
  backdrop-filter: blur(4px);
}

code-block.css:2:3 lint/suspicious/useBaseline ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ CSS property backdrop-filter isn't part of the chosen Baseline.
  
    1 │ a {
  > 2 │   backdrop-filter: blur(4px);
      │   ^^^^^^^^^^^^^^^
    3 │ }
    4 │ 
  
  ℹ Using a feature that isn't part of the Baseline can lead to unexpected behavior in older browsers.
  
  ℹ Either remove the feature, or use the @supports at-rule to gate the feature behind a browser-specific support condition.
  
  ℹ See MDN Baseline for more information.
  
  ℹ Check caniuse.com for more information about the feature backdrop-filter.
  

a { width: abs(20% - 100px); }

code-block.css:1:12 lint/suspicious/useBaseline ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ CSS function abs isn't part of the chosen Baseline.
  
  > 1 │ a { width: abs(20% - 100px); }
      │            ^^^
    2 │ 
  
  ℹ Using a feature that isn't part of the Baseline can lead to unexpected behavior in older browsers.
  
  ℹ Either remove the feature, or use the @supports at-rule to gate the feature behind a browser-specific support condition.
  
  ℹ See MDN Baseline for more information.
  
  ℹ Check caniuse.com for more information about the feature abs.
  

@media (inverted-colors: inverted) { a { color: red; } }

code-block.css:1:9 lint/suspicious/useBaseline ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ CSS media condition inverted-colors isn't part of the chosen Baseline.
  
  > 1 │ @media (inverted-colors: inverted) { a { color: red; } }
      │         ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Using a feature that isn't part of the Baseline can lead to unexpected behavior in older browsers.
  
  ℹ Either remove the feature, or use the @supports at-rule to gate the feature behind a browser-specific support condition.
  
  ℹ See MDN Baseline for more information.
  
  ℹ Check caniuse.com for more information about the feature inverted-colors.
  

details::details-content { background: red; }

code-block.css:1:10 lint/suspicious/useBaseline ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ CSS pseudo-element details-content isn't part of the chosen Baseline.
  
  > 1 │ details::details-content { background: red; }
      │          ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Using a feature that isn't part of the Baseline can lead to unexpected behavior in older browsers.
  
  ℹ Either remove the feature, or use the @supports at-rule to gate the feature behind a browser-specific support condition.
  
  ℹ See MDN Baseline for more information.
  
  ℹ Check caniuse.com for more information about the feature details-content.
  

Valid

a { color: red; }

/* @supports exempts feature-detected code */
@supports (backdrop-filter: blur(4px)) {
  a { backdrop-filter: blur(4px); }
}

Options

available

Specifies the minimum Baseline availability tier to accept. Defaults to "widely".

• "widely": Only accept features that are Baseline widely available (default).
• "newly": Accept features that are at least Baseline newly available.
• A year number (e.g. 2023): Accept features that became newly available in that year or earlier.

Default: "widely"

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "useBaseline": {
          "level": "on",
          "options": {
            "available": "newly"
          }
        }
      }
    }
  }
}

With "newly", a property that is newly (but not yet widely) available doesn’t trigger the rule:

a { backdrop-filter: blur(4px); }

But a limited property still fails:

a { accent-color: red; }

code-block.css:1:5 lint/suspicious/useBaseline ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ CSS property accent-color isn't part of the chosen Baseline.
  
  > 1 │ a { accent-color: red; }
      │     ^^^^^^^^^^^^
    2 │ 
  
  ℹ Using a feature that isn't part of the Baseline can lead to unexpected behavior in older browsers.
  
  ℹ Either remove the feature, or use the @supports at-rule to gate the feature behind a browser-specific support condition.
  
  ℹ See MDN Baseline for more information.
  
  ℹ Check caniuse.com for more information about the feature accent-color.
  

allowProperties

A list of CSS property names to exclude from checking (case-insensitive).

Default: []

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "useBaseline": {
          "level": "on",
          "options": {
            "allowProperties": [
              "backdrop-filter"
            ]
          }
        }
      }
    }
  }
}

a { backdrop-filter: blur(4px); }

allowAtRules

A list of CSS at-rule names to exclude from checking (without @, case-insensitive).

Default: []

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "useBaseline": {
          "level": "on",
          "options": {
            "allowAtRules": [
              "view-transition"
            ]
          }
        }
      }
    }
  }
}

@view-transition { navigation: auto; }

allowFunctions

A list of CSS value function names to exclude from checking (case-insensitive).

Default: []

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "useBaseline": {
          "level": "on",
          "options": {
            "allowFunctions": [
              "abs"
            ]
          }
        }
      }
    }
  }
}

a { width: abs(20% - 100px); }

allowMediaConditions

A list of CSS media query condition names to exclude from checking (case-insensitive).

Default: []

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "useBaseline": {
          "level": "on",
          "options": {
            "allowMediaConditions": [
              "inverted-colors"
            ]
          }
        }
      }
    }
  }
}

@media (inverted-colors: inverted) { a { color: red; } }

allowPropertyValues

An object mapping property names to arrays of allowed values (case-insensitive).

Default: {}

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "useBaseline": {
          "level": "on",
          "options": {
            "allowPropertyValues": {
              "clip-path": [
                "fill-box"
              ]
            }
          }
        }
      }
    }
  }
}

a { clip-path: fill-box; }

allowSelectors

A list of CSS pseudo-class or pseudo-element names to exclude from checking (without : or ::, case-insensitive).

Default: []

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "useBaseline": {
          "level": "on",
          "options": {
            "allowSelectors": [
              "has"
            ]
          }
        }
      }
    }
  }
}

h1:has(+ h2) { margin: 0; }

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases
• Try in the playground