css-learn

name	css-learn
source	botcore
description	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.
version	1.0.0
triggers	["modern css","new css","css features","csswg","grid lanes","masonry","gap decorations","anchor positioning","css modules","flex-wrap balance","cutting edge css","css frontier","emerging css","container queries","css nesting","view transitions","starting-style","scope","css layers"]
portable	true

Exploring CSS

Living reference for CSS features on the near-term horizon -- what is shipping, what is specced, and what is still in flight.

Capabilities

1. Assess spec maturity and browser support for any modern CSS feature
2. Classify features into adoption tiers (Use Now, Use with Fallback, Watch and Experiment)
3. Provide fallback and progressive enhancement strategies for emerging CSS
4. Track CSSWG resolutions and their impact on component architecture
5. Guide decisions on polyfill vs. native vs. wait-for-support trade-offs
6. 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

1. Identify the feature -- Name the CSS capability under evaluation
2. Check adoption tier -- Consult the table above or the detailed reference
3. Assess browser support -- Verify against current Baseline status and caniuse data
4. 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
5. Review spec stability -- For pre-baseline features, check for unresolved CSSWG issues in references/css-frontier.md
6. 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