Container style queries (custom properties)

Baseline 2026 (Chrome 111, Safari 18, Firefox 151 en mayo de 2026). La sintaxis de rangos para style() sigue detrás de un flag en Firefox.

Chrome 111Edge 111Safari 18Firefox 151

Consulta los valores de custom properties de un contenedor: `@container style(--theme: dark)` estiliza los hijos cuando el padre define `--theme: dark`. Convierte las custom properties en variantes reales de componente sin explosión de clases.

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: Los navegadores sin soporte ignoran las consultas de estilo y renderizan el botón neutro.

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

Prompt

Implementa las variantes de componente mediante container style queries: el padre define una custom property (`--variant: danger`) y el componente la lee con `@container style(--variant: danger) { ... }`. Todo elemento es automáticamente un contenedor de estilo, así que no hace falta `container-type`. Úsalo en lugar de clases modificadoras BEM propagadas por el árbol.