- Eine praxisorientierte Übersicht über neu hinzugekommene oder breiter unterstützte CSS/HTML-Funktionen in diesem Jahr, die ein breites Spektrum von UI-Übergängen über Formulare und Typografie bis hin zu funktionalem CSS abdeckt
- Zu den wichtigsten Neuerungen zählen Größenübergänge zu Schlüsselwörtern wie
auto, HTML popover/Invoker sowie CSS @function und if(); viele davon werden zunächst vor allem in Chrome unterstützt, daher ist eine Strategie der progressive enhancement erforderlich
field-sizing für automatisch wachsende Eingabefelder, Custom Select, text-wrap: balance/pretty, linear()-Easing und shape()-Pfade verbessern visuelle Qualität und Benutzbarkeit mit wenig Aufwand- Mit Werkzeugen zur Werte- und Ablaufsteuerung wie erweitertem
attr(), reading-flow zur Steuerung der Leserichtung und calc-size() wächst der Bereich von Designs, die sich allein mit CSS umsetzen lassen
- Während Masonry,
random(), margin-trim und Erweiterungen von View Transitions noch in Standardisierung oder Ausbau der Unterstützung sind, gelten Container Queries, :has() und dvh bereits als feste Grundlagen in der Praxis
Animate to Auto
- Eine Funktion, die bei Elementen mit beliebiger Inhaltshöhe sanfte Übergänge zwischen festen Werten ↔︎
auto ermöglicht
- Mit einer globalen Deklaration von
interpolate-size: allow-keywords sind Übergänge wie height: 0 → auto erlaubt
- Alternativ kann der Übergang auch ohne
interpolate-size über calc-size() mit height: calc-size(auto, size) erfolgen
- Der Vorteil besteht darin, fragile Workarounds wie
max-height-Tricks oder Offscreen-Messung + JS-Animation zu ersetzen und dabei das eigentliche Layout beizubehalten
- Der Support-Stand ist derzeit Chrome-zentriert; da Animationen eher ein nice-to-have sind, eignet sich PE (Progressive Enhancement) gut
Popovers & Invokers
- Das HTML-Feature
popover-Attribut verleiht beliebigen Elementen Öffnen-/Schließen-Verhalten samt passender JS-API und gehört zur Kategorie leichtgewichtiger Overlays, nicht zu Modals
- Mit Invoker-Attributen ist eine deklarative Steuerung ohne JS möglich
- Die Bedeutung liegt darin, dass Accessibility, Tastatur- und Fokusverwaltung bereits auf HTML-Ebene mitgeliefert werden und so das Risiko unvollständiger Implementierungen sinkt
- Die Unterstützung ist bei Popover breit, bei Invoker zunächst Chrome-first; zudem gibt es Unterschiede bei Detailfunktionen wie
popover="hint"
- Da ein Polyfill verfügbar ist, lässt sich das Feature auch für essenzielle UX sinnvoll einsetzen
@function
- Führt benutzerdefinierte Funktionen in das CSS-System von Wertfunktionen ein; in der Form
@function --foo(--x) { result: ... } lässt sich gemeinsame Logik abstrahieren
- Durch Reduktion von Duplikaten (DRY) und vereinfachte Deklarationen verbessern sich Lesbarkeit und Wartbarkeit
- Die Unterstützung ist Chrome-first; falls sinnvoll, kann mit
property: fallback und in der nächsten Zeile property: --func() ein graceful fallback umgesetzt werden
- Zu beachten ist, dass es nicht kompatibel mit Sass-Funktionen ist
if()
- Die erste Verzweigungsfunktion auf Wertebene in CSS: Bedingungen mit
media(), supports() und style() lassen sich wie in einer Switch-Anweisung auflisten, wobei der erste passende Wert zurückgegeben wird
- Beispiel:
grid-template-columns kann je nach Breakpoint in einer einzigen Deklaration beschrieben werden
- Der Effekt ist bessere Lesbarkeit und weniger Wiederholung; zudem passt die Funktion gut zu benutzerdefinierten
@function-Definitionen
- Die Unterstützung ist Chrome-first; empfohlen wird, zuerst einen Fallback-Wert zu deklarieren und damit das PE-Muster anzuwenden
field-sizing
- Vorstellung der Eigenschaft
field-sizing, mit der Eingabe- und Editierfelder passend zum Inhalt automatisch wachsen
- Ein typischer Anwendungsfall ist die automatische Höhenanpassung von
<textarea>, sie eignet sich aber auch für direktes Inline-Resize-UX
- Die Unterstützung besteht in Chrome, für Safari ist eine Einführung geplant; bei Bedarf ist ein leichtgewichtiges JS-Ersatzverfahren möglich
- Da es sich eher um eine UX-Verbesserung als um Kernfunktionalität handelt, eignet sich eine schrittweise Einführung
Custom Selects
- Unterstützt nach explizitem Opt-in nicht nur das Styling des
select-Aussehens, sondern die vollständige Anpassung der geöffneten Auswahl-UI selbst
- PE funktioniert hervorragend: In nicht unterstützten Umgebungen fällt das Verhalten sicher auf das normale
<select> zurück
- Die Unterstützung ist Chrome-first; mit
appearance: base-select und ::picker(select) lässt sich der Kontrollbereich erweitern
text-wrap
text-wrap: balance sorgt bei Überschriften und anderer großer Typografie für ausgewogene Zeilenlängen, während text-wrap: pretty auch im Fließtext Hurenkinder vermeidet und die Optik verbessert- Der Effekt ist bessere Lesbarkeit und höhere typografische Qualität, die sich ohne Aufwand sofort bemerkbar macht
- Die Unterstützung ist bei
balance breit, bei pretty zunächst Chrome und Safari, womit sich die Funktion gut für PE eignet
linear() easing
- Anders als das Schlüsselwort
linear erlaubt die linear()-Funktion die Definition präziser Easing-Kurven mit beliebig vielen Punkten und eignet sich besonders für komplexe Abläufe wie Bounce-Effekte
- Während
cubic-bezier() als Alternative eingeschränkt ist, bietet linear() eine feinere Timing-Kontrolle und wird voll unterstützt
- Bei Bedarf kann auf benannte Easings oder
cubic-bezier() als Fallback zurückgegriffen werden
shape()
- Die
shape()-Funktion ergänzt das bisherige path(), dessen Syntax auf Pixelwerte beschränkt und relativ schwer lesbar ist, und ermöglicht die Beschreibung beliebiger Pfade mit responsiven Einheiten und Custom Properties
- Mit
clip-path lassen sich beliebige Formen maskieren, mit offset-path Elemente entlang eines Pfads platzieren oder animieren; künftig ist auch die Kombination mit shape-outside vorgesehen
- Die Unterstützung besteht in Chrome und Safari, in Firefox läuft sie hinter einem Flag; in der Praxis empfiehlt sich ein sauber gestalteter Fallback
More Powerful attr()
attr() unterstützt nun Typangaben, sodass sich nicht-textuelle Werte wie Zahlen oder Farben direkt aus HTML-Attributen lesen und als CSS-Werte verwenden lassen- Die Bedeutung liegt in einer Erweiterung von Mustern, bei denen Theme-Farben, Zähler oder Größen direkt aus dem Markup eingespeist werden
- Die Unterstützung ist Chrome-first; empfohlen wird eine schrittweise Einführung zunächst bei visuellen Verbesserungen statt bei layoutkritischen Abhängigkeiten
Reading Flow
- Einführung der Eigenschaft
reading-flow, mit der sich auch in Layouts, bei denen visuelle und Quellreihenfolge auseinanderfallen, die Tab-Reihenfolge logisch korrigieren lässt
- Bei einer Umordnung per Grid kann etwa mit
reading-flow: grid-rows ein zum Layout passender Fokusfluss festgelegt werden
- So lassen sich Accessibility-Risiken mit einer einzigen CSS-Deklaration verringern, was die Freiheit bei Layouts erhöht
- Die Unterstützung ist Chrome-first; daher wird empfohlen, zu starke Neuordnungen bis zu breiterer Unterstützung zurückhaltend einzusetzen
Stuff to Keep an Eye On
- Das Masonry-Layout wird derzeit noch in der Spezifikation geordnet; der Vorschlag
item-flow könnte die Möglichkeiten für Layouts über Grid hinaus erweitern
- Die Funktion
random() wird bereits in Safari angeboten und ist nützlich für ausdrucksstarke variierende Designs
margin-trim ist nützlich, aber vor allem Safari-zentriert; sibling-index()/count() wird in Chrome bereitgestellt und eignet sich für staggered animations- Bei View Transitions gibt es mit
view-transition-name: match-element; sowie der laufenden Entwicklung in Firefox positive Signale für Cross-Browser-Unterstützung
- Die Vereinheitlichung von Multiplikation/Division in
calc() mit gemischten Einheiten steht kurz vor dem Abschluss experimenteller Hürden, wodurch frühere Type-Conversion-Hacks seltener nötig sein dürften
- Angesprochen wird auch das Fehlen von Versionsbezeichnungen wie „CSS4“ sowie eine Referenzliste mit neuen Funktionen der letzten fünf Jahre
Great Stuff to Remember
- Container Queries und entsprechende Einheiten bleiben als größter Produktivitätsschub seit Media Queries weiterhin grundlegendes Handwerkszeug
:has() ermöglicht Eltern- und zustandsbasierte Selektion und bietet damit breite Einsatzmöglichkeiten, um komplexe kombinierte Selektoren allein mit CSS zu lösen- View Transitions, Anchor Positioning und Scroll-Driven Animations haben nun auch Safari erreicht, wodurch die Hürden für den Praxiseinsatz gesunken sind
- Zusätzliche Viewport-Einheiten wie dvh sind inzwischen Teil des Baseline-Status, was die Stabilität mobiler Viewports verbessert
Code-/Anwendungsbeispiele im Überblick
- Größenübergänge: global
interpolate-size: allow-keywords oder beim Umschalten von Zuständen height: calc-size(auto, size) für Animationen auf Inhaltshöhe
- Grid-Verzweigung: mit dem Muster
if(media(...): Wert; ... else: Wert;) lassen sich Template-Spalten je Breakpoint in einer einzigen Deklaration bündeln
- Custom Select:
select, ::picker(select) { appearance: base-select } aktiviert einen benutzerdefinierten Picker
- Bounce-Easing:
animation-timing-function: linear( ... viele Punkte ... ) für fein abgestimmte Rückprall-/Dämpfungskurven
- Clip-Pfad:
clip-path: shape( ... ) für Maskierung von Formen auf Basis responsiver Proportionen
Leitfaden für den Praxiseinsatz
- Bei Funktionen mit großen Unterschieden in der Browser-Unterstützung sollte die Einführung nach Fallback-first-Design sowie nach Wirkung im Verhältnis zum Einführungsaufwand erfolgen
- Animationen, Typografie und visuelle Effekte sind gute PE-Kandidaten, während Fokus- und Tab-Reihenfolge als zentrale Accessibility-Themen erst bei breiter Unterstützung übernommen werden sollten
- Eigene Funktionen und Verzweigungen entfalten den größten ROI, wenn sie mit dokumentierten Design-Regeln sowie Tokens und Custom Properties zu teamweiten Mustern werden
- Verbesserungen bei der Form-UX (
field-sizing, Custom Select) bringen vor allem in Mobile-first-Szenarien deutlich spürbare Vorteile
Fazit
- Modernes CSS in der Ausgabe 2025 erweitert mit Wertfunktionen, logischen Verzweigungen und Formsteuerung deutlich den Bereich dessen, was sich direkt mit CSS umsetzen lässt, und bietet zusammen mit einer PE-Strategie hohen Wert für eine schrittweise Einführung
- Eine realistische Roadmap ist, zunächst die Grundlagen wie Container Queries,
:has() und Viewport-Einheiten zu festigen und danach animate-to-auto, if() und shape() als besonders effiziente Neuerungen priorisiert einzuführen
3 Kommentare
CSS ist inzwischen fast schon zu einer eigenen Sprache geworden. Weil damit mittlerweile ziemlich weitreichende logische Implementierungen möglich sind …
Da fragt man sich fast, ob das noch wirklich ein Stylesheet ist.
Es wird wohl eine Menge richtig nützlicher Funktionen geben – Dinge, die man bisher mit JavaScript umsetzen musste.
CSS ist wirklich deutlich besser geworden.