- Durch die Weiterentwicklung moderner Webtechnologien lassen sich viele Aufgaben, die früher mit JavaScript umgesetzt werden mussten, heute einfach mit HTML und CSS realisieren
- Neue Techniken wie komponentenzentriertes Styling, Styling von Elternelementen und relative Farbdefinitionen sind in mehreren Browsern breit verfügbar
- Sie bieten Designern und Entwicklern Möglichkeiten, UI-Komponenten einfacher und effektiver zu erstellen
CSS-Container-Queries und Style Queries
- Komponentenzentriertes Styling möglich
- CSS-Stile lassen sich anwenden, indem Breite und Stilinformationen des Containers abgefragt werden
- Nützlich für das Styling wiederverwendbarer Komponenten mit mehreren Varianten
- Siehe: Einführung in CSS Style Queries
Textausgleich (text-wrap: balance)
- Typografische Balance bewahren
- Berechnet automatisch eine gleichmäßige Verteilung von Text, etwa bei Überschriften und Kartentiteln
- Siehe: Leitfaden von Ahmad Shadeed
Automatische Größenanpassung von Formulareingabefeldern
- Eingabegröße automatisieren
- Die Größe von Texteingaben oder Auswahlmenüs passt sich automatisch dem Inhalt an
- Mit einer einzigen einfachen CSS-Zeile umsetzbar
- Siehe: Erklärung von Adam Argyle
Versteckte Inhalte durchsuchbar machen (hidden=until-found)
- Bessere UI-Zugänglichkeit
- Versteckte Inhalte wie eingeklappte Akkordeon-Bereiche können über die Seitensuche und von Suchmaschinen gefunden werden
- Siehe: Leitfaden von Joey Arhar
Unterstützung für hochauflösende Farben (OKLCH, OKLAB)
- 50 % mehr Farben unterstützt
- Neue Farbspezifikation, die auf der menschlichen Farbwahrnehmung basiert
- Geeignet für Designsysteme und Verläufe
- Siehe: Erklärung von Vitaly Friedman
CSS-relative Farben
- Farbberechnung auf Basis vorhandener Farben
View Transitions API
- Flüssige Bildschirmübergänge
- Beim Wechsel vom bisherigen zum neuen Bildschirm lassen sich nahtlose Übergänge mit CSS-Animationen umsetzen
- Unterstützt Übergänge innerhalb eines einzelnen Dokuments oder zwischen zwei Dokumenten
- Siehe: Leitfaden von Bramus Van Damme
CSS Scroll Snap
Styling von Elternelementen (:has)
- Elternelemente anhand des Zustands von Kindelementen stylen
- Stilregeln lassen sich über Parent-Child-Beziehungen hinaus abhängig vom Zustand anderer Elemente anpassen
- Siehe: Leitfaden von Josh W. Comeau
Weitere bemerkenswerte Features
- Verbessertes Styling von Eingabestatus: Mit
:user-valid und :user-invalid gibt es Feedback, nachdem Nutzer ihre Eingabe geändert haben
- Optimierung für mobile Tastaturen:
inputmode und enterkeyhint verbessern virtuelle Tastaturen
<dialog>-HTML-Element: Für zugängliche Modals und Popovers
Fazit
- Neue und praktische Frontend-Technologien haben einen wegweisenden Einfluss auf UI- und UX-Design
- Künftige Features: Masonry-Layout, Anpassung von
<selectmenu>, Ausrichtung von Textboxen und mehr
- Vielen Dank an alle Entwickler, die an der Weiterentwicklung der Webplattform arbeiten. Hoffentlich ist dieser Artikel hilfreich, um Projekte und Anwendungen zu verbessern. Viel Spaß bei der Arbeit!
4 Kommentare
Wie auch andere bereits angemerkt haben, berücksichtigt der Autor Browser-Kompatibilität oder ein konsistentes Verhalten zwischen Browsern überhaupt nicht. Abgesehen davon gibt es auch Fälle, in denen sich Implementierung oder Verhalten je nach Browser unterscheiden, sodass man neue Funktionen nicht einfach blind auswählen kann. Egal wie hoch der Marktanteil von Chrome auch sein mag, wegen iOS sollte man zumindest berücksichtigen, ob es in Safari ordentlich funktioniert.
Ich stimme zu … ich glaube, es ist schwierig, das einfach so direkt in Produkten einzusetzen.
In Safari und Firefox nicht implementiert
hidden=until-found)In Firefox nicht implementiert
Bei neuen Frontend-Features ist es praktisch am einfachsten, sie faktisch als exklusive neue Chrome-Features zu betrachten.
In extremen Fällen kann es wie bei OffscreenCanvas sogar fünf Jahre dauern. (Chrome 2018, Safari 2023)
Container Queries und
:hassind extrem praktisch.