CSS First

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.

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

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/