Name-only container queries + comma-separated queries

Queries só por nome Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). Listas de query `@container` separadas por vírgula: Chrome 150.

Chrome 148Edge 148Safari 26.4Firefox 149

`@container name { }` sem condição casa sempre que um container nomeado existir, uma forma limpa de trocar estilos por contexto ("dentro da barra lateral") sem teste de tamanho.

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: Navegadores sem suporte ignoram a regra; o estilo padrão de link se aplica.

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

Prompt

Para estilizar um componente de forma diferente por região, nomeie a região com `container-name: sidebar` (não precisa de `container-type`) e use `@container sidebar { ... }` sem query. Use condições de tamanho só quando o layout depender de verdade da largura.