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 die Web-UI. 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

Das neue Responsive

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 eigenen Informationen zum responsiven Styling enthalten. Außerdem können Sie Oberflächen erstellen, die Systemfunktionen nutzen, um sich natürlicher anfühlende Benutzeroberflächen zu liefern. Und Sie können den Nutzer in den Designprozess einbeziehen, indem Sie Nutzerpräferenzanfragen für vollständige Anpassbarkeit verwenden.

Containerabfragen

Containerabfragen sind seit Kurzem in allen modernen Browsern stabil. Mit ihnen 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-Abfragen können nur auf Informationen aus dem Darstellungsbereich zugreifen und diese nutzen. Das bedeutet, dass sie nur für eine Makroansicht eines Seitenlayouts verwendet werden können. Containerabfragen hingegen sind ein präziseres Tool, das eine beliebige Anzahl von Layouts oder Layouts innerhalb von Layouts unterstützen kann.

Im folgenden Beispiel für einen Posteingang sind sowohl die Seitenleiste Primärer Posteingang als auch die Seitenleiste Favoriten Container. Das Rasterlayout der E-Mails darin wird je nach verfügbarem Platz angepasst und der Zeitstempel der E-Mail wird 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 Spezifikation für Containerabfragen 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, wie „Regen“, „Sonne“ 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 die Codeduplikation reduzieren. Derzeit werden Bereichsabfragen diskutiert, mit denen sich Stile basierend auf einem Wertebereich anwenden lassen. 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 einen bestimmten Status haben. 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 erhält ein Element mit einem „Stern“-Element einen grauen Hintergrund und ein Element mit einem angekreuzten Kontrollkä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 wurde und das auch das zweite untergeordnete Element ist. Das ist anders als bei :nth-child(2 of .special), wo zuerst alle .special-Elemente vorab gefiltert und dann das zweite Element aus dieser Liste ausgewählt wird.

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. 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. Die Suche wird bei einem CSS-Pixel (nicht bei einem Displaypixel) beendet. Um die Anzahl der Schritte bei der binären Suche zu minimieren, beginnt der Browser mit 80% der durchschnittlichen Zeilenbreite.

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 führt zu Scrollen.

Um dieses Problem zu beheben, haben wir neue Einheitswerte auf der Webplattform eingeführt, darunter: - Kleine Darstellungsbereichshöhe und -breite (oder svh und svw), die die kleinste aktive Darstellungsbereichsgröße 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).

Der Wert dynamischer Viewport-Einheiten ändert sich, 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ä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 viele weitere Tools für Farben. Außerdem gibt es tolle Verbesserungen bei Farbverläufen. Adam Argyle hat sogar ein brandneues Tool entwickelt, mit dem Sie einen neuen Farbwähler und einen neuen Farbverlauf-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 können Sie sich das bereits ansehen. Im Bereich „Styles“ gibt es ein Venn-Diagramm-Symbol für die Vorschau.

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

Grundlagen von CSS

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-Properties.

Verschachtelung

CSS-Verschachtelung, die viele von Sass kennen und die seit Jahren zu den Top-Anfragen von CSS-Entwicklern gehört, ist endlich auf der Webplattform verfügbar. Mit der Verschachtelung können Entwickler in einem prägnanteren, gruppierten Format schreiben, das Redundanz reduziert.

.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

CSS mit Bereich

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 in der Spezifikation „css-cascade-6“

Trigonometrische Funktionen

Eine weitere neue CSS-Funktion 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() gestaltet 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 trigonometrischen Funktionen

Einzelne Transformationseigenschaften

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

Bisher mussten Sie die Transform-Funktion verwenden, um Unterfunktionen zum Skalieren, Drehen und Verschieben eines UI-Elements anzuwenden. Das war sehr umständlich, insbesondere wenn Sie mehrere Transformationen zu unterschiedlichen Zeiten in der Animation anwenden mussten.

.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 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

Wir arbeiten mit der OpenUI-Community-Gruppe zusammen, um sicherzustellen, dass wir einige der wichtigsten Anforderungen von Entwicklern über die Webplattform erfüllen. Wir 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, 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 durch Klicken auf eine Stelle außerhalb des Elements ist jetzt kostenlos verfügbar. 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 das Bindegewebe des Popover-Ziels und des Popovers 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 des 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 Kurzform für popover=auto. Wenn ein Element mit popover=auto geöffnet wird, werden andere Pop-over-Elemente geschlossen. Außerdem erhält es den Fokus und kann durch Tippen auf eine Stelle außerhalb des Elements geschlossen werden. popover=manual-Elemente schließen dagegen keine anderen Elementtypen, erhalten nicht sofort den Fokus und können nicht durch Tippen auf eine Stelle außerhalb des Elements geschlossen werden. Sie werden über einen 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 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-Fenster erstellen. Verwenden Sie dazu die Breite des Ankers, um das Kurzinfo-Fenster bei 50% der X-Position des Ankers zu positionieren. Wenden Sie dann die restlichen Platzierungsstile mit vorhandenen Positionierungswerten an.

Was passiert aber, wenn das Pop-over aufgrund der Positionierung nicht in den Viewport 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, den Tooltip oben zu positionieren. Wenn das nicht in den Viewport passt, wird er 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>

Sowohl mit der Popover- als auch mit der Ankerpositionierung lassen sich 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 visuelle 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. Dies 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 Pop-overs, 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 sind wir bei den Interaktionen angelangt, der letzten Station auf dieser Tour durch die Funktionen der Web-Benutzeroberfläche.

Wir haben bereits über das Animieren diskreter Eigenschaften gesprochen. Es gibt aber auch einige wirklich spannende 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 vorwärts oder rückwärts gescrollt wird, wenn Sie nach oben oder unten scrollen. Außerdem können Sie mit scrollgesteuerten Animationen eine Animation auch basierend auf der Position eines Elements in seinem Scroll-Container steuern. So lassen sich interessante Effekte wie ein Parallax-Hintergrundbild, Fortschrittsbalken und Bilder erstellen, die sich beim Scrollen offenbaren.

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 steuern möchten, verwenden Sie die neuen Eigenschaften scroll-timeline, view-timeline und animation-timeline. Wenn Sie eine JavaScript Web Animations API steuern möchten, ü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, sodass sie von den Vorteilen dieser APIs profitieren. Dazu gehört die Möglichkeit, diese Animationen außerhalb des Hauptthreads auszuführen. Ja, Sie haben richtig gelesen: Sie können jetzt seidenweiche Animationen haben, die durch Scrollen ausgelöst werden und außerhalb des Hauptthreads ausgeführt werden, und das mit nur wenigen zusätzlichen Codezeilen. Was gibt es daran nicht zu mögen?

Einen ausführlichen Leitfaden 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 festlegen, 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 Maxi Ferreira in dieser Demo zeigt, 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. 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.