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
- Identify the visual or interaction intent and inspect the project's framework, browser targets, writing modes, and existing conventions.
- Search
css-demos/INDEX.mdfor a matching pattern. - 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. - Rank solutions by semantic fit, accessibility, interoperability, and maintenance cost. Prefer logical properties and native CSS capabilities.
- If the selected feature is Limited Availability or has no WebStatus record, show
a usable fallback and gate the enhancement with
@supportswhen practical. - 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: