src/content/docs/linter/rules/use-baseline.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="CSS" icon="seti: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](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Diagnostic Category: [`lint/nursery/useBaseline`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Inspired from [`css/use-baseline`](https://github.com/eslint/css/blob/main/docs/rules/use-baseline.md){
"linter": {
"rules": {
"nursery": {
"useBaseline": "error"
}
}
}
}
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:
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.
a {
backdrop-filter: blur(4px);
}
a { width: abs(20% - 100px); }
@media (inverted-colors: inverted) { a { color: red; } }
details::details-content { background: red; }
a { color: red; }
/* @supports exempts feature-detected code */
@supports (backdrop-filter: blur(4px)) {
a { backdrop-filter: blur(4px); }
}
availableSpecifies 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.2023): Accept features that became newly available in that year or earlier.Default: "widely"
{
"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; }
allowPropertiesA list of CSS property names to exclude from checking (case-insensitive).
Default: []
{
"linter": {
"rules": {
"nursery": {
"useBaseline": {
"options": {
"allowProperties": [
"backdrop-filter"
]
}
}
}
}
}
}
a { backdrop-filter: blur(4px); }
allowAtRulesA list of CSS at-rule names to exclude from checking (without @, case-insensitive).
Default: []
{
"linter": {
"rules": {
"nursery": {
"useBaseline": {
"options": {
"allowAtRules": [
"view-transition"
]
}
}
}
}
}
}
@view-transition { navigation: auto; }
allowFunctionsA list of CSS value function names to exclude from checking (case-insensitive).
Default: []
{
"linter": {
"rules": {
"nursery": {
"useBaseline": {
"options": {
"allowFunctions": [
"abs"
]
}
}
}
}
}
}
a { width: abs(20% - 100px); }
allowMediaConditionsA list of CSS media query condition names to exclude from checking (case-insensitive).
Default: []
{
"linter": {
"rules": {
"nursery": {
"useBaseline": {
"options": {
"allowMediaConditions": [
"inverted-colors"
]
}
}
}
}
}
}
@media (inverted-colors: inverted) { a { color: red; } }
allowPropertyValuesAn object mapping property names to arrays of allowed values (case-insensitive).
Default: {}
{
"linter": {
"rules": {
"nursery": {
"useBaseline": {
"options": {
"allowPropertyValues": {
"clip-path": [
"fill-box"
]
}
}
}
}
}
}
}
a { clip-path: fill-box; }
allowSelectorsA list of CSS pseudo-class or pseudo-element names to exclude from checking
(without : or ::, case-insensitive).
Default: []
{
"linter": {
"rules": {
"nursery": {
"useBaseline": {
"options": {
"allowSelectors": [
"has"
]
}
}
}
}
}
}
h1:has(+ h2) { margin: 0; }