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 vor Kurzem 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 großem Farbumfang
• color-mix()
• Verschachtelung
• Kaskadenebenen
• Bereichsbezogene Stile
• Trigonometrische Funktionen
• Einzelne Transformationseigenschaften
• Popover
• Ankerpositionierung
• selectmenu
• Diskrete Property-Übergänge
• Scrollgesteuerte Animationen
• Übergänge ansehen

Die neue Responsivität

Sehen wir uns einige neue Funktionen für responsives Design an. 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

Containerabfragen 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 Hauptposteingang als auch die Seitenleiste Favoriten Container. Das E‑Mail-Rasterlayout wird automatisch angepasst und der E‑Mail-Zeitstempel 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 jeweils 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 Eigenschaften 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 Eigenschaftswert vorhanden ist. So lässt sich Code wiederholen. Derzeit werden Bereichsabfragen diskutiert, mit denen sich Stile basierend auf einem Wertebereich anwenden lassen. So können die hier gezeigten Stile mit einem Prozentwert für die Regenwahrscheinlichkeit oder die Wolkendecke angewendet werden.

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 sich diese untergeordneten Elemente in einem bestimmten Zustand befinden. Das bedeutet, dass wir jetzt im Grunde eine Auswahl für das übergeordnete Element haben.

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

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 das Sternsymbol enthält. Dies wird mit .item:has(.star) .title erreicht. Mit dem Selektor :has() haben Sie Zugriff auf übergeordnete Elemente, untergeordnete Elemente und sogar gleichgeordnete Elemente. Das macht diese API sehr flexibel und es kommen täglich neue Anwendungsfälle hinzu.

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

nth-of-Syntax

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

Wenn Sie die reguläre nth-child-Funktion, z. B. :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 gleichzeitig 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 unserem Artikel zur nth-of-Syntax.

text-wrap: balance

Selektoren und Stilabfragen sind nicht die einzigen Stellen, an denen wir Logik in unsere Stile einbetten können. Das ist auch bei der Typografie möglich. Ab Chrome 114 können Sie für Überschriften die Funktion zum Ausgleichen von Textumbrüchen verwenden. Dazu müssen Sie die text-wrap-Eigenschaft 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. Die Suche wird bei einem CSS-Pixel (nicht Displaypixel) beendet. 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 für das 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 Darstellungsbereichseinheiten

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 keine Elemente wie einziehbare Navigationsleisten auf Mobilgeräten. 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 großem Farbumfang

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ächen, Textfarben oder Hintergründe 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 Gradient Builder 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. Jetzt können Sie Ihre Markenfarbenvariablen 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 angezeigt.

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

Grundlagen für Preisvergleichsportale

Die Entwicklung neuer Funktionen, 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-Eigenschaften.

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 auch bedeutet, dass Sie 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 diesen neuen Anzeigestil 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 Titel-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;
  }
}

In dieser Live-Demo sehen Sie @scope mit Bereichsbegrenzungen zusammen mit @layer:

Weitere Informationen zu @scope

Trigonometrische Funktionen

Eine weitere Neuerung sind die trigonometrischen Funktionen, die den vorhandenen mathematischen CSS-Funktionen 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 Distanzen auf der X- und Y-Achse werden durch Berücksichtigung der cos() bzw. der sin() des --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 Transformationsfunktion 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 sich Übersetzung, Drehung oder Skalierung gleichzeitig mit unterschiedlichen Änderungsraten zu unterschiedlichen Zeiten während der Animation ändern.

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 können:

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, mit der Sie Inhalte in einem Select-Element gestalten können.

Pop-over

Die Popover API bietet für Elemente einige integrierte Browserunterstützungsfunktionen, 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 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 geschrieben werden, dass dem Pop-over-Element ein id- und das popover-Attribut zugewiesen wird. Anschließend synchronisieren Sie diese ID mit dem Element, das das Pop-over öffnet, 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 Kurzschreibweise für popover=auto. Ein Element mit popover=auto schließt beim Öffnen andere Pop-overs und kann durch Klicken außerhalb des Pop-overs geschlossen werden. Außerdem erhält es beim Öffnen den Fokus. 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 Pop-overs 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 dieses Beispiel für ein Ereignis 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 ein zentriertes Kurzinfo erstellen. Verwenden Sie dazu die Breite des Ankers, um das Kurzinfo bei 50% der X-Position des Ankers zu positionieren. Verwenden Sie dann die vorhandenen 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 namens „top-then-bottom“ erstellt. Der Browser versucht zuerst, das Tooltip oben zu positionieren. Wenn es nicht in den Viewport 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 sind einige Beispiele:

Um das Beispiel selectmenu ganz links mit farbigen Punkten zu erstellen, die der Farbe entsprechen, die in einem Kalendertermin angezeigt würde, können Sie es so 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 Property-Ü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 zur und von der obersten Ebene sowie Animationen zur und von 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 so dem Attribut transition 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 sind wir bei den Interaktionen angekommen, der letzten Station auf dieser Tour durch die Funktionen der Web-Benutzeroberfläche.

Wir haben bereits über die Animation diskreter Attribute gesprochen. Es gibt aber auch einige sehr 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 Scrollcontainers steuern. Das bedeutet, dass die Animation beim Scrollen nach oben oder unten vor- oder zurückgespult wird. Außerdem können Sie mit scrollgesteuerten Animationen eine Animation basierend auf der Position eines Elements in seinem Scroll-Container steuern. So lassen sich interessante Effekte wie ein Parallax-Hintergrundbild, Fortschrittsbalken beim Scrollen 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.

Wenn Sie eine CSS-Animation durch Scrollen auslösen möchten, verwenden Sie die neuen Eigenschaften scroll-timeline, view-timeline und animation-timeline. Um eine JavaScript Web Animations API zu verwenden, übergeben Sie eine ScrollTimeline- oder ViewTimeline-Instanz als timeline-Option an Element.animate().

Diese neuen APIs funktionieren in Verbindung mit den vorhandenen Web Animations- und CSS Animations-APIs und profitieren daher von den Vorteilen dieser APIs. 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 eine animierte Übergang zwischen den beiden Status erstellen. Das können einfache Überblendungen zwischen Ansichten sein, Sie können aber auch steuern, wie einzelne Teile der Seite übergehen 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 die Funktion 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 dieser Demo von Maxi Ferreira gezeigt, funktionieren andere Seiteninteraktionen wie die Wiedergabe eines Videos weiterhin, während eine Ansichtsübergang stattfindet.

View Transitions funktionieren derzeit mit Single-Page-Apps (SPAs) ab Chrome 111. Die Unterstützung von Apps mit mehreren Seiten ist in Arbeit. Weitere Informationen finden Sie in unserem vollständigen Leitfaden zu Ansichtsübergängen.

Fazit

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