Container queries (size) + cqi/cqw units

Baseline 2023 (Chrome 105, Safari 16, Firefox 110); seit 2025 breit verfügbar. Reine Namensabfragen (ohne Größenbedingung) sind Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149).

Chrome 105Edge 105Safari 16Firefox 110

Lässt eine Komponente auf die Breite ihres eigenen Containers reagieren statt auf den Viewport. cqi/cqw-Einheiten bemessen Text und Abstände relativ zu diesem Container, sodass eine Karte in einer Sidebar und in einem Hero ohne Media Queries funktioniert.

Container-aware card

Resize the wrapper, not the window.

CSS

.fx-001{container:card / inline-size;resize:horizontal;overflow:auto;width:60%;min-width:220px;border:1px dashed #999;padding:8px}
.fx-001-card{display:grid;gap:12px;font-family:system-ui}
.fx-001-card img{width:100%;border-radius:8px;display:block}
.fx-001-card h3{font-size:clamp(1rem,4cqi,1.6rem);margin:0}
@container card (min-width: 420px){
  .fx-001-card{grid-template-columns:160px 1fr;align-items:center}
}

HTML

<div class="fx-001">
  <article class="fx-001-card">
    <div style="aspect-ratio:16/10;background:linear-gradient(135deg,#dbeaff,#ece0ff)"></div>
    <div>
      <h3>Container-aware card</h3>
      <p>Resize the wrapper, not the window.</p>
    </div>
  </article>
</div>

Fallback: Browser ohne Unterstützung ignorieren @container und zeigen das gestapelte Layout; nichts geht kaputt.

Quelle: web.dev/baseline/2026 and https://developer.chrome.com/release-notes/148

Prompt

Baue diese Karte als Container-Query-Komponente: setze `container-type: inline-size` (mit einem container-name) auf den Wrapper der Karte, nie auf die Karte selbst, und wechsle mit `@container name (min-width: 420px)` von gestapelt auf zweispaltig. Nutze cqi-Einheiten für die Überschriftengröße (per clamp zwischen rem-Werten begrenzt), damit die Typografie mit dem Container skaliert. Nutze keine Viewport-Media-Queries für das Komponentenlayout.