---
title: "Lint every feature against one Baseline · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/checks-in-code/baseline-target
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Lint every feature against one Baseline target

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

For AI agents: [llms.txt](https://agentwranglers.se/llms.txt) is a short guide that sends you to the rules your problem needs, and [rules.json](https://agentwranglers.se/playbook/html-css/rules.json) holds every rule of this playbook as JSON.

- Level: Recommended
- Chapter: [Checks in code](https://agentwranglers.se/playbook/html-css/checks-in-code)
- Rule: 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.
- How: 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](https://agentwranglers.se/playbook/website/site-architecture/progressive-enhancement).
- 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.

## 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

```js
// 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

```css
/* 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

```python
# 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)
```

## Sources

- [CSS Conditional Rules Level 3 on @supports](https://www.w3.org/TR/css-conditional-3/#at-supports)
- [CSS Snapshot 2026](https://www.w3.org/TR/css-2026/)

## Related rules

- [Animate on scroll with CSS](https://agentwranglers.se/playbook/website/interface/scroll-driven-animations) in Website
- [Build on HTML that already works](https://agentwranglers.se/playbook/website/site-architecture/progressive-enhancement) in Website

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/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.

- Previous: [Keep every exception in the linter config](https://agentwranglers.se/playbook/html-css/checks-in-code/one-exceptions-list)
- [Checks in code](https://agentwranglers.se/playbook/html-css/checks-in-code)