Container style queries (custom properties)

Baseline 2026 (Chrome 111, Safari 18, Firefox 151 in May 2026). Range syntax for style() is still flagged in Firefox.

Chrome 111Edge 111Safari 18Firefox 151

Query a container's custom property values: `@container style(--theme: dark)` styles children when the parent sets `--theme: dark`. Turns custom properties into real component variants without class explosions.

CSS

.fx-029 {
  display: inline-block;
  margin: 4px
}
.fx-029 button {
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  font: 600 14px system-ui;
  background: #e5e7eb;
  color: #111
}
@container style(--variant: primary) {
  .fx-029 button {
    background: #2563eb;
    color: #fff
  }
}
@container style(--variant: danger) {
  .fx-029 button {
    background: #dc2626;
    color: #fff
  }
}
.fx-029 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<section class="fx-029" style="--variant: danger">
  <button>Delete account</button>
</section>
<section class="fx-029" style="--variant: primary">
  <button>Save</button>
</section>

Fallback: Unsupported browsers ignore the style queries and render the neutral button.

Source: web.dev/blog/baseline-digest-may-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/151

Prompt

Implement component variants through container style queries: the parent sets a custom property (`--variant: danger`) and the component reads it with `@container style(--variant: danger) { ... }`. Every element is automatically a style container, so no `container-type` is needed. Use this instead of BEM modifier classes propagated through the tree.