- 2023 war ein riesiges Jahr für CSS. Viele neue Funktionen in CSS und im UI-Bereich haben Möglichkeiten geschaffen, die auf der Web-Plattform lange als unmöglich galten
- Alle wichtigen Browser unterstützen Container Queries, Subgrid, den Selektor
:has() und weitere Neuerungen; auch neue Farbräume und Funktionen werden unterstützt
- Chrome unterstützt mit reinem CSS scrollbasierte Animationen und flüssige Übergänge zwischen Web-Views
- Viele neue Grundbausteine zur Verbesserung der Developer Experience wurden eingeführt, etwa CSS-Nesting und Scoped Styles
Architectural foundations
Trigonometric functions
- Chrome 111 unterstützt trigonometrische Funktionen wie
sin(), cos(), tan(), asin(), acos(), atan() und atan2()
- Diese Funktionen sind sehr nützlich für Animationen und Layouts
Complex nth-* selection
- Mit dem Pseudoklassen-Selektor
:nth-child() lassen sich Elemente im DOM anhand ihres Index auswählen
- Seit Chrome 111 kann man optional eine Selektorliste an
:nth-child() und :nth-last-child() übergeben
Scope
- Chrome 118 unterstützt
@scope, um die Selektorzuordnung auf einen bestimmten Teilbaum des Dokuments zu begrenzen
- Der begrenzte Teilbaum wird durch eine Scope-Root und eine optionale Scope-Grenze definiert
Nesting
- Vor dem Einsatz von Nesting mussten alle Selektoren jeweils separat und explizit deklariert werden
- Jetzt lassen sich zusammengehörige Stilregeln gruppieren und Selektoren dabei weiterverwenden
Subgrid
- Mit CSS
subgrid lassen sich komplexere Grids erstellen und Kind-Layouts besser ausrichten
- Dadurch kann ein inneres Grid die Zeilen und Spalten eines äußeren Grids übernehmen
Typography
Initial-letter
- Die in Chrome 110 eingeführte Eigenschaft
initial-letter ist eine kleine, aber leistungsfähige CSS-Funktion zur Platzierung eines Initialbuchstabens
- Der Buchstabe kann als Initiale abgesenkt oder angehoben platziert werden
text-wrap: balance and pretty
- Entwickler kennen weder die endgültige Größe noch die Schriftgröße oder sogar die Sprache einer Überschrift oder eines Absatzes
- Zwei neue Techniken für den Textumbruch wurden eingeführt:
balance und pretty
Color
HD Color Spaces (Color Level 4)
- Neue Farben, mehr Farben, neue Farbräume, Farbfunktionen und neue Features wurden 2023 eingeführt
- CSS und Farbe können jetzt Verläufe mit HDR-Farben erzeugen und Verläufe in verschiedenen Farbräumen interpolieren
color-mix function
- Das Mischen von Farben ist eine klassische Aufgabe und wurde 2023 auch in CSS möglich
- Man kann nicht nur Weiß oder Schwarz, sondern auch Transparenz in Farben einmischen – und das im gewählten Farbraum
Relative color syntax
- Die Relative Color Syntax (RCS) ist eine ergänzende Methode zu
color-mix(), um Farbvarianten zu erzeugen
- RCS ermöglicht relative und absolute Manipulationen von Farben
Responsive Design
Size container queries
- Statt globale Größeninformationen des Viewports zu verwenden, unterstützen Container Queries das Abfragen eines Elternelements innerhalb der Seite
Style container queries
- Style Queries ermöglichen es, Werte benutzerdefinierter Eigenschaften des Elternelements abzufragen
:has() selector
- Fast 20 Jahre lang haben Entwickler in CSS nach einem „Parent Selector“ verlangt
- Mit dem Selektor
:has() kann man etwa ein .card-Element auswählen, das ein Hero-Image als Kindelement enthält, wie in .card:has(img.hero)
Update media query
- Mit der Media Query
update lässt sich die UI an die Refresh-Rate des Geräts anpassen
Scripting media query
- Die Scripting-Media-Query kann verwendet werden, um zu prüfen, ob JavaScript verfügbar ist
Reduced-transparency media query
- Nicht vollständig opake Oberflächen können bei verschiedenen Arten von Sehbeeinträchtigungen Kopfschmerzen auslösen oder visuell schwer nutzbar sein
- Diese Media Query zeigt an, dass der Nutzer eine Systemeinstellung hat, um Transparenz in der UI zu reduzieren oder zu entfernen
Interaction
View transitions
- View Transitions haben großen Einfluss auf die User Experience einer Seite
- Mit der View-Transitions-API lassen sich visuelle Übergänge zwischen zwei Seitenzuständen in einer Single-Page-Application erstellen
Linear-easing function
- Die Funktion
linear() ermöglicht es, komplexe Easing-Funktionen einfach zu erstellen – mit einem kleinen Verlust an Präzision
Scroll End
- Das Event
scrollend liefert ein präzises Scroll-Ende-Ereignis, das erkennt, ob der Nutzer noch mitten in einer Geste ist
Scroll-driven animations
- Scrollbasierte Animationen ermöglichen es, mit bestehendem CSS oder der Web Animations API erstellte Animationen an den Scroll-Offset eines Scrollers zu koppeln
Deferred timeline attachment
- Wenn scrollbasierte Animationen per CSS angewendet werden, ist der Mechanismus zur Suche des steuernden Scrollers immer auf Scroll-Vorfahren beschränkt, da er den DOM-Baum nach oben traversiert
Discrete property animations
- Diskrete Animationen – etwa die Möglichkeit, von
display: none aus zu animieren – wurden 2023 neu hinzugefügt
@starting-style
- Die CSS-Regel
@starting-style basiert auf der neuen Web-Funktion, Animationen von display: none aus zu ermöglichen
Overlay
- Die neue CSS-Eigenschaft
overlay sorgt dafür, dass Top-Layer-Elemente wie popover und dialog sanft aus dem obersten Layer heraus animiert werden
Components
Popover
- Die Popover API hilft beim Erstellen von Elementen, die über dem restlichen Seiteninhalt liegen
Horizontal rules in select
- Chrome und Safari unterstützen dieses Jahr die Möglichkeit, horizontale Trennlinien (
<hr>-Tags) innerhalb von ``-Elementen hinzuzufügen
:user-valid and invalid pseudo classes
:user-valid und :user-invalid funktionieren ähnlich wie die Pseudoklassen :valid und :invalid, treffen aber erst dann auf Form Controls zu, nachdem der Nutzer deutlich mit der Eingabe interagiert hat
Exclusive accordion
- Chrome 120 unterstützt das Attribut
name für ``-Elemente
- Mit diesem Attribut bilden mehrere ``-Elemente mit demselben
name-Wert eine semantische Gruppe
Noch keine Kommentare.