Name-only container queries + comma-separated queries

Consultas solo por nombre Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). Listas de consultas `@container` separadas por comas: Chrome 150.

Chrome 148Edge 148Safari 26.4Firefox 149

`@container name { }` sin condición coincide siempre que exista un contenedor con ese nombre, una forma limpia de cambiar estilos según el contexto ("dentro de la barra lateral") sin comprobar el tamaño.

Link in main

CSS

.fx-037-sidebar {
  container-name: sidebar;
  background: #f3f4f6;
  padding: 12px;
  margin-bottom: 8px
}
.fx-037 {
  font: 14px system-ui;
  color: #2563eb
}
@container sidebar {
  .fx-037 {
    color: #111;
    font-weight: 600;
    text-decoration: none
  }
}
.fx-037 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<aside class="fx-037-sidebar"><a class="fx-037" href="#">Link in sidebar</a></aside>
<main><a class="fx-037" href="#">Link in main</a></main>

Fallback: Los navegadores sin soporte ignoran la regla; se aplica el estilo de enlace por defecto.

Fuente: developer.chrome.com/release-notes/148 and https://developer.chrome.com/release-notes/150

Prompt

Para estilizar un componente de forma distinta según la región, nombra la región con `container-name: sidebar` (no hace falta `container-type`) y usa `@container sidebar { ... }` sin consulta. Usa condiciones de tamaño solo cuando el layout dependa de verdad del ancho.