---
name: modern-css
source: botcore
description: >
  Track the cutting edge of CSS — features that are new, evolving, or just landing in browsers.
  Covers emerging specs from CSSWG, browser support status, and relevance to our stack.
  Use when evaluating new CSS capabilities, planning layout strategies, or staying current.
version: "1.0.0"
triggers:
  - modern css
  - new css
  - css features
  - csswg
  - grid lanes
  - masonry
  - gap decorations
  - css modules
  - flex-wrap balance
  - cutting edge css
  - css frontier
  - emerging css
---

# Modern CSS

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

## When to Use

- Evaluating whether a new CSS feature is ready for production
- Planning layout strategies with emerging capabilities
- Understanding spec status and browser support for new CSS
- Reviewing CSSWG decisions that affect our component architecture
- Choosing between polyfills, fallbacks, or waiting for native support

## Workflow

1. **Check status** — Look up browser support and spec maturity in `references/`
2. **Assess relevance** — Does it affect our layout, styling, or component patterns?
3. **Plan adoption** — Use progressive enhancement with fallbacks where needed
4. **Monitor** — Features move fast; check quarterly review dates

## Feature Status Overview

| Feature | Spec Status | Browser Support (Feb 2026) | Stack Relevance |
|---------|-------------|---------------------------|-----------------|
| Grid Lanes / Masonry | Editor's Draft (Grid L3) | None (Safari TP has legacy syntax only) | Dashboard/gallery layouts |
| Gap Decorations | Working Draft (css-gaps-1) | None | Separator rules between layout items |
| CSS Module Scripts | API stable | Partial (Chrome flag) | Component-scoped styles without builds |
| Multiple borders/outlines | Resolved to proceed | None | Accessible focus rings, contrast borders |
| `flex-wrap: balance` | Resolved to pursue | None | Balanced chip groups, tag clouds, toolbars |
| Anchor Positioning | Baseline 2025 | Chrome 125+, Firefox 131+, Safari 18.4+ | Tooltips, popovers, dropdowns |
| `@starting-style` | Baseline 2025 | Chrome 117+, Firefox 129+, Safari 17.5+ | Entry animations for dialogs/popovers |
| View Transitions | Baseline 2025 (same-doc) | Chrome 111+, Firefox 133+, Safari 18+ | Page/state transition animations |
| CSS Nesting | Baseline 2024 | All major browsers | Cleaner stylesheets, less preprocessor need |
| `:has()` selector | Baseline 2024 | All major browsers | Parent selection, conditional styling |
| Container Queries | Baseline 2024 | All major browsers | Component-responsive design |
| CSS Layers (`@layer`) | Baseline 2024 | All major browsers | Style precedence, design system architecture |
| `@scope` | Baseline 2025 | Chrome 118+, Firefox 128+, Safari 17.4+ | Scoped styles without Shadow DOM |
| `@property` | Baseline 2024 | All major browsers | Typed custom properties, animatable tokens |
| `content-visibility` | Partial | Chrome 85+, Firefox 125+ (no Safari) | Rendering performance for long lists |
| Scroll-driven Animations | Partial | Chrome 115+ (no Firefox/Safari stable) | Scroll-linked effects without JS |

## Adoption Tiers

### Use Now (Baseline 2024+)
CSS Nesting, `:has()`, Container Queries, `@layer`, `@property`. Progressive enhancement not required — all major browsers support these.

### Use with Fallback (Baseline 2025 / Partial)
Anchor Positioning, `@starting-style`, View Transitions, `@scope`. Provide graceful degradation for older browsers.

### Watch and Experiment (Pre-Baseline)
Grid Lanes, Gap Decorations, CSS Module Scripts, multiple borders, `flex-wrap: balance`, scroll-driven animations. Do not ship to production yet.

## Key Principles

- **Progressive enhancement** — New CSS features degrade cleanly. `display: grid-lanes` is ignored by non-supporting browsers.
- **No polyfill preference** — Prefer CSS-native solutions over JS polyfills. Wait for native if the polyfill is heavy.
- **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 Violet token architecture. Coordinate with the design system.

## Detailed Feature References

See [references/css-frontier.md](references/css-frontier.md) for in-depth spec analysis, CSSWG decisions, and code examples.

## Review Cadence

This skill should be reviewed quarterly as specs evolve and browser support changes. Next review: **2026-08-18**.
