CSS – Neue CSS-Eigenschaften und Stile

CSS1 und CSS2 vs CSS3

Während die ersten Versionen der CSS-Spezifikation noch abgeschlossene Spezifikationen waren, kam CSS2.1 schon in Form von Modulen wie Visual Effects und Generated Content. CSS3 steuert Stück für Stück neue Module wie etwa das CSS3-Selector-Modul, Media Queries oder CSS Grid hinzu. Die Module wiederum haben Versionen wie Level 1, Level 2.

So entdecken wir neue CSS-Eigenschaften eher durch Zufall, manchmal in WordPress-Themes oder HTML-Templates, manchmal bei der Recherche, wenn das CSS mal wieder nicht will, manchmal in caniuse.com, wenn wir etwas ganz anderes gesucht haben.

CSS Grid: subgrid

Weder display:flex noch display:grid haben eine Lösung für ein tägliches Problem: Eine Überschrift, ein kurzer Text, ein Bild in einer Spalte oder Karte bilden ein Raster. Solang Überschriften und Text gleich lang sind, ist das leichtes Spiel.

Ist aber ein Text kürzer oder eine Überschrift länger, gerät das Raster aus der Fassung und schiebt das Bild nach unten oder oben.

Philodendron

Philodrendron – der Baumfreund – ist aus der Mode gekommen. Dabei war kaum eine Zimmerpflanze so genügsam (außer bei der Größe der Töpfe)

Die Blaue Pieksende Silverdistel

Sie ist und bleibt das Rührmichnichtan.

Während sich ein Element ganz unten durch etwas umständliche Tricks nach ganz unten schieben lässt, gab es bislang keine Lösung für unterschiedlich hohe Zeilen in einem Grid. Das ändert sich jetzt mit grid-template-rows: subgrid; (zurzeit nur Safari Technology Preview und aktueller Firefox).

<div class="block-grid">
	<div class="sub">
		<h4>Philodendron</h4>
		<p>Philodrendron …</p>
		<img src="philo.jpg" …>
	</div>
	<div class="sub">
		<h4>Die Blaue …</h4>
		<p>Sie ist und bleibt …</p>
		<img src="distel.jpg" …>
	</div>
</div>

.block-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
}

.sub {
	grid-row: 1 / 4;
	display: grid;
	grid-template-rows: subgrid;
	border:1px solid silver;
}

css-grid-subgrid — So sollte es aussehen, wenn der Browser CSS subgrid unterstützt

Noch wirkt grid-template-rows: subgrid nur in Safari und in Firefox.

Mehr zu subgrid auf CSS Grid und Subgrid auf mediaevent.de.

CSS has()-Selektor

has() wird der lang ersehnte Vorfahre- oder Parent-Selector. Damit selektiert CSS :has() ein Parent-Element, das mindestens ein bestimmtes Element enthält. Der Selektor für das Child-Element sitzt innerhalb der Klammern des has-Selektors.

Damit CSS prüft, ob ein figure-Element eine Bildunterschrift – figcaption – hat, sollen alle figure-Elemente mit figcaption eine Hintergrundfarbe zeigen.

figure:has(figcaption) {
	background-color: #efefef;
}

Fischerkahn

Rees am Rhein.
Laterne auf der Gartenmauer
Aquarell

Stillleben mit Obst
Alter Fischerkahn

Variable Fonts

Statt verschiedener Schriftdateien für reguläre, dünne und fette Schriftschnitte nutzen variable Schriften eine Schriftdatei mit Variationen anhand einer Achse. Variable Schriften können z.B. die Schriftstärke nicht einfach durch numerische Werte von 100 bis 900 aufweisen, sondern alle Schriftstärken in einem Bereich von 1 bis 999 in einer einzigen Schriftdatei ausliefern.

Neben font-weight sind width, slant, italic und optical-size typische Kandidaten variabler Schriften.

Lorem Ipsum

.bolder {
	font-weight: 400;
}

.wdth {
	font-variation-settings: ;
}

CSS inset für position: absolute

CSS platziert ein absolut positioniertes Element anhand von vier Eigenschaften: top, right, bottom und left. Anstelle der vier Eigenschaften beschreibt CSS die Position des absolut positionierten Elements mit der Kurzschrift inset.

.elem {
	position: absolute;
	inset: auto 5% 0 5%;
}

Mehr zum Platzieren von absolut positionierten Elementen mit CSS inset.

aspect-ratio

Aspect Ratio – das Seitenverhältnis – ist das Verhältnis der Breite zur Höhe eines Bildes, einer HTML-Box, eines Videos oder einfachen iframes. Typische Seitenverhältnisse lauten 3:2 bei Fotos aus der Digitalkamera, 16:9 für Video.

Meist müssen wir über das Seitenverhältnis von Bildern nicht nachdenken, denn sie werden fast immer mit width- und height-Attribut eingesetzt und einfaches CSS sorgt dafür, dass ihr Seitenverhältnis auf kleinen und großen ViewPorts erhalten bleibt.

img {
	width: 100%;
	height: auto;
}

Videos, die in einem iframe geladen werden (YouTube-Video), machen es nicht so einfach. Ein nicht gerade intuitiver padding-Hack hält das Seitenverhältnis seit ewig und drei Tagen aufrecht.

Aber CSS aspect-ratio verkürzt auch bei einfachen Bildern wie dem kleinen Carousel das CSS: So kommt es nicht zu Sprüngen an Breakpoints, sondern der Inhalt der Carousel-Slides verkleinert und vergrößert sich stufenlos durch clamp() und aspect-ratio.

Die neue CSS-Eigenschaft aspect-ratio ist leichter verständlichen und knackig kurz.

iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

#carousel {
  position: relative;
  width: clamp(300px, 70%, 600px);
  aspect-ratio: 4/3;
  margin-left: auto; margin-right: auto;
}

Neue CSS-Eigenschaften: clamp ()

Media Queries haben eine Abfrage für »zwischen«, die CSS-Funktion clamp() setzt einen Wert auf Werte zwischen einem Minimum und einem Maximum.

clamp() ist eine neue Technik, die zwischen einem minimalen und einem maximalen Wert wählt, z.B. um den Text linear an die Breite des Platzangebots im Viewport oder im Layout anzupassen.

clamp (min, preferred, max);

Solange der bevorzugte Wert (preferred) zwischen den Minimum und dem Maximum liegt, gibt clamp preferred zurück. Wenn aber preferred kleiner als das Minimum oder größer als das Maximum ist, liefert clamp den Wert von min oder max.

Während Media Queries nur in der CSS-Datei oder im style-Element sitzen können, kann clamp auch inline in das style-Attribut gesetzt werden.

<p style="font-size: clamp(1.2rem, 3vw, 3rem)">Transfer</p>

Transfer

Beispiel CSS clamp Bildgröße zwischen Min und Max

.banner {
	width: clamp(200px, 50%, 500px);
	margin: 2em auto;
}

preferred darf auch ein Ausdruck wie 50% + 20px sein.

Die CSS-Funktionen min, max und clamp werden von allen modernen Browsern unterstützt (nicht IE11).

Scroll-Snap

CSS scroll-snap fängt den ViewPort an beliebigen Elementen ein, wenn der Benutzer über einen Bereich scrollt. Per scroll-snap kann z.b. die Leserichtung von vertikal auf horizontal ausgerichtet werden (so wie wir das bei den Einstellungen der Apps auf Handys kennen), oder ein einfaches Carousel mit CSS ohne Javascript realisiert werden.

#carousel.snap {
  scroll-snap-type: x mandatory;
}

#carousel.snap.vertical {
  scroll-snap-type: y mandatory;
}

CSS ScrolSnap Carousel von NewInWeb

Mehr zu CSS scroll-snap

gap ist angekommen in display:flex

Das CSS-Grid hat von Anfang an eine Eigenschaft gap – der Abstand zwischen den Gridzellen und -spalten. Bei Flexboxen mussten CSS margin und justify-content herhalten.

Jetzt gibt es gap auch für Flex-Elemente.

Philodrendron – der Baumfreund

Kartoffelrose und Camelia

Nelken sind nie allein

Die Stadtkamille vom Moersbach

Ach die armen Blüten haben ihre Zweige verloren

Die Schönheit der Distel

.flex-columns {
	display: flex;
	width: clamp(300px, 400px, 90%);
	flex-wrap: wrap;
	gap:16px;
}

CSS Level4 Colors

Jetzt kommt mehr Farbe ins CSS CSS Color Module Level 4 – W3C Working Draft, 1 June 2021.

Der Farbraum des Webs ist sRGB, Farben können nur als RGB-Farben angelegt und wiedergegeben werden. Aber heute schon können die modernen Browser Bilder im CMYK-Farbraum anzeigen.

Auch sind heute die meisten Monitore nicht mehr schlichte sRGB-Monitore, sondern die jüngere Generation der Monitore beherrscht bereits einen großen Teil des P3-Farbraums (iPhones, Google Pixel und HTML und viele Smartphones haben ebenfalls ein P3-Display).

Zwar werden Farben immer noch im sRGB-Farbraum interpretiert, aber Colors L4 bringt Farbmanagement in die Webseite, z.B. Farben im P3-Farbraum.

color: color(display-p3 1 0.5 0)

Ebenfalls auf dem Weg ins Web sind Farbangaben im LCH und Lab-Farbraum.

lch(52.2345% 72.2 56.2)

All

all setzt alle Eigenschaften eines Elements (außer unicode-bidi und direction) zurück auf seine initialen Werte.

body {
	all: initial;
}

Unterstützt von allen Browsern außer IE11 und älter.

Browser-Präfix und @supports-Regel

Die @supports-Regel stellt ohne den Einsatz von Feature Detection per Javascript / Modernizr fest, ob der Browser bestimmte Eigenschaften unterstützt.

Anfangs müssen viele CSS3-Stile mit Browser-eigenem Präfix angesprochen werden – z.B. display:-webkit-flex statt display:flex für die Webkit-basierten Browser wie Chrome (inzwischen zwar "Blink"-basiert, aber immer noch mit webkit-Präfix), Safari und Konqueror.

Heute führt die @supports-Regel eine elegante Abfrage direkt im CSS durch, so dass moderne Stile für moderne Browser eingesetzt werden können und alte Browser mit einem angemessenen Ersatz beliefert werden.

Internet Explorer hingegen stammt aus dem Jahr 2012 und beherrscht nur einen Bruchteil der Eigenschaften aus CSS3 nach dem aktuellen Standard. Zwar sind die meisten der CSS3-Eigenschaften auch in IE11 vorhanden, aber sie entsprechen noch dem frühen Standard, haben andere Bezeichnungen und brauchen den -ms-Browser-Präfix.

Seit dem 15. Juni 22 ist Microsoft IE Geschichte: Microsoft hat den Support für IE eingestellt.