CSS – Neue CSS-Eigenschaften und Stile

CSS media Regel – Viewport und supports

Die CSS-Versionen umfassen seit CSS3 keinen festen neuen Satz von Eigenschaften, sondern CSS wächst wie junges Holz. CSS4 sollte es eigentlich nicht geben, sondern neue CSS-Eigenschaften erscheinen laufend als Updates, Verbesserungen und als neue Funktionen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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)

plant-philo

Die Blaue Pieksende Silverdistel

Sie ist und bleibt das Rührmichnichtan.

plant-distel

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

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

CSS has()-Selektor

has() wird der lang ersehnte Vorfahre- oder Parent-Selector. Damit erreicht 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.

:has() stellt z.B. fest, ob ein Element eines Navigationsmenüs ein Untermenü enthält. Obendrein findet CSS dann ohne die Hilfe von JavaScript heraus, wie viele Elemente das Menü umfasst.

  • Home
  • Blog
    • Technik
    • Layout
    • Farben
  • Kosten
    • Downloads
    • Performance
    • Pflegen
  • Datenschutz
  • Impressum
.menu ul {
	max-height: 0;
	overflow: hidden;
	height: auto;
}

.menu li.op ul {
	max-height: 400px;
}

.menu li:has(ul)::before {
	content: "▶ ";
}

@media (min-width: 780px) {
	.menu { display: flex; }
	.menu:has(li:nth-child(5)) li { width: 20%; }
}

Noch wartet CSS :has auf die Unterstützung von Firefox. Mehr zum CSS :has Selektor

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

CSS Layer

Der Cascade Layer wird durch eine neue CSS-Regel in Gang gesetzt: @layer. Vor dem Auftritt des Cascade Layers war es wichtig, auf die Reihenfolge der Regeln zu achten. Typischerweise kam das unwichtigste Stylesheet zuerst, das wichtigste wurde als letztes notiert.

Mit der @layer-Regel kann das Haupt-Stylesheet die Layer und ihre Reihenfolge im Voraus festlegen. Anschließend werden die Stile geladen oder definiert und dann in einem Layer untergebracht, um den Rang bzw. das Gewicht er erhalten, ohne sich Gedanken um das akribische Management des Stil-Orchesters zu machen.

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.