Agent Wranglers

Recommended

Lint every feature against one Baseline target

Choose one Baseline target for the project, such as "widely available" or a year. Fail the build on any CSS or HTML feature outside it that no @supports test guards.

By Agent Wranglers. Updated .

How to do it

Baseline marks a feature as newly available once every core browser supports it, and as widely available 30 months later. Set the target once in the linter config, using a rule such as use-baseline in a CSS or HTML linter. A newer feature, such as anchor-name, is allowed only inside a matching @supports block with a working fallback. That fallback follows Build on HTML that already works.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

JavaScript example

// eslint.config.js: one target for CSS and HTML
import css from '@eslint/css';
import html from '@html-eslint/eslint-plugin';

const BASELINE_TARGET = 'widely';
export default [
  { files: ['styles/**/*.css'], language: 'css/css', plugins: { css }, rules: { 'css/use-baseline': ['error', { available: BASELINE_TARGET }] } },
  { files: ['**/*.html'], plugins: { '@html-eslint': html }, language: '@html-eslint/html', rules: { '@html-eslint/use-baseline': ['error', { available: BASELINE_TARGET }] } },
];

CSS example

/* Newer than the target, so it sits behind a test. Without the test the lint fails. */
.order-menu { position: fixed; inset-block-start: 4rem; }
@supports (anchor-name: --order-menu) {
  .order-menu-button { anchor-name: --order-menu; }
  .order-menu { position-anchor: --order-menu; inset-block-start: anchor(bottom); }
}

Python example

# Build check: the CSS and HTML linters use the same Baseline target
import re, sys
config = open("eslint.config.js").read()
targets = re.findall(r"BASELINE_TARGET = '([^']+)'", config)
uses = config.count("available: BASELINE_TARGET")
ok = len(targets) == 1 and uses == 2
print("PASS one Baseline target" if ok else "FAIL the linters use different or missing Baseline targets")
sys.exit(0 if ok else 1)

How to check

The CSS and HTML linters both run a Baseline rule with the same target and report 0 problems. Adding an unguarded feature newer than the target to a stylesheet stops the build.

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/html-css/checks-in-code/baseline-target">Agent Wranglers HTML and CSS playbook</a>. In code you write, add a comment next to it with the same link.