CSS, HTML & Javascript mit {stil}

CSS 2024: Nesting und @container

CSS Nesting – verschachteln

Die @container-Regel macht das Layout eines Elements abhängig von der Breite eines umfassenden Containers. Mit Nesting rückt natives CSS näher an Präprozessoren wie SASS und LESS. Nesting ist der nächste große Wurf nach display: grid und verschachtelt CSS-Regeln hierarchisch. So spiegelt das CSS die Struktur des Markups wieder. Aber auch kleinere Schritte vereinfachen das CSS.

23-02-02 SITEMAP

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
belichtung
Mit einer Bildunterschrift entweder unter dem Bild oder neben dem Bild – je nach Breite des umfassenden Containers.

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.

Als es klingelte, nachts es war kurz vor halb 10
 
.turnme {
	width: 200px;
	height: 70px;
	scale: 0.9;
	rotate: 90deg;
	translate: 50% -50%;
	transform-origin: left;
}