Neu in CSS und der Benutzeroberfläche: I/O 2023 Edition

Una Kravets

Bramus

Adam Argyle

Die letzten Monate waren eine goldene Ära für Web-UIs. Neue Plattformfunktionen sind mit einer engen browserübergreifenden Einführung verfügbar, die mehr Webfunktionen und Anpassungsfunktionen als je zuvor unterstützen.

Hier sind 20 der spannendsten und wirkungsvollsten Funktionen, die kürzlich eingeführt wurden oder bald eingeführt werden:

• Containerabfragen
• Stilabfragen
• :has()-Selektor
• nth-of-Mikrosyntax
• text-wrap: balance
• initial-letter
• Dynamische Viewport-Einheiten
• Farbräume mit breitem Farbumfang
• color-mix()
• Verschachtelung
• Kaskadenebenen
• Bereichsbezogene Stile
• Trigonometrische Funktionen
• Einzelne Transformationsattribute
• Popover
• Ankerpositionierung
• selectmenu
• Diskrete Property-Übergänge
• Scrollgesteuerte Animationen
• Übergänge ansehen

Die neue Responsivität

Wir beginnen mit einigen neuen Funktionen für responsives Design. Mit den neuen Plattformfunktionen können Sie logische Oberflächen mit Komponenten erstellen, die ihre responsiven Stilinformationen enthalten. Außerdem können Sie Oberflächen erstellen, die Systemfunktionen nutzen, um sich natürlicher anzufühlen. Und Sie können Nutzer in den Designprozess einbeziehen, indem Sie Nutzerpräferenzen abfragen, um eine vollständige Anpassung zu ermöglichen.

Containerabfragen

Container-Abfragen sind seit Kurzem in allen modernen Browsern stabil. Damit können Sie die Größe und den Stil eines übergeordneten Elements abfragen, um die Stile zu bestimmen, die auf seine untergeordneten Elemente angewendet werden sollen. Media-Queries können nur auf Informationen aus dem Viewport zugreifen und diese nutzen. Das bedeutet, dass sie nur eine Makroansicht eines Seitenlayouts verwenden können. Containerabfragen sind dagegen ein präziseres Tool, das eine beliebige Anzahl von Layouts oder Layouts in Layouts unterstützen kann.

Im folgenden Beispiel für den Posteingang sind sowohl die Seitenleiste Primärer Posteingang als auch die Seitenleiste Favoriten Container. Das Rasterlayout der E‑Mails wird angepasst und der Zeitstempel der E‑Mail wird je nach verfügbarem Platz ein- oder ausgeblendet. Es handelt sich um dieselbe Komponente auf der Seite, die nur in verschiedenen Ansichten angezeigt wird.

Da wir eine Containerabfrage haben, sind die Stile dieser Komponenten dynamisch. Wenn Sie die Seitengröße und das Layout anpassen, reagieren die Komponenten auf den ihnen zugewiesenen Platz. Die Seitenleiste wird zu einer oberen Leiste mit mehr Platz und das Layout ähnelt dem des primären Posteingangs. Wenn weniger Platz vorhanden ist, werden beide in einem komprimierten Format angezeigt.

Weitere Informationen zu Containerabfragen und zum Erstellen logischer Komponenten

Stilabfragen

Mit der Containerabfragespezifikation können Sie auch die Stilwerte eines übergeordneten Containers abfragen. Dies ist derzeit teilweise in Chrome 111 implementiert. Dort können Sie benutzerdefinierte CSS-Eigenschaften verwenden, um Containerstile anzuwenden.

Im folgenden Beispiel werden Wettermerkmale, die in benutzerdefinierten Attributwerten gespeichert sind, z. B. „Regen“, „Sonnenschein“ und „Bewölkung“, verwendet, um den Hintergrund der Karte und das Indikatorsymbol zu gestalten.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

Das ist erst der Anfang für Stilanfragen. Künftig wird es boolesche Abfragen geben, um festzustellen, ob ein benutzerdefinierter Attributwert vorhanden ist, und um Codewiederholungen zu reduzieren. Derzeit werden Bereichsabfragen diskutiert, um Stile basierend auf einem Wertebereich anzuwenden. So wäre es möglich, die hier gezeigten Stile mit einem Prozentwert für die Regenwahrscheinlichkeit oder die Wolkendecke anzuwenden.

Weitere Informationen und Demos finden Sie in unserem Blogpost zu Stilabfragen.

:has()

Der :has()-Selektor ist eine der leistungsstärksten neuen CSS-Funktionen, die in modernen Browsern verfügbar sind. Mit :has() können Sie Stile anwenden, indem Sie prüfen, ob ein übergeordnetes Element bestimmte untergeordnete Elemente enthält oder ob diese untergeordneten Elemente sich in einem bestimmten Zustand befinden. Wir haben jetzt also im Grunde einen übergeordneten Selektor.

Aufbauend auf dem Beispiel für Containerabfragen können Sie mit :has() die Komponenten noch dynamischer gestalten. Darin erhält ein Element mit einem „Stern“-Element einen grauen Hintergrund und ein Element mit einem angekreuzten Kästchen einen blauen Hintergrund.

Diese API ist jedoch nicht auf die Auswahl von übergeordneten Elementen beschränkt. Sie können auch untergeordnete Elemente innerhalb des übergeordneten Elements formatieren. Der Titel wird beispielsweise fett dargestellt, wenn das Element „star“ vorhanden ist. Dazu wird .item:has(.star) .title verwendet. Mit dem Selektor :has() haben Sie Zugriff auf übergeordnete Elemente, untergeordnete Elemente und sogar gleichgeordnete Elemente. Das macht die API sehr flexibel und es kommen täglich neue Anwendungsfälle hinzu.

Weitere Informationen und Demos zu :has() finden Sie in diesem Blogpost.

Syntax für „nth-of“

Die Webplattform bietet jetzt eine erweiterte Auswahl von nth-child. Die erweiterte nth-child-Syntax bietet ein neues Keyword („of“), mit dem Sie die vorhandene Mikrosyntax von An+B mit einer spezifischeren Teilmenge verwenden können, in der gesucht werden soll.

Wenn Sie „nth-child“ wie :nth-child(2) für die spezielle Klasse verwenden, wählt der Browser das Element aus, auf das die Klasse „special“ angewendet wird und das auch das zweite untergeordnete Element ist. Im Gegensatz dazu werden bei :nth-child(2 of .special) zuerst alle .special-Elemente vorab gefiltert und dann das zweite Element aus dieser Liste ausgewählt.

Weitere Informationen zu dieser Funktion finden Sie in diesem Artikel.

text-wrap: balance

Selektoren und Stilabfragen sind nicht die einzigen Stellen, an denen wir Logik in unsere Stile einbetten können. Auch die Typografie bietet diese Möglichkeit. Ab Chrome 114 können Sie für Überschriften die Funktion zum Ausgleichen von Textumbrüchen verwenden. Dazu müssen Sie das Attribut text-wrap mit dem Wert balance festlegen.

Um den Text auszugleichen, führt der Browser effektiv eine binäre Suche nach der kleinsten Breite durch, die keine zusätzlichen Zeilen verursacht, und stoppt bei einem CSS-Pixel (nicht Displaypixel). Um die Anzahl der Schritte bei der binären Suche weiter zu minimieren, beginnt der Browser mit 80% der durchschnittlichen Linienbreite.

Weitere Informationen

initial-letter

Eine weitere schöne Verbesserung der Webtypografie ist initial-letter. Mit dieser CSS-Eigenschaft haben Sie mehr Kontrolle über das Styling von eingerückten Initialen.

Mit initial-letter im Pseudoelement :first-letter geben Sie Folgendes an: Die Größe des Buchstabens basierend darauf, wie viele Zeilen er einnimmt. Der Block-Offset des Buchstabens oder die „Senke“, in der der Buchstabe platziert wird.

Weitere Informationen zur Verwendung von intial-letter

Dynamische Viewport-Einheiten

Ein häufiges Problem, mit dem Webentwickler heute konfrontiert sind, ist die genaue und konsistente Größenanpassung des gesamten Viewports, insbesondere auf Mobilgeräten. Als Entwickler möchten Sie, dass 100vh (100% der Höhe des Darstellungsbereichs) „so hoch wie der Darstellungsbereich“ bedeutet. Die Einheit vh berücksichtigt jedoch nicht, dass Navigationsleisten auf Mobilgeräten ein- und ausgeblendet werden können. Daher ist sie manchmal zu lang und verursacht Scrollen.

Um dieses Problem zu beheben, haben wir neue Einheitswerte auf der Webplattform eingeführt, darunter: - Kleine Höhe und Breite des Darstellungsbereichs (oder svh und svw), die die kleinste aktive Größe des Darstellungsbereichs darstellen. – Große Höhe und Breite des Darstellungsbereichs (lvh und lvw), die die größte Größe darstellen. – Dynamische Höhe und Breite des Darstellungsbereichs (dvh und dvw).

Dynamische Viewport-Einheiten ändern ihren Wert, wenn die zusätzlichen dynamischen Browser-Symbolleisten, z. B. die Adressleiste oben oder die Tab-Leiste unten, sichtbar sind und wenn nicht.

Weitere Informationen zu diesen neuen Einheiten finden Sie unter The large, small, and dynamic viewport units.

Farbräume mit breiter Farbskala

Eine weitere wichtige Neuerung auf der Webplattform sind Farbräume mit großem Farbumfang. Bevor die Unterstützung für Wide-Gamut-Farben auf der Webplattform eingeführt wurde, konnten Sie zwar Fotos mit lebendigen Farben aufnehmen, die auf modernen Geräten angezeigt werden konnten, aber Sie konnten keine Schaltfläche, Textfarbe oder keinen Hintergrund mit diesen lebendigen Werten erstellen.

Jetzt haben wir jedoch eine Reihe neuer Farbräume auf der Webplattform, darunter REC2020, P3, XYZ, LAB, OKLAB, LCH und OKLCH. Weitere Informationen zu den neuen Web-Farbräumen und mehr finden Sie im HD Color Guide.

In den Entwicklertools sehen Sie sofort, wie sich der Farbbereich erweitert hat. Die weiße Linie zeigt an, wo der sRGB-Bereich endet und der Farbbereich mit breiterem Gamut beginnt.

Es gibt viel mehr Tools für Farben. Auch die vielen Verbesserungen bei Verläufen sollten Sie sich nicht entgehen lassen. Adam Argyle hat sogar ein brandneues Tool entwickelt, mit dem Sie einen neuen Web-Farbpicker und einen Gradienten-Generator ausprobieren können. Sie finden es unter gradient.style.

color-mix()

Die Funktion color-mix() ist eine Erweiterung der erweiterten Farbräume. Mit dieser Funktion können zwei Farbwerte gemischt werden, um neue Werte zu erstellen, die auf den Kanälen der gemischten Farben basieren. Der Farbraum, in dem Sie mischen, wirkt sich auf die Ergebnisse aus. Wenn Sie in einem wahrnehmungsbezogenen Farbraum wie Oklch arbeiten, wird ein anderer Farbbereich durchlaufen als bei sRGB.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

Die Funktion color-mix() bietet eine lange gewünschte Möglichkeit: Sie können undurchsichtige Farbwerte beibehalten und ihnen gleichzeitig etwas Transparenz hinzufügen. Sie können jetzt Ihre Markenfarbvariablen verwenden, um Varianten dieser Farben mit unterschiedlichen Deckkraftwerten zu erstellen. Dazu mischen Sie eine Farbe mit transparent. Wenn Sie die blaue Markenfarbe mit 10% Transparenz mischen, erhalten Sie eine Markenfarbe mit 90% Deckkraft. So können Sie schnell Farbsysteme erstellen.

In den Chrome-Entwicklertools ist das bereits möglich. Im Bereich „Styles“ wird ein Venn-Diagramm-Symbol für die Vorschau angezeigt.

Weitere Beispiele und Informationen finden Sie in unserem Blogpost zum Farbmix. Sie können auch dieses Playground für color-mix() ausprobieren.

CSS-Grundlagen

Neue Funktionen zu entwickeln, die Nutzern klare Vorteile bieten, ist nur ein Teil der Gleichung. Viele der Funktionen, die in Chrome eingeführt werden, zielen darauf ab, die Entwicklerfreundlichkeit zu verbessern und eine zuverlässigere und besser organisierte CSS-Architektur zu schaffen. Dazu gehören CSS-Nesting, Kaskadenebenen, bereichsbezogene Stile, trigonometrische Funktionen und einzelne Transform-Properties.

Verschachtelung

CSS-Nesting, das viele von Sass kennen und das seit Jahren zu den häufigsten Anfragen von CSS-Entwicklern gehört, ist endlich auf der Webplattform verfügbar. Durch das Verschachteln können Entwickler in einem prägnanteren, gruppierten Format schreiben, wodurch Redundanz reduziert wird.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

Sie können auch Media Queries verschachteln, was bedeutet, dass Sie auch Container Queries verschachteln können. Im folgenden Beispiel wird eine Karte vom Hochformat ins Querformat geändert, wenn der Container breit genug ist:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

Die Layoutanpassung an flex erfolgt, wenn für den Container mindestens 480px Inline-Platz verfügbar ist. Der Browser wendet das neue Design einfach an, wenn die Bedingungen erfüllt sind.

Weitere Informationen und Beispiele finden Sie in unserem Beitrag zum Verschachteln von CSS.

Kaskadenebenen

Ein weiterer Schwachpunkt für Entwickler ist die Konsistenz, welche Stile Vorrang vor anderen haben. Ein Teil der Lösung besteht darin, die CSS-Kaskade besser zu steuern.

Kaskadenebenen bieten hier eine Lösung, da Nutzer festlegen können, welche Ebenen eine höhere Priorität als andere haben. So lässt sich genauer steuern, wann Ihre Stile angewendet werden.

Weitere Informationen zur Verwendung von Kaskadenebenen

Bereichsbezogenes CSS

Mit CSS-Styles mit Bereich können Entwickler die Grenzen für bestimmte Styles festlegen und so im Grunde einen nativen Namespace in CSS erstellen. Bisher mussten Entwickler auf Drittanbieter-Scripting zurückgreifen, um Klassen umzubenennen, oder bestimmte Namenskonventionen verwenden, um Stilkonflikte zu vermeiden. Bald können Sie jedoch @scope verwenden.

Hier wird ein .title-Element auf ein .card beschränkt. So wird verhindert, dass das Titelseiten-Element mit anderen .title-Elementen auf der Seite in Konflikt gerät, z. B. mit dem Titel eines Blogbeitrags oder einer anderen Überschrift.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

@scope mit Bereichsbegrenzungen und @layer können Sie sich in dieser Live-Demo ansehen:

Weitere Informationen zu @scope in der Spezifikation „css-cascade-6“

Trigonometrische Funktionen

Eine weitere Neuerung sind die trigonometrischen Funktionen, die den vorhandenen mathematischen Funktionen für Preisvergleichsportale hinzugefügt werden. Diese Funktionen sind jetzt in allen modernen Browsern stabil und ermöglichen es Ihnen, organischere Layouts auf der Webplattform zu erstellen. Ein gutes Beispiel ist dieses radiale Menülayout, das jetzt mit den Funktionen sin() und cos() entworfen und animiert werden kann.

In der Demo unten drehen sich die Punkte um einen Mittelpunkt. Anstatt jeden Punkt um seinen eigenen Mittelpunkt zu drehen und ihn dann nach außen zu bewegen, wird jeder Punkt auf der X- und Y-Achse verschoben. Die Entfernungen auf der X- und Y-Achse werden unter Berücksichtigung der cos() bzw. sin() von --angle bestimmt.

Weitere Informationen zu diesem Thema finden Sie in diesem Artikel.

Einzelne Transformationseigenschaften

Die Entwicklerfreundlichkeit wird durch einzelne Transformationsfunktionen weiter verbessert. Seit der letzten I/O sind einzelne Transformationen in allen modernen Browsern stabil.

Bisher haben Sie die Transform-Funktion verwendet, um Unterfunktionen zum Skalieren, Drehen und Verschieben eines UI-Elements anzuwenden. Das war sehr repetitiv und besonders frustrierend, wenn mehrere Transformationen zu unterschiedlichen Zeiten in der Animation angewendet wurden.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

Sie können jetzt alle diese Details in Ihre CSS-Animationen einfügen, indem Sie die Arten von Transformationen trennen und einzeln anwenden.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

So können Änderungen bei der Translation, Drehung oder Skalierung gleichzeitig mit unterschiedlichen Änderungsraten zu verschiedenen Zeiten während der Animation erfolgen.

Weitere Informationen finden Sie in diesem Beitrag zu einzelnen Transformationsfunktionen.

Anpassbare Komponenten

Um sicherzustellen, dass wir einige der wichtigsten Anforderungen von Entwicklern über die Webplattform erfüllen, arbeiten wir mit der OpenUI-Communitygruppe zusammen und haben drei Lösungen ermittelt, mit denen wir beginnen möchten:

1. Integrierte Pop-up-Funktion mit Ereignishandlern, deklarativer DOM-Struktur und zugänglichen Standardeinstellungen.
2. Eine CSS-API, mit der zwei Elemente miteinander verbunden werden können, um die Ankerpositionierung zu ermöglichen.
3. Eine anpassbare Drop-down-Menükomponente, wenn Sie Inhalte in einem Select-Element gestalten möchten.

Pop-over

Die Popover API bietet einige integrierte Browserunterstützungsfunktionen für Elemente, z. B.:

• Unterstützung für die oberste Ebene, sodass Sie z-index nicht verwalten müssen. Wenn Sie ein Pop-over oder ein Dialogfeld öffnen, wird dieses Element auf einer speziellen Ebene über der Seite angezeigt.
• Das Verhalten beim Schließen von auto-Pop-overs durch Klicken auf eine beliebige Stelle auf der Seite ist kostenlos. Wenn Sie also außerhalb eines Elements klicken, wird das Pop-over geschlossen, aus dem Barrierefreiheitsbaum entfernt und der Fokus wird richtig verwaltet.
• Standardmäßige Barrierefreiheit für die Verbindung zwischen dem Ziel des Pop-overs und dem Pop-over selbst.

Das bedeutet, dass weniger JavaScript geschrieben werden muss, um all diese Funktionen zu erstellen und alle diese Status zu erfassen.

Die DOM-Struktur für Pop-over ist deklarativ und kann so einfach wie das Zuweisen eines id- und eines popover-Attributs zum Pop-over-Element geschrieben werden. Anschließend synchronisieren Sie diese ID mit dem Element, das das Pop-over öffnen soll, z. B. einer Schaltfläche mit dem Attribut popovertarget:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover ist eine Abkürzung für popover=auto. Ein Element mit popover=auto schließt beim Öffnen andere Pop-overs und erhält den Fokus. Außerdem kann es durch Tippen auf eine Stelle außerhalb des Pop-overs geschlossen werden. Umgekehrt erzwingen popover=manual-Elemente kein Schließen anderer Elementtypen, erhalten nicht sofort den Fokus und werden nicht durch Tippen auf eine leere Stelle geschlossen. Sie werden über einen Ein/Aus-Schalter oder eine andere Schließaktion geschlossen.

Die aktuellste Dokumentation zu Popovers finden Sie derzeit auf MDN.

Ankerpositionierung

Popovers werden auch häufig in Elementen wie Dialogfeldern und Tooltips verwendet, die in der Regel an bestimmte Elemente verankert werden müssen. Sehen wir uns ein Beispiel an. Wenn Sie auf einen Kalendertermin klicken, wird in der Nähe des Termins ein Dialogfeld angezeigt. Das Kalenderelement ist der Anker und das Pop-over ist das Dialogfeld, in dem die Termindetails angezeigt werden.

Mit der Funktion anchor() können Sie einen zentrierten Tooltip erstellen. Verwenden Sie dazu die Breite des Ankers, um den Tooltip bei 50% der X-Position des Ankers zu positionieren. Verwenden Sie dann vorhandene Positionierungswerte, um die restlichen Placement-Stile anzuwenden.

Was passiert aber, wenn das Pop-over aufgrund der Positionierung nicht in den Darstellungsbereich passt?

Um dieses Problem zu beheben, enthält die API zur Ankerpositionierung Fallback-Positionen, die Sie anpassen können. Im folgenden Beispiel wird eine Fallback-Position mit dem Namen „top-then-bottom“ erstellt. Der Browser versucht zuerst, das Kurzinfo oben zu positionieren. Wenn es nicht in den Darstellungsbereich passt, wird es unter dem Anker-Element unten positioniert.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

Weitere Informationen zur Ankerpositionierung

<selectmenu>

Mit der Popover- und der Ankerpositionierung können Sie vollständig anpassbare Auswahlmenüs erstellen. Die OpenUI-Communitygruppe hat die grundlegende Struktur dieser Menüs untersucht und nach Möglichkeiten gesucht, alle Inhalte darin anzupassen. Hier einige Beispiele:

Um das Beispiel ganz links selectmenu mit farbigen Punkten zu erstellen, die der Farbe entsprechen, die in einem Kalendertermin angezeigt würde, können Sie Folgendes schreiben:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

Diskrete Attributübergänge

Damit Pop-overs reibungslos ein- und ausgeblendet werden können, muss es im Web eine Möglichkeit geben, diskrete Eigenschaften zu animieren. Das sind Eigenschaften, die in der Vergangenheit in der Regel nicht animiert werden konnten, z. B. Animationen zum und vom Top-Layer und Animationen zum und vom display: none.

Um schöne Übergänge für Popovers, Auswahlmenüs und sogar vorhandene Elemente wie Dialogfelder oder benutzerdefinierte Komponenten zu ermöglichen, aktivieren Browser neue Funktionen zur Unterstützung dieser Animationen.

Im folgenden Pop-over-Beispiel werden Pop-overs mit :popover-open für den offenen Zustand und @starting-style für den Zustand vor dem Öffnen animiert. Für den Zustand nach dem Öffnen und Schließen wird direkt ein Transformationswert auf das Element angewendet. Damit das alles mit der Anzeige funktioniert, muss es der transition-Eigenschaft hinzugefügt werden:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

Interaktionen

Damit kommen wir zu Interaktionen, der letzten Station auf dieser Tour durch die Web-UI-Funktionen.

Wir haben bereits über das Animieren diskreter Eigenschaften gesprochen, aber es gibt auch einige wirklich interessante APIs, die in Chrome für scrollgesteuerte Animationen und Ansichtsübergänge eingeführt werden.

Scrollgesteuerte Animationen

Mit scrollgesteuerten Animationen können Sie die Wiedergabe einer Animation basierend auf der Scrollposition eines Scroll-Containers steuern. Das bedeutet, dass die Animation beim Auf- oder Abscrollen vorwärts oder rückwärts abgespielt wird. Außerdem können Sie mit scrollgesteuerten Animationen eine Animation auch basierend auf der Position eines Elements in seinem Scroll-Container steuern. So können Sie interessante Effekte wie ein Parallaxe-Hintergrundbild, Fortschrittsbalken und Bilder erstellen, die sich erst zeigen, wenn sie in den Blick kommen.

Diese API unterstützt eine Reihe von JavaScript-Klassen und CSS-Eigenschaften, mit denen Sie ganz einfach deklarative scrollgesteuerte Animationen erstellen können.

Mit den neuen Eigenschaften scroll-timeline, view-timeline und animation-timeline können Sie eine CSS-Animation durch Scrollen auslösen. Um eine JavaScript Web Animations API zu steuern, übergeben Sie eine ScrollTimeline- oder ViewTimeline-Instanz als timeline-Option an Element.animate().

Diese neuen APIs funktionieren in Verbindung mit den vorhandenen APIs für Web- und CSS-Animationen. Das bedeutet, dass sie von den Vorteilen dieser APIs profitieren. Dazu gehört auch die Möglichkeit, diese Animationen außerhalb des Hauptthreads auszuführen. Ja, Sie haben richtig gelesen: Mit nur wenigen zusätzlichen Codezeilen können Sie jetzt flüssige, scrollgesteuerte Animationen außerhalb des Hauptthreads ausführen. Was gibt es da nicht zu mögen?

Eine ausführliche Anleitung zum Erstellen dieser scrollbasierten Animationen finden Sie in diesem Artikel.

Übergänge ansehen

Mit der View Transition API lässt sich das DOM in einem einzigen Schritt ändern und gleichzeitig ein animierter Übergang zwischen den beiden Status erstellen. Das können einfache Überblendungen zwischen Ansichten sein. Sie können aber auch festlegen, wie einzelne Teile der Seite überblendet werden sollen.

View Transitions können als Progressive Enhancement verwendet werden: Nehmen Sie Ihren Code, der das DOM mit einer beliebigen Methode aktualisiert, und umschließen Sie ihn mit der View Transition API mit einem Fallback für Browser, die das Feature nicht unterstützen.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Wie der Übergang aussehen soll, wird über CSS gesteuert.

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Wie in diesem tollen Demovideo von Maxi Ferreira gezeigt, funktionieren andere Seiteninteraktionen wie die Wiedergabe eines Videos weiterhin, während ein Ansichtsübergang stattfindet.

View Transitions funktionieren derzeit mit Single-Page-Anwendungen (SPAs) ab Chrome 111. Wir arbeiten an der Unterstützung von Apps mit mehreren Seiten. Weitere Informationen finden Sie in unserem vollständigen Leitfaden für Ansichtsübergänge.

Fazit

Auf developer.chrome.com finden Sie alle aktuellen Neuerungen bei CSS und HTML. Weitere Neuerungen im Web finden Sie in den I/O-Videos.