Neue CSS-Funktionen im Jahr 2025: Überblick über wichtige Änderungen

Die Webentwicklung entwickelt sich ständig weiter, und auch CSS bleibt nicht zurück. Anfang 2025 wurde deutlich, dass die Stylesheet-Sprache viele neue Funktionen erhalten hat, die bereits von modernen Browsern unterstützt werden. In diesem Artikel werfen wir einen Blick auf die wichtigsten Neuerungen, die die Arbeit von Entwicklern erleichtern und die Benutzererfahrung verbessern können.

Die Bedeutung von balance für die Eigenschaft text-wrap

Typografie war schon immer eine der größten Herausforderungen für Webentwickler. Ein häufiges Problem ist die ungleichmäßige Verteilung von Text in Überschriften, insbesondere auf verschiedenen Geräten. Beispielsweise kommt es häufig vor, dass das letzte Wort einer langen Überschrift in eine separate Zeile rutscht, was die visuelle Wahrnehmung beeinträchtigt.

Zur Lösung dieses Problems ist nun der Wert balance für die Eigenschaft text-wrap verfügbar. Dieser ermöglicht eine gleichmäßige Verteilung des Textes über mehrere Zeilen und minimiert das Auftreten einzelner Wörter in einer Zeile. Beispiel:

h1 {
  text-wrap: balance;
}

Dieser Ansatz ist besonders für responsives Design nützlich, bei dem die Lesbarkeit des Textes auf allen Bildschirmen erhalten bleiben muss.

Beispiel für die Verwendung der Eigenschaft:

Testcode auf separater Seite

Native CSS-Verschachtelung

Lange Zeit nutzten Entwickler Präprozessoren wie SASS oder LESS für die Verschachtelung von CSS-Regeln. Doch im Jahr 2025 erhielt CSS native Unterstützung für Verschachtelung. Jetzt kann Code folgendermaßen geschrieben werden:

.awesome-block {
  border: 2px solid lightblue;
  padding: 1rem;
   
  &:hover {
    background-color: tomato;
  }
}

Diese Syntax vereinfacht die Struktur der Styles und macht den Code lesbarer. Allerdings sollte man beachten, dass die Verwendung des Kaufmanns-Und (&) in Klassennamen zu Fehlern führen kann. Deshalb ist Vorsicht geboten.

Pseudo-Klassen :user-valid und :user-invalid

Die Arbeit mit Formularen wird dank der neuen Pseudo-Klassen :user-valid und :user-invalid noch komfortabler. Im Gegensatz zu den herkömmlichen :valid und :invalid, die Stile direkt nach dem Laden der Seite anwenden, werden die neuen Pseudo-Klassen erst nach der Benutzerinteraktion mit dem Feld aktiv. Dadurch werden unerwünschte visuelle Effekte beim Laden des Formulars vermieden.

Beispiel:

input:user-invalid {
  box-shadow: 0 0 10px red;
}

input:user-valid {
  box-shadow: 0 0 10px green;
}

Beispiel für die Anwendung:

Testcode auf separater Seite

Wichtig zu beachten! Die Pseudo-Klassen :user-valid und :user-invalid werden derzeit von den meisten Browsern noch nicht unterstützt. Daher könnten Stile sofort beim Laden der Seite angewendet werden (wie bei :valid und :invalid). Um dies zu vermeiden, können :focus, :focus-within oder ein JavaScript-Handler verwendet werden.

Die Eigenschaft scrollbar-gutter

Ein häufiges Problem bei der Arbeit mit modalen Fenstern ist das „Springen“ des Inhalts, wenn die Scrollleiste erscheint oder verschwindet. Die neue Eigenschaft scrollbar-gutter reserviert im Voraus Platz für die Scrollleiste und verhindert so das Verschieben des Inhalts.

Beispiel:

html,
body {
  scrollbar-gutter: stable;
}

Diese Lösung ist besonders nützlich, um die Benutzererfahrung bei der Arbeit mit modalen Fenstern und anderen UI-Elementen zu verbessern.

Die mathematische Funktion round()

CSS bietet nun die Möglichkeit, Werte mit der Funktion round() zu runden. Dies ist besonders praktisch beim Arbeiten mit Dezimalwerten, die beim Layout auftreten können. Zum Beispiel:

.box {
  margin: round(to-zero, 1.25rem, 1px);
}

Die Funktion round() kann in Kombination mit calc() verwendet werden, wodurch sie ein leistungsstarkes Werkzeug für die präzise Kontrolle von Größen und Abständen wird.

Schlüsselwörter safe und unsafe

Beim Einsatz der Eigenschaften align-items und justify-content kann es vorkommen, dass Elemente aufgrund von Überlauf abgeschnitten werden. Die neuen Schlüsselwörter safe und unsafe ermöglichen die Kontrolle dieses Verhaltens. Beispiel:

.parent {
  align-items: safe center;
}

Das Schlüsselwort safe stellt sicher, dass Elemente am Anfang des Containers nicht abgeschnitten werden – besonders wichtig für adaptive Interfaces.

Die Eigenschaft align-content ohne Flexboxen

Früher erforderte die Verwendung der Eigenschaft align-content, dass display: flex, inline-flex, grid oder inline-grid gesetzt wurde. Nun kann align-content eigenständig funktionieren, was das vertikale Zentrieren von Elementen erleichtert. Beispiel:

.container {
  height: 10rem;
  background-color: lightblue;
  align-content: center;
}

Beispiel mit display: flex: Testcode auf separater Seite

Und ein Beispiel für vertikales Zentrieren nur mit align-content: Testcode auf separater Seite

Hierbei ist zu beachten, dass die Blöcke innerhalb des Containers nicht in einer Linie angeordnet sind, aber dennoch vertikal ausgerichtet werden. Um items-Elemente auszurichten, wenden Sie einfach float: left; an.

Wichtig zu beachten! Diese Eigenschaft funktioniert möglicherweise derzeit nicht in mobilen Browsern. Sie sollten die Methode mit dem Parameter display: flex verwenden.

Fazit

Im Jahr 2025 entwickelt sich CSS weiter und bietet Entwicklern neue Werkzeuge zur Erstellung flexibler und adaptiver Interfaces. Zu den wichtigsten Neuerungen gehören:

Der Wert balance für die Eigenschaft text-wrap;
Native CSS-Verschachtelung;
Pseudo-Klassen :user-valid und :user-invalid;
Die Eigenschaft scrollbar-gutter;
Die mathematische Funktion round().

Diese Änderungen erleichtern nicht nur die Entwicklung, sondern eröffnen auch neue Möglichkeiten für die Gestaltung hochwertiger Benutzeroberflächen. Es wird empfohlen, diese Funktionen zu testen und in zukünftigen Projekten zu verwenden.

Weitere nennenswerte Neuerungen:

Die Maßeinheit cap, basierend auf der Höhe von Großbuchstaben;
Die Eigenschaft content-visibility, die das Rendern der Seite beschleunigt;
transition-behavior, das Animationen ermöglicht, auch wenn sich display ändert;
Die mathematischen Funktionen rem() und mod().

Diese und weitere neue CSS-Features können auf der Diskussionsseite besprochen werden.