v143 · css

CSS Upgrade Path

A live audit of which modern CSS at-rules this browser supports, plus a component that progressively enhances itself through five levels — each level gated by @supports at-rule(…). See exactly which enhancements activate in your current browser.

Feature detection: checking…

at-rule support in this browser

#
at-rule
supported
enhancement it unlocks

force fallback levels

Turn off any supported enhancement to inspect the fallback state that would ship to browsers without that at-rule.

progressively-enhanced component

Each @supports at-rule() block adds a visual enhancement layer

Feature Card

This card enhances through 5 levels depending on at-rule support. Hover to test transitions (level 5).

Checking levels…
/* Gate each enhancement on actual at-rule support */
@supports at-rule(@layer) {
  .card { background: var(--bg-paper); }
}

@supports at-rule(@container) {
  .card { container-type: inline-size; }
}

@supports at-rule(@property) {
  .card h3 {
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-emerald));
    -webkit-background-clip: text;
    color: transparent;
  }
}

@supports at-rule(@starting-style) {
  .card { transition: transform 0.2s; }
  .card:hover { transform: translateY(-2px); }
}

see also