Container style queries (custom properties)

Baseline 2026 (Chrome 111, Safari 18, Firefox 151 em maio de 2026). A sintaxe de intervalo para style() ainda está atrás de flag no Firefox.

Chrome 111Edge 111Safari 18Firefox 151

Consulte os valores das custom properties de um container: `@container style(--theme: dark)` estiliza os filhos quando o pai define `--theme: dark`. Transforma custom properties em variantes de componente reais sem explosão de classes.

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: Navegadores sem suporte ignoram as style queries e renderizam o botão neutro.

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

Prompt

Implemente variantes de componente com container style queries: o pai define uma custom property (`--variant: danger`) e o componente a lê com `@container style(--variant: danger) { ... }`. Todo elemento é automaticamente um style container, então não precisa de `container-type`. Use isso em vez de classes modificadoras BEM propagadas pela árvore.