# Container style queries (custom properties)

Status: Baseline 2026 (Chrome 111, Safari 18, Firefox 151 in May 2026). Range syntax for style() is still flagged in Firefox.  
Source: https://web.dev/blog/baseline-digest-may-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/151  
Page: https://designforai.dev/css/container-style-queries

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.

## HTML

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

## CSS

```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; }
```

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

## 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.