v148 · CSS · @supports at-rule()

Progressive Enhancement

Three UI components — each enhanced by a different at-rule when the browser supports it. The detection is pure CSS: @supports at-rule(@starting-style), @supports at-rule(@property), @supports at-rule(@layer).

runtime support probe

Run the probe to see the exact CSS.supports('at-rule(...)') result for the component enhancement.

Entrance animation

This card slides in using @starting-style. In browsers without it, the card just appears — same content, no animation.

✓ @starting-style detected

Animated gradient

The gradient angle is animated via a @property typed custom property. In other browsers, a static gradient shows instead.

✓ @property detected

Layer specificity

Normal link and important link use @layer for clean specificity management when supported.

✓ @layer detected

The CSS pattern

/* Base styles work everywhere — no at-rule */
.card {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced only when @starting-style is understood */
@supports at-rule(@starting-style) {
  .card {
    transition: opacity 0.4s, transform 0.4s;
  }
  @starting-style {
    .card {
      opacity: 0;
      transform: translateY(16px);
    }
  }
}

/* Enhanced only when @property is understood */
@supports at-rule(@property) {
  @property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }
  .gradient { animation: rotate-gradient 4s linear infinite; }
  @keyframes rotate-gradient {
    to { --angle: 360deg; }
  }
}

/* Enhanced only when @layer is understood */
@supports at-rule(@layer) {
  @layer base, overrides;
  @layer base { .link { color: blue; } }
  @layer overrides { .link.special { color: red; } }
}

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗