useBaseline

CSS

Note

This rule has been implemented but not released yet. It will be available in the next release.

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Diagnostic Category: lint/nursery/useBaseline
• This rule doesn’t have a fix.
• The default severity of this rule is information.
• Sources:
  • Inspired from css/use-baseline

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "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/nursery/useBaseline ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ CSS propertybackdrop-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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

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

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

  ℹ CSS functionabs 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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

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

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

  ℹ CSS media conditioninverted-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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

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

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

  ℹ CSS pseudo-elementdetails-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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

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": {
      "nursery": {
        "useBaseline": {
          "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/nursery/useBaseline ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ CSS propertyaccent-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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

allowProperties

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

Default: []

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useBaseline": {
          "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": {
      "nursery": {
        "useBaseline": {
          "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": {
      "nursery": {
        "useBaseline": {
          "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": {
      "nursery": {
        "useBaseline": {
          "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": {
      "nursery": {
        "useBaseline": {
          "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": {
      "nursery": {
        "useBaseline": {
          "options": {
            "allowSelectors": [
              "has"
            ]
          }
        }
      }
    }
  }
}

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

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases