# Container style queries (custom properties)

Estado: 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.  
Fuente: https://web.dev/blog/baseline-digest-may-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/151  
Página: https://designforai.dev/es/css/container-style-queries

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.

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

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