Name-only container queries + comma-separated queries

Reine Namensabfragen Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). Kommagetrennte `@container`-Query-Listen: Chrome 150.

Chrome 148Edge 148Safari 26.4Firefox 149

`@container name { }` ohne Bedingung matcht immer, wenn ein benannter Container existiert, eine saubere Art, Styles nach Kontext umzuschalten ("in der Sidebar") ohne Größentest.

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: Browser ohne Unterstützung ignorieren die Regel; der Standard-Linkstil gilt.

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

Prompt

Um eine Komponente je nach Region anders zu stylen, benenne die Region mit `container-name: sidebar` (kein `container-type` nötig) und nutze `@container sidebar { ... }` ohne Abfrage. Nutze Größenbedingungen nur, wenn das Layout wirklich von der Breite abhängt.