Quelltext der Seite 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 <code>balance</code> für die Eigenschaft <code>text-wrap</code> 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:

<syntaxhighlight lang="css" copy>
h1 {
  text-wrap: balance;
}
</syntaxhighlight>

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

{{Iframe
|url = https://codeeditor.ru/code.php?id=2502kj2LYzgi0g&lang=de
|höhe = 720px
|titel = Die Bedeutung von balance für die Eigenschaft text-wrap
}}

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

 <syntaxhighlight lang="css" copy>
.awesome-block {
  border: 2px solid lightblue;
  padding: 1rem;
   
  &:hover {
    background-color: tomato;
  }
}
</syntaxhighlight>

Diese Syntax vereinfacht die Struktur der Styles und macht den Code lesbarer. Allerdings sollte man beachten, dass die Verwendung des Kaufmanns-Und (<code>&</code>) 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 <code>:user-valid</code> und <code>:user-invalid</code> noch komfortabler. Im Gegensatz zu den herkömmlichen <code>:valid</code> und <code>:invalid</code>, 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:'''

<syntaxhighlight lang="css" copy>
input:user-invalid {
  box-shadow: 0 0 10px red;
}

input:user-valid {
  box-shadow: 0 0 10px green;
}
</syntaxhighlight>

'''Beispiel für die Anwendung:'''
{{Iframe
|url = https://codeeditor.ru/code.php?id=2502DOe3zWFqN3&lang=de
|höhe = 500px
|titel = Pseudo-Klassen :user-valid und :user-invalid
}}<blockquote>'''Wichtig zu beachten!''' Die Pseudo-Klassen <code>:user-valid</code> und <code>:user-invalid</code> werden derzeit von den meisten Browsern noch nicht unterstützt. Daher könnten Stile sofort beim Laden der Seite angewendet werden (wie bei <code>:valid</code> und <code>:invalid</code>). Um dies zu vermeiden, können <code>:focus</code>, <code>:focus-within</code> oder ein JavaScript-Handler verwendet werden.</blockquote>

== 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 <code>scrollbar-gutter</code> reserviert im Voraus Platz für die Scrollleiste und verhindert so das Verschieben des Inhalts.

'''Beispiel:'''

<syntaxhighlight lang="css" copy>
html,
body {
  scrollbar-gutter: stable;
}
</syntaxhighlight>

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 <code>round()</code> zu runden. Dies ist besonders praktisch beim Arbeiten mit Dezimalwerten, die beim Layout auftreten können. '''Zum Beispiel:'''

<syntaxhighlight lang="css" copy>
.box {
  margin: round(to-zero, 1.25rem, 1px);
}
</syntaxhighlight>

Die Funktion <code>round()</code> kann in Kombination mit <code>calc()</code> 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 <code>align-items</code> und <code>justify-content</code> kann es vorkommen, dass Elemente aufgrund von Überlauf abgeschnitten werden. Die neuen Schlüsselwörter <code>safe</code> und <code>unsafe</code> ermöglichen die Kontrolle dieses Verhaltens. Beispiel:

<syntaxhighlight lang="css" copy>
.parent {
  align-items: safe center;
}
</syntaxhighlight>

Das Schlüsselwort <code>safe</code> 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 <code>align-content</code>, dass <code>display: flex</code>, <code>inline-flex</code>, <code>grid</code> oder <code>inline-grid</code> gesetzt wurde. Nun kann <code>align-content</code> eigenständig funktionieren, was das vertikale Zentrieren von Elementen erleichtert. Beispiel:

<syntaxhighlight lang="css" copy>
.container {
  height: 10rem;
  background-color: lightblue;
  align-content: center;
}
</syntaxhighlight>

'''Beispiel mit <code>display: flex</code>:'''
{{Iframe
|url = https://codeeditor.ru/code.php?id=2502ylIzdUsT3n&lang=de
|höhe = 520px
|titel = Die Eigenschaft align-content mit display: flex
}}

'''Und ein Beispiel für vertikales Zentrieren nur mit <code>align-content</code>:'''
{{Iframe
|url = https://codeeditor.ru/code.php?id=2502P68LurLW8O&lang=de
|höhe = 630px
|titel = Vertikales Zentrieren nur mit align-content
}}

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

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

== 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 <code>balance</code> für die Eigenschaft <code>text-wrap</code>;
* Native CSS-Verschachtelung;
* Pseudo-Klassen <code>:user-valid</code> und <code>:user-invalid</code>;
* Die Eigenschaft <code>scrollbar-gutter</code>;
* Die mathematische Funktion <code>round()</code>.

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 <code>cap</code>, basierend auf der Höhe von Großbuchstaben;
* Die Eigenschaft <code>content-visibility</code>, die das Rendern der Seite beschleunigt;
* <code>transition-behavior</code>, das Animationen ermöglicht, auch wenn sich <code>display</code> ändert;
* Die mathematischen Funktionen <code>rem()</code> und <code>mod()</code>.

Diese und weitere neue CSS-Features können auf der [[Diskussion:Neue CSS-Funktionen im Jahr 2025: Überblick über wichtige Änderungen|Diskussionsseite]] besprochen werden.

== Weitere Artikel über CSS ==
{{Vorlage:Navigationsleiste/CSS|state=uncollapsed}}
{{CSS-Enzyklopädie/Navigationsleiste|state=autocollapse}}
[[Kategorie:CSS]]
[[wj-en:New CSS Features in 2025: Overview of Key Changes]]
[[wj-ru:Новые возможности CSS в 2025 году: обзор ключевых изменений]]
[[wj-es:Nuevas funciones de CSS en 2025: Resumen de los cambios clave]]
[[wj-fr:Nouvelles fonctionnalités CSS en 2025 : Aperçu des changements clés]]
[[wj-it:Nuove funzionalità CSS nel 2025: Panoramica dei cambiamenti chiave]]