Container style queries (custom properties)

Baseline 2026 (Chrome 111, Safari 18, Firefox 151 im Mai 2026). Die Range-Syntax für style() ist in Firefox noch hinter einem Flag.

Chrome 111Edge 111Safari 18Firefox 151

Frage die Custom-Property-Werte eines Containers ab: `@container style(--theme: dark)` stylt Kinder, wenn das Elternelement `--theme: dark` setzt. Macht aus Custom Properties echte Komponentenvarianten ohne Klassenexplosion.

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: Browser ohne Unterstützung ignorieren die Style Queries und rendern den neutralen Button.

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

Prompt

Setze Komponentenvarianten über Container Style Queries um: das Elternelement setzt eine Custom Property (`--variant: danger`) und die Komponente liest sie mit `@container style(--variant: danger) { ... }`. Jedes Element ist automatisch ein Style-Container, also ist kein `container-type` nötig. Nutze das statt BEM-Modifier-Klassen, die durch den Baum weitergereicht werden.