CSS First

Solve interface work with semantic HTML and CSS before proposing JavaScript. Prefer modern, standards-based CSS when it matches the user's target browsers and preserve the core experience with progressive enhancement when support is incomplete.

Workflow

1. Identify the visual or interaction intent and inspect the project's framework, browser targets, writing modes, and existing conventions.
2. Search css-demos/INDEX.md for a matching pattern.
3. When support or recency matters, fetch the current Baseline record using references/live-mdn-fetch.md. Treat checked-in labels as dated snapshots, not permanent facts.
4. Rank solutions by semantic fit, accessibility, interoperability, and maintenance cost. Prefer logical properties and native CSS capabilities.
5. If the selected feature is Limited Availability or has no WebStatus record, show a usable fallback and gate the enhancement with @supports when practical.
6. Verify syntax and behavior in a real browser when the environment provides one.

Baseline Vocabulary

Use the Web Platform Status meaning exactly. Do not convert global usage percentages into Baseline labels.

| API status | Label | Meaning | |---|---|---| | widely | 🟢 Widely Available | Interoperable in the core browser set for at least 30 months | | newly | 🔵 Newly Available | Interoperable in the core browser set for less than 30 months | | limited | 🟡 Limited Availability | Not Baseline because core-browser coverage is incomplete | | missing | 🟣 Experimental / unknown | No usable WebStatus record; inspect specifications and browser releases |

Browser-version percentages can be useful supplementary data, but never determine a Baseline category.

Rules

Read only the references needed for the task:

• references/rules/css-only-enforcement.md — decide when CSS is sufficient and when JavaScript is genuinely required.
• references/rules/logical-properties-first.md — prefer writing-mode-aware properties.
• references/rules/modern-css-features.md — select modern features, including Chrome 148–152 additions.
• references/rules/semantic-intent-analysis.md — map the request to the right CSS primitive.
• references/rules/framework-awareness.md — adapt examples to the repository.
• references/rules/browser-support-consideration.md — report Baseline and support accurately.
• references/rules/progressive-enhancement.md — layer optional features over a working core.
• references/rules/browser-verification.md — verify browser-facing behavior.

Current Chrome Additions

The demo catalog covers author-facing CSS shipped or announced from Chrome 148 through Chrome 152, including name-only and comma-separated container queries, at-rule() and named-feature() support tests, animatable zoom, rounded polygon(), text-fit, background-clip: border-area, CSS image() values, image-valued light-dark(), flex-wrap: balance, overscroll-behavior: chain, print page-margin-safety, SVG path-length, ruby-overhang, media-state pseudo-classes, alpha(), window-drag, and installed-app accent system colors.

Use the feature's demo header and live WebStatus entry together: Chrome shipping does not by itself mean a feature is Baseline.

Maintaining Snapshots

From this skill directory, run:

python3 scripts/update_baseline.py --check
python3 scripts/update_baseline.py --write

--check reports drift without changing files. --write refreshes mapped demo headers and their matching entries in css-demos/INDEX.md from the official WebStatus API. Features without a WebStatus record stay manual and must cite their release note or specification.

Quick Reference

| Intent | Preferred CSS | Demo | |---|---|---| | Component responsiveness | Container queries | css-demos/container/size-queries.css | | Parent-aware styles | :has() | css-demos/layout/has-selector.css | | Balanced wrapped flex lines | flex-wrap: balance | css-demos/layout/flex-wrap-balance.css | | Entry animation | @starting-style | css-demos/animation/starting-style.css | | Scroll effects | Scroll-driven animations | css-demos/animation/scroll-driven.css | | Native tooltip placement | Anchor positioning | css-demos/positioning/anchor-positioning.css | | Responsive headline fitting | text-fit | css-demos/visual/text-fit.css | | Theme-aware images | light-dark() / image() | css-demos/visual/css-image-values.css | | Media playback state | :playing, :paused, and related pseudo-classes | css-demos/interaction/media-state-pseudos.css | | Installed-app drag region | window-drag | css-demos/interaction/window-drag.css | | Reduced motion | prefers-reduced-motion | css-demos/accessibility/prefers-reduced-motion.css | | Decorative variation | random() | css-demos/functions/random-function.css | | Normalize a range | progress() | css-demos/functions/progress-function.css |

Use MDN for syntax and caveats and WebStatus for Baseline:

• https://developer.mozilla.org/en-US/docs/Web/CSS
• https://webstatus.dev/
• https://web.dev/baseline/