Tracks cutting-edge CSS features, CSSWG specifications, and browser support status. Covers emerging layout primitives (Grid Lanes, Gap Decorations, Anchor Positioning), new selectors and scoping mechanisms, adoption tiers, and progressive enhancement strategies. Use when evaluating new CSS capabilities for production readiness, planning layout strategies with emerging specs, checking browser support for modern CSS, or reviewing CSSWG decisions that affect component architecture. Triggers: modern css, new css, css features, csswg, grid lanes, masonry, gap decorations, anchor positioning, css nesting, container queries, scope, css frontier, emerging css, flex-wrap balance, view transitions, starting-style.
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Tracks cutting-edge CSS features, CSSWG specifications, and browser support status. Covers emerging layout primitives (Grid Lanes, Gap Decorations, Anchor Positioning), new selectors and scoping mechanisms, adoption tiers, and progressive enhancement strategies. Use when evaluating new CSS capabilities for production readiness, planning layout strategies with emerging specs, checking browser support for modern CSS, or reviewing CSSWG decisions that affect component architecture. Triggers: modern css, new css, css features, csswg, grid lanes, masonry, gap decorations, anchor positioning, css nesting, container queries, scope, css frontier, emerging css, flex-wrap balance, view transitions, starting-style.
Living reference for CSS features on the near-term horizon -- what is shipping, what is specced, and what is still in flight.
Capabilities
Assess spec maturity and browser support for any modern CSS feature
Classify features into adoption tiers (Use Now, Use with Fallback, Watch and Experiment)
Provide fallback and progressive enhancement strategies for emerging CSS
Track CSSWG resolutions and their impact on component architecture
Guide decisions on polyfill vs. native vs. wait-for-support trade-offs
Supply code examples for emerging layout and styling primitives
Routing Logic
For in-depth spec analysis, CSSWG decisions, and code examples for pre-baseline features, see references/css-frontier.md
For features already at Baseline 2024+, consult standard MDN documentation
Core Principles
Progressive enhancement first -- New CSS features degrade cleanly. Unknown values like display: grid-lanes are ignored by non-supporting browsers, so fallbacks work without parsing side effects.
No polyfill preference -- Prefer CSS-native solutions over JS polyfills. Wait for native support if the polyfill is heavy or brittle.
Shadow DOM awareness -- Features like @scope and CSS Module Scripts interact with Shadow DOM boundaries. Test in both light and shadow contexts.
Design token impact -- Features like @property directly affect token architecture. Coordinate with the design system when adopting typed custom properties.
Spec status matters -- Distinguish between resolved, working draft, and editor's draft. Do not ship features that lack stable spec text.
Quick Reference: Feature Status
Feature
Spec Status
Browser Support
Adoption Tier
CSS Nesting
Baseline 2024
All major browsers
Use Now
:has() selector
Baseline 2024
All major browsers
Use Now
Container Queries
Baseline 2024
All major browsers
Use Now
@layer
Baseline 2024
All major browsers
Use Now
@property
Baseline 2024
All major browsers
Use Now
Anchor Positioning
Baseline 2025
Chrome 125+, Firefox 131+, Safari 18.4+
Use with Fallback
@starting-style
Baseline 2025
Chrome 117+, Firefox 129+, Safari 17.5+
Use with Fallback
View Transitions (same-doc)
Baseline 2025
Chrome 111+, Firefox 133+, Safari 18+
Use with Fallback
@scope
Baseline 2025
Chrome 118+, Firefox 128+, Safari 17.4+
Use with Fallback
content-visibility
Partial
Chrome 85+, Firefox 125+ (no Safari)
Use with Fallback
Scroll-driven Animations
Partial
Chrome 115+ (no Firefox/Safari stable)
Use with Fallback
Grid Lanes / Masonry
Editor's Draft
None
Watch and Experiment
Gap Decorations
Working Draft
None
Watch and Experiment
CSS Module Scripts
API stable
Partial (Chrome flag)
Watch and Experiment
Multiple borders/outlines
Resolved to proceed
None
Watch and Experiment
flex-wrap: balance
Resolved to pursue
None
Watch and Experiment
Workflow
Identify the feature -- Name the CSS capability under evaluation
Check adoption tier -- Consult the table above or the detailed reference
Assess browser support -- Verify against current Baseline status and caniuse data
Plan implementation -- Follow the tier strategy:
Use Now: Ship directly, no fallback required
Use with Fallback: Implement with graceful degradation for older browsers
Watch and Experiment: Prototype only; do not ship to production
Review spec stability -- For pre-baseline features, check for unresolved CSSWG issues in references/css-frontier.md
Document decisions -- Record which tier a feature falls into and when to re-evaluate
Checklist
Feature identified and located in the status table
Adoption tier confirmed (Use Now / Use with Fallback / Watch and Experiment)
Browser support verified against current data
Fallback strategy documented if tier requires it
No JS polyfills added unless CSS-native solution is unavailable
Shadow DOM compatibility tested if feature involves scoping or module scripts
Design token impact assessed for @property or custom property changes
Review date noted for pre-baseline features (quarterly cadence)
When to Escalate
A pre-baseline feature is requested for production use without a fallback plan
A CSSWG resolution changes the syntax or behavior of a feature already in use
Browser support regresses or a feature is removed from a browser engine
A polyfill is proposed that adds significant bundle weight or runtime cost
Shadow DOM interaction creates unexpected style leakage or isolation failures
The feature status table is more than one quarter out of date
