CSS 2024: Nesting und @container

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; }
	}
}

Die Seite CSS Nesting beantwortet Fragen wie »Wie werden Breakpoints bzw. Media Queries in Nesting umgesetzt?» und »Wie reagiert Nesting auf Spezifität?«

dvw und dvh – Dynamische Breite und Höhe des Viewports

dvw und dvh sind Weiterentwicklungen von vw und vh, die eine Anpassung vornehmen, wenn sich das Browserfenster auf dem mobilen Geräte ändert.

color-mix

color-mix mischt zwei Farben zu einer neuen Farbe und braucht dafür einen Farbraum sowie die Angaben zu den beiden Farben.

background-color: color-mix( in: color-space, color %, color %)

Als Farbraum können srgb und hsl eingesetzt werden.

background-color: color-mix(in srgb, red 50%, blue 50%);

color-mix-Werte lassen sich als Color-Stops in Verläufen einsetzen, z.B. um besonders zarte Verläufe in Pastelltönen zu setzen.

background-image: 
linear-gradient(to right,
				color-mix(in srgb, yellow 30%, white 70%) 0%, 
				color-mix(in srgb, orange 30%, white 70%) 50%);

Neben srgb als Standard-Farbraum könnte auch display-p3 (ein etwas größerer Farbraum der jüngeren Monitore) verwendet werden. Da bleibt Mac OS Safari allerdings außen vor.

Zwar unterstützt auch Safari Monitore mit dem größeren Gamut display-p3, aber nutzt eine andere Notation (Wide Gamut Color in CSS with Display-P3).

background: linear-gradient(
	to right, 
	color(display-p3 1 0.9 0.9), /* Rot */
	color(display-p3 0.9 0.9 1)  /* Blau */
)

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.

<div style="height:200px">
	<div class="turnme">Als es klingelte, nachts es war kurz vor halb 10</div>
</div>

.turnme {
	width: 200px;
	height: 70px;
	scale: 0.9;          // anstelle von transform: scale(…)
	rotate: 90deg;       // anstelle von transform: rotate(…)
	translate: 50% -50%; // anstelle von transform: translate(…)
	transform-origin: left;
}

Media Queries und Breakpoint mit »Bereich zwischen« festlegen

Neben min-width und max-width kann die Media Query in den modernen Browsern auch mit einem range – Bereich «zwischen» eingesetzt werden.

/** Bei einer Breite des Viewports zwischen 320px und 980px **
@media (min-width: 320px) and (max-width: 980px) {
	.elem {
		…
	}
}

Die Schreibweise mit einem Range / Bereich als Boolescher Operator den Programmierern entgegen und ist kürzer:

@media (320px <= width <= 980px) {
	.elem {
		…
	}
}