Modern CSS Baseline Status (2025-2026)
Use this matrix to decide whether a CSS feature needs a fallback in generated code.
- Widely Available = safe without fallback on modern projects
- Newly Available = works in latest browsers; include
@supportsguard for older audiences
Feature Matrix
| Feature | Baseline Status | Safe Without Fallback? | Source |
|---|---|---|---|
| CSS Subgrid | Widely Available (2026-03) | Yes | MDN Subgrid |
Container Queries (@container) |
Widely Available (2025-08) | Yes | web.dev Aug 2025 |
| CSS Nesting | Widely Available (2023) | Yes | MDN Nesting |
:has() selector |
Newly Available (2023-12; Widely ~2026-06) | Yes (latest) | State of CSS 2025 |
color-mix() |
Newly Available (2024; Widely ~2026-11) | Yes (latest) | Chrome devs |
light-dark() |
Newly Available (2024-05; Widely ~2026-11) | Yes (latest) | web.dev |
| CSS Anchor Positioning | Newly Available (2026; Chrome 125+/Firefox 147+/Safari 26+) | Partial — @position-try needs Safari 18.4+ |
OddBird 2025 / caniuse |
@scope |
Newly Available (2025-12; Firefox 146+) | Yes (latest) | web.dev Dec 2025 |
| View Transitions (single-doc) | Newly Available (2025-10; Chrome 111+/Firefox 133+/Safari 18+) | Yes (latest) | Chrome devs |
| View Transitions (cross-doc) | Partial (Chrome 126+/Safari 18.2+; Firefox TBD 2026) | No — Firefox missing | MDN |
Scroll-Driven Animations (animation-timeline) |
Partial (Chrome 115+/Firefox 110+/Safari 18+) | Use @supports |
MDN |
| CSS Grid Lanes (formerly Masonry) | Experimental (Safari 26 ships display:grid-lanes; Chrome 140 flag) |
No — not cross-browser | W3C CSS WG 2025-09 |
Key Changes from Pre-2025 Assumptions
- CSS Masonry spec was renamed to CSS Grid Lanes (
display: grid-lanes). Avoidmasonryas a value — usegrid-lanesandinline-grid-lanes. - CSS Anchor Positioning is now multi-browser (Firefox 147+ stable, Jan 2026), but
@position-tryflip behavior requires Safari 18.4+. Useposition-try-fallbackswith a safe fallback placement for older Safari. @scopecrossed Baseline "Newly Available" in December 2025 with Firefox 146 support.- Container queries graduated to Baseline Widely Available in August 2025 — no fallback needed for modern projects.
Container Query Authoring Rules
- Prefer
@containerover@mediafor components reused across layout contexts (cards, widgets, sidebars). - Use
container-type: inline-sizeon wrappers; always assigncontainer-namewhen nesting — unnamed queries match the nearest ancestor and cause subtle bugs. - Avoid >3 levels of nested containment contexts (each adds browser evaluation overhead).
- Keep
@mediafor page-level layout and user preferences (prefers-color-scheme,prefers-reduced-motion).
Capability Detail (SKILL.md excerpt)
- modern_css_reproduction: CSS Subgrid (Baseline Widely Available 2026-03), Container Queries (Baseline Widely Available 2025-08), CSS Nesting (Baseline Widely Available), Anchor Positioning (Baseline Newly Available 2026; Chrome 125+/Firefox 147+/Safari 26+), @scope (Baseline Newly Available 2025-12), CSS Grid Lanes/formerly Masonry (Safari 26 ships display:grid-lanes; Chrome 140 experimental), View Transitions single-doc (Baseline Newly Available 2025-10), scroll-driven animations (animation-timeline; Chrome 115+/Firefox 110+/Safari 18+)