Container-Queries – @container
Media Queries ändern die Stile von Elementen anhand der Größe des Viewports oder Browserfensters. @container-Queries hingegen ändern Stile anhand der Größe eines umfassenden Containers. Sie werden in zwei Schritten eingesetzt:
Schritt 1
section { container-type: inline-size; container-name: section; }
oder als Kurzschrift
┌─ Name des Containers section { ▼ container: demo / inline-size; ▲ Ausrichtung ─┘ }
container-type macht ein Element zu einem Container. Die zwei möglichen Werte sind:
- inline-size
- bezieht sich auf die Breite des Containers bei Schreibrichtung links : rechts
- block-size
- bezieht sich auf die Höhe des Containers bei Schreibrichtung top : down
Wenn der Viewport so breit wird, dass das section-Element auf einen Teil der Breite beschränkt wird – z.B. durch CSS flex oder grid
Schritt 2
@container section (inline-size > 920px) { figure { display: flex; justify-content: space-between; align-items: end; max-width: 100%; } figure img { width: 66%; } figcaption { width: 30% } }
Auf kleinen und mittelgroßen Monitoren bleibt das Bild max. 500px breit, die Unterschrift sitzt unter dem Bild. Wird das Container-Element section sehr breit, wird die Bildunterschrift neben das Bild gesetzt.
Die Browser unterstützen @container seit Ende 2022 / Anfang 2023.
CSS nesting – verschachteln
Bis Ende 2023 gab es Nesting – das Verschachteln von CSS-Regeln – nur mit Preprozessoren wie SASS und LESS, aber im letzten Quartal haben alle Mainstreambrowser CSS Nesting umgesetzt.
elternRegel { /* Regeln für den Selektor elternRegel */ & KindRegel { /* Regeln für untergeordnete Selektoren */ } }
Statt einen Selektor wiederholt mit verschiedenen Kind-Elementen oder Pseudo-Selektoren zu notieren, setzt das native CSS Nesting eine Regel in eine andere Regel. Dabei entsteht eine übersichtliche Hierarchie, die besser lesbar und einfacher zu ändern ist.
<nav class="demo-menu"> <div class="logo"><img src="logo.png" width="120" height="120" alt=""></div> <ul> <li>item1</li> <li>item1</li> <li>item1</li> </ul> </nav>
.demo-menu { background: black; padding: 4px 1rem; display: flex; gap: 18px; } .logo { width: 60px; height: 60px; background: ivory; } .demo-menu ul { list-style-type: none; display: flex; gap: 18px; } .demo-menu li { color: white; }
.demo-menu { background: black; padding: 4px 1rem; display: flex; gap: 18px; .logo { width: 60px; height: 60px; background: ivory; } ul { list-style-type: none; display: flex; gap: 18px; li { color: white; } } }
CSS Nesting beantwortet Fragen wie »Wie werden Breakpoints bzw. Media Queries in Nesting umgesetzt?» und »Wie reagiert Nesting auf Spezifität?«
rotate(), scale() und translate() ohne transform
In CSS Transform Level 2 sind die rotate()-, scale()- und translate()-Funktionen, die zuvor die transform-Eigenschaft nutzen, zu unabhängigen CSS-Eigenschaften geworden. Allesamt sind sie experimentelle Eigenschaften der Mainstream-Browser, die man sich heute bereits ansehen kann.
.turnme { width: 200px; height: 70px; scale: 0.9; rotate: 90deg; translate: 50% -50%; transform-origin: left; }