at-rule: CSS Feature Detection

at a glance

why it exists

CSS @supports has long allowed property/value feature detection (@supports (display: grid)) and selector detection (@supports selector(:has(a))). What it couldn't do was detect support for at-rules themselves. Developers writing progressively-enhanced CSS that uses @container, @layer, or @starting-style had no native way to guard those blocks from browsers that don't recognise the at-rule. The at-rule() function fills that gap, completing the CSS feature-detection story for the full range of CSS constructs.

syntax

Basic usage

/* Test for @container query support */
@supports at-rule(@container) {
  .card {
    container-type: inline-size;
  }

  @container (min-width: 400px) {
    .card { flex-direction: row; }
  }
}

/* Test for @starting-style support */
@supports at-rule(@starting-style) {
  @starting-style {
    .toast { opacity: 0; }
  }
  .toast {
    opacity: 1;
    transition: opacity 0.3s;
  }
}

/* Test for @layer support */
@supports at-rule(@layer) {
  @layer base, theme, components;
}

Combining with other @supports conditions

/* AND: container queries AND grid */
@supports at-rule(@container) and (display: grid) {
  /* use both features together */
}

/* NOT: fallback for browsers without @layer */
@supports not at-rule(@layer) {
  /* styles for browsers that don't support cascade layers */
}

Feature detection in JavaScript

// CSS.supports() also accepts the at-rule() syntax
const hasContainer = CSS.supports('at-rule(@container)');
const hasLayer     = CSS.supports('at-rule(@layer)');

console.log('Container queries:', hasContainer);
console.log('Cascade layers:', hasLayer);

browser support

see also

• MDN: @supports
• CSS Conditional Rules Level 5 specification
• chromestatus — at-rule: CSS Feature Detection (5110744177836032)
• named-feature() function for CSS @supports — Chrome 148