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

Die letzten Monate haben eine goldene Ära für die Web-UI eingeleitet. Dank der engen Nutzung durch mehrere Browser wurden neue Plattformfunktionen eingeführt, die mehr Web- und Anpassungsfunktionen unterstützen als je zuvor.

Hier sind 20 der interessantesten und nützlichsten Funktionen, die erst vor Kurzem eingeführt wurden oder demnächst eingeführt werden:

• Containerabfragen
• Abfragen gestalten
• :has()-Selektor
• n-ten der Mikrosyntax
• text-wrap: balance
• initial-letter
• Dynamische Darstellungsbereich-Einheiten
• Große Farbräume
• color-mix()
• Verschachtelung
• Kaskadierende Ebenen
• Auf einen Bereich reduzierte Stile
• Trigonometrische Funktionen
• Attribute einzelner Transformationen
• Popover
• Ankerpositionierung
• Auswahlmenü
• Diskrete Property-Übergänge
• Scrollbasierte Animationen
• Übergänge ansehen

Die neue responsive Website

Beginnen wir mit einigen neuen Funktionen des responsiven Webdesigns. Mit neuen Plattformfunktionen können Sie logische Schnittstellen mit Komponenten erstellen, denen die responsiven Stilinformationen gehören. Außerdem können Sie Schnittstellen erstellen, die Systemfunktionen nutzen, um nativ anfühlende UIs zu liefern, und die Nutzer werden Teil des Designprozesses mit Abfragen zu Nutzerpräferenzen, um vollständige Anpassungsmöglichkeiten zu ermöglichen.

Containerabfragen

Containerabfragen sind seit Kurzem in allen modernen Browsern stabil. Damit können Sie Größe und Stil eines übergeordneten Elements abfragen, um die Stile zu bestimmen, die auf die untergeordneten Elemente angewendet werden sollen. Bei Medienabfragen kann nur auf Informationen aus dem Darstellungsbereich zugegriffen und diese genutzt werden, d. h., sie können nur mit einer Makroansicht eines Seitenlayouts verwendet werden. Containerabfragen sind dagegen ein präziseres Tool, das eine beliebige Anzahl von Layouts oder Layouts innerhalb von Layouts unterstützen kann.

Im folgenden Beispiel für den Posteingang sind der Primärer Posteingang und die Seitenleiste Favoriten beide Container. Die darin enthaltenen E-Mails passen ihr Rasterlayout an und blenden den E-Mail-Zeitstempel je nach verfügbarem Platz ein oder aus. Dies ist genau die gleiche Komponente auf der Seite, sie wird nur in verschiedenen Ansichten angezeigt.

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

Weitere Informationen zu Containerabfragen und zum Erstellen logischer Komponenten finden Sie in diesem Beitrag.

Stilabfragen

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

Im folgenden Beispiel werden Wettermerkmale verwendet, die in den Werten benutzerdefinierter Eigenschaften gespeichert sind, z. B. Regen, sonnig und bewölkt, um den Hintergrund und das Anzeigesymbol der Karte 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;
 }
}

Dies ist erst der Anfang bei Stilabfragen. In Zukunft werden wir boolesche Abfragen stellen, um festzustellen, ob ein Wert für benutzerdefinierte Eigenschaften vorhanden ist, und Codewiederholungen zu reduzieren. Derzeit wird über Bereichsabfragen gesprochen, mit denen Stile basierend auf einem Wertebereich angewendet werden. Auf diese Weise könnten 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()

Apropos leistungsstarke, dynamische Funktionen: Der :has() selector ist eine der leistungsfähigsten neuen CSS-Funktionen für moderne Browser. Mit :has() können Sie Designs anwenden. Dazu prüfen Sie, ob ein übergeordnetes Element bestimmte untergeordnete Elemente enthält oder ob diese untergeordneten Elemente einen bestimmten Status haben. Das heißt, wir haben jetzt einen Parent-Selektor.

Aufbauend auf dem Beispiel für eine Containerabfrage können Sie :has() verwenden, um die Komponenten noch dynamischer zu machen. Ein Element mit einem Sternsymbol erhält einen grauen Hintergrund, während ein Element mit einem Häkchen einen blauen Hintergrund.

Diese API ist jedoch nicht auf die Auswahl von übergeordneten Elementen beschränkt. Untergeordnete Elemente innerhalb des übergeordneten Elements können auch formatiert werden. Beispielsweise wird der Titel fett formatiert, wenn das Sternsymbol für das Element vorhanden ist. Das lässt sich mit .item:has(.star) .title erreichen. Über die :has()-Auswahl hast du Zugriff auf übergeordnete und untergeordnete Elemente und sogar auf gleichgeordnete Elemente. Diese API ist so flexibel, dass täglich neue Anwendungsfälle auftauchen.

In diesem Blogpost zu :has() finden Sie weitere Informationen und weitere Demos.

Syntax des n-ten

Die Webplattform bietet jetzt eine erweiterte nth-Child-Auswahl. Die erweiterte nth-child-Syntax gibt ein neues Keyword ("of") zurück, wodurch Sie die vorhandene Mikrosyntax von An+B mit einer spezifischeren Teilmenge für die Suche verwenden können.

Wenn Sie ein reguläres nth-child verwenden, zum Beispiel :nth-child(2) für die spezielle Klasse, wählt der Browser das zweite untergeordnete Element aus, auf das die spezielle Klasse angewendet wurde. Im Gegensatz dazu wird bei :nth-child(2 of .special) zuerst alle .special-Elemente vorgefiltert 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 Orte, an denen wir Logik in unsere Stile einbetten können; Typografie ist eine weitere. Ab Chrome 114 können Sie den Textumbruch für Überschriften mit der Eigenschaft text-wrap mit dem Wert balance ausgleichen.

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

Weitere Informationen

initial-letter

Eine weitere nette Verbesserung an der Webtypografie ist initial-letter. Mit dieser CSS-Eigenschaft können Sie den Stil von eingefügten Drop-down-Menüs besser steuern.

Mit initial-letter für das Pseudoelement :first-letter geben Sie die Größe des Buchstabens an, basierend auf der Anzahl der darin belegten Zeilen. Der Blockversatz oder „Senke“, in dem der Buchstabe platziert wird.

Weitere Informationen zur Verwendung von intial-letter

Einheiten für dynamischen Darstellungsbereich

Ein häufiges Problem, mit dem Webentwickler heute konfrontiert sind, ist die genaue und einheitliche Größe des Darstellungsbereichs, insbesondere auf Mobilgeräten. Als Entwickler möchten Sie, dass 100vh (100% der Höhe des Darstellungsbereichs) für „so hoch wie der Darstellungsbereich“ bedeutet. Der vh-Anzeigenblock berücksichtigt jedoch nicht das Zurückziehen der Navigationsleisten auf Mobilgeräten, sodass er manchmal zu lang wird und Scrollvorgänge verursacht.

Um dieses Problem zu beheben, gibt es auf der Webplattform jetzt neue Werte für Einheiten wie: – 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)

Der Wert für dynamische Darstellungsbereich-Einheiten ändert sich, wenn die zusätzlichen dynamischen Browser-Symbolleisten, wie die Adresse oben oder die Tab-Leiste unten, sichtbar sind und wenn sie nicht sichtbar sind.

Weitere Informationen zu diesen neuen Anzeigenblöcken finden Sie unter Die großen, kleinen und dynamischen Einheiten für den Darstellungsbereich.

Farbräume in großem Umfang

Eine weitere wichtige Ergänzung der Webplattform sind Farbräume mit großem Umfang. Bevor auf der Webplattform eine große Farbpalette verfügbar war, konnten Sie zwar ein Foto in kräftigen Farben aufnehmen, das auf modernen Geräten gut erkennbar ist, aber es gab keine Schaltfläche, Textfarbe oder Hintergründe, die zu diesen leuchtenden Farben passen.

Mittlerweile gibt es auf der Webplattform eine Reihe neuer Farbräume, darunter REC2020, P3, XYZ, LAB, OKLAB, LCH und OKLCH. Im HD-Farbleitfaden findest du die neuen Webfarbräume und vieles mehr.

In den Entwicklertools ist sofort erkennbar, wie der Farbbereich erweitert wurde. Die weiße Linie grenzt an, wo der srgb-Bereich endet und wo der breitere Farbbereich beginnt.

Es gibt viele weitere Tools für Farben! Auch die großen Verbesserungen bei Farbverläufen sollten Sie sich nicht entgehen lassen. Adam Argyle hat sogar ein brandneues Tool entwickelt, mit dem Sie eine neue Farbauswahl und einen Farbverlaufs-Builder für das Web ausprobieren können. Probieren Sie es einfach unter gradient.style aus.

Farbmix()

Die Erweiterung erweiterter Farbräume wird mit der Funktion color-mix() erweitert. Diese Funktion unterstützt die Vermischung von zwei Farbwerten, um neue Werte basierend auf den Kanälen der gemischten Farben zu erstellen. Der Farbraum, in dem Sie gemischt werden, wirkt sich auf die Ergebnisse aus. Bei Verwendung eines wahrnehmbaren Farbraums wie oklch wird ein anderer Farbbereich verwendet als z. B. 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 seit Langem gewünschte Funktion: die Möglichkeit, undurchsichtige Farbwerte beizubehalten und ihnen gleichzeitig etwas Transparenz zu verleihen. Jetzt können Sie die Farbvariablen Ihrer Marke verwenden und Varianten dieser Farben mit unterschiedlicher Deckkraft erstellen. Dazu mischen Sie eine Farbe mit transparent. Wenn Sie die Markenfarbe Blau mit 10% Transparent mischen, erhalten Sie eine 90% deckende Markenfarbe. Sie sehen, dass Sie auf diese Weise schnell Farbsysteme erstellen können.

Ein Beispiel dafür sind die Chrome-Entwicklertools. Im Stilbereich finden Sie ein schönes Symbol für das Vorschau-Wert-Diagramm.

Weitere Beispiele und Details finden Sie in unserem Blogpost zu Color-mix oder Sie können den playground "color-mix()" ausprobieren.

Grundlagen von Preisvergleichsportalen

Ein wichtiger Schritt ist die Entwicklung neuer Funktionen, mit denen sich Nutzer klar und deutlich überzeugen lassen. Viele der neuen Chrome-Funktionen zielen jedoch darauf ab, die Entwicklererfahrung zu verbessern und eine zuverlässigere und organisiertere CSS-Architektur zu schaffen. Zu diesen Funktionen gehören CSS-Verschachtelung, Kaskadenebenen, Stile im Bereich „Scope“, trigonometrische Funktionen und einzelne Transformationseigenschaften.

Verschachtelung

Die CSS-Verschachtelung, die bei Sass sehr beliebt ist und seit Jahren eine der häufigsten Anfragen von Preisvergleichsportal-Entwicklern ist, ist endlich auf der Webplattform zu finden. Durch Verschachtelung können Entwickler in einem kürzeren, gruppierten Format schreiben, wodurch Redundanz reduziert wird.

.card {}
.card:hover {}

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

  }
}

Sie können Medienabfragen auch verschachteln. Das bedeutet, dass Sie auch Containerabfragen verschachteln können. Im folgenden Beispiel wird eine Karte von einem Layout im Hochformat zu einem Layout im Querformat geändert, wenn ihr Container genügend Breite enthält:

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

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

Die Layoutanpassung für flex wird vorgenommen, wenn im Container mehr (oder gleich) 480px freier Platz im Inline-Format verfügbar ist. Der Browser wendet das neue Anzeigeformat einfach an, wenn die Bedingungen erfüllt sind.

Weitere Informationen und Beispiele finden Sie in unserem Beitrag zur CSS-Verschachtelung.

Ebenen übereinander weitergeben

Ein weiteres Problem für Entwickler, das wir identifiziert haben, besteht darin, für Konsistenz bei den Stilen zu sorgen, die sich von anderen abheben. Ein Teil zur Lösung dieses Problems besteht darin, die CSS-Kaskade besser zu kontrollieren.

Mit Kaskadieren von Ebenen lässt sich dieses Problem lösen, indem Nutzer besser steuern können, welche Ebenen eine höhere Priorität haben als andere. So lässt sich genauer steuern, wann Ihre Stile angewendet werden.

Weitere Informationen zur Verwendung von Kaskadenebenen finden Sie in diesem Artikel.

Auf einen Bereich reduziertes CSS

Mit CSS-bezogenen Designs können Entwickler Grenzen angeben, für die bestimmte Designs gelten. Dadurch wird im Grunde ein nativer Namespace in CSS erstellt. Früher haben Entwickler mithilfe von Drittanbieter-Scripts Klassen umbenannt oder bestimmte Namenskonventionen festgelegt, um Stilkonflikte zu vermeiden. Bald können Sie aber @scope verwenden.

Hier wird ein .title-Element einer .card zugeordnet. Dadurch wird verhindert, dass dieses Titelelement mit anderen .title-Elementen auf der Seite in Konflikt steht, z. B. mit dem Titel eines Blogposts oder einer anderen Überschrift.

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

In dieser Live-Demo sehen Sie @scope mit Umfangsbeschränkungen zusammen mit @layer:

Weitere Informationen zu @scope finden Sie in der css-cascade-6-Spezifikation.

Trigonometrische Funktionen

Ein weiterer neuer CSS-Entwurf 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, mehr organische Layouts auf der Webplattform zu erstellen. Ein gutes Beispiel ist dieses radiale Menülayout, das sich jetzt mithilfe von sin()- und cos()-Funktionen entwerfen und animieren lässt.

In der folgenden Demo drehen sich die Punkte um einen zentralen Punkt. Anstatt jeden Punkt um seinen eigenen Mittelpunkt zu drehen und dann nach außen zu verschieben, wird jeder Punkt auf der X- und der Y-Achse übersetzt. Die Abstände auf der X- und der Y-Achse werden unter Berücksichtigung von cos() bzw. sin() des --angle bestimmt.

Weitere Informationen zu diesem Thema finden Sie im Artikel zu trigonometrischen Funktionen.

Einzelne Transformationsattribute

Die Ergonomie der Entwickler verbessert sich mit einzelnen Transformationsfunktionen immer weiter. Seit der letzten I/O liefen einzelne Transformationen in allen modernen Browsern stabil.

In der Vergangenheit haben Sie sich auf die Transformationsfunktion verlassen, um Unterfunktionen zum Skalieren, Drehen und Übersetzen eines UI-Elements anzuwenden. Dies führte zu vielen Wiederholungen und war besonders frustrierend, wenn mehrere Transformationen zu unterschiedlichen Zeitpunkten 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 */
}

Jetzt können Sie all diese Details in Ihre CSS-Animationen aufnehmen, indem Sie die Transformationsarten trennen und einzeln anwenden.

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

.target:hover {
  scale: 2;
}

Damit können Änderungen an Übersetzung, Rotation oder Skalierung während der Animation mit unterschiedlichen Änderungsraten zu verschiedenen Zeiten auftreten.

Weitere Informationen finden Sie in diesem Beitrag zu einzelnen Transformationsfunktionen.

Anpassbare Komponenten

Um sicherzustellen, dass wir einige der wichtigsten Entwickleranforderungen über die Webplattform erfüllen, arbeiten wir mit der OpenUI-Community-Gruppe zusammen und haben drei Lösungen für den Anfang zusammengestellt:

1. Integrierte Pop-up-Funktion mit Event-Handlern, eine deklarative DOM-Struktur und zugängliche Standardeinstellungen.
2. Eine CSS API zum Verbinden zweier Elemente über Tethering, um die Ankerpositionierung zu ermöglichen.
3. Eine anpassbare Drop-down-Menükomponente, wenn Sie Inhalte innerhalb einer Auswahl gestalten möchten

Pop-over

Die Popover API bietet Elemente einige integrierte Funktionen zur Browserunterstützung, 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, stufen Sie dieses Element in einer speziellen Ebene oben auf der Seite hoch.
• Leichtes Schließen kostenlos in auto-Pop-overs. Wenn Sie also außerhalb eines Elements klicken, wird das Pop-over geschlossen, aus der Barrierefreiheitsstruktur entfernt und der Fokus ordnungsgemäß verwaltet.
• Standardmäßige Barrierefreiheit für das Bindegewebe der Zielgruppe des Popovers und des Popovers selbst.

All dies bedeutet, dass weniger JavaScript geschrieben werden muss, um diese Funktionen zu erstellen und all diese Zustände zu erfassen.

Die DOM-Struktur für Popover ist deklarativ und kann so klar geschrieben werden, wie wenn Sie Ihrem Popover-Element ein id- und das popover-Attribut zuweisen. Anschließend synchronisieren Sie diese ID mit dem Element, das das Pop-over öffnen würde, z. B. eine 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 erzwingt beim Öffnen das Schließen anderer Pop-over, erhält beim Öffnen den Fokus und kann Licht schließen. Umgekehrt wird das Schließen eines anderen Elementtyps durch popover=manual-Elemente nicht erzwungen. Sie werden nicht sofort fokussiert und schließen nicht das Licht aus. Sie werden über eine Ein/Aus-Schaltfläche oder eine andere Schließaktion geschlossen.

Die aktuelle Dokumentation zu Pop-overs findest du derzeit auf der MDN.

Ankerpositionierung

Popovers werden auch häufig in Elementen wie Dialogfeldern und Kurzinfos verwendet, die normalerweise mit bestimmten Elementen verknüpft sein müssen. Nehmen wir einmal dieses Beispiel: Wenn Sie auf einen Kalendertermin klicken, wird neben dem Termin ein Dialogfeld angezeigt. Das Kalenderelement ist der Anker und das Pop-over ist das Dialogfeld mit den Termindetails.

Mit der Funktion anchor() können Sie eine zentrierte Kurzinfo erstellen. Dazu verwenden Sie die Breite des Ankers, um die Kurzinfo bei 50% der x-Position des Ankers zu positionieren. Verwenden Sie dann die vorhandenen Positionierungswerte, um die restlichen Placement-Stile anzuwenden.

Aber was ist, wenn das Pop-over aufgrund seiner Positionierung nicht in den Darstellungsbereich passt?

Um dieses Problem zu lösen, enthält die Anchor Positioning API 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, die Kurzinfo oben zu platzieren. Wenn sie nicht in den Darstellungsbereich passt, platziert der Browser sie unten unter dem Ankerelement.

.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 Pop-over- als auch der Ankerpositionierung können Sie vollständig anpassbare Auswahlmenüs erstellen. Die OpenUI-Community-Gruppe hat die grundlegende Struktur dieser Menüs untersucht und nach Möglichkeiten gesucht, die Anpassung der darin enthaltenen Inhalte zu ermöglichen. Hier ein paar visuelle Beispiele:

Um das selectmenu-Beispiel ganz links mit den farbigen Punkten zu erstellen, die der Farbe entsprechen, die in einem Kalendertermin angezeigt werden 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 all dies reibungslos in Popover ein- und ausgeht, braucht das Web eine Möglichkeit, diskrete Eigenschaften zu animieren. Dies sind Eigenschaften, die in der Vergangenheit normalerweise nicht animiert werden konnten, z. B. Animation zur und von der obersten Ebene sowie Animationen von und zu display: none.

Um schöne Übergänge für Pop-over, Auswahlmenüs und sogar vorhandene Elemente wie Dialoge oder benutzerdefinierte Komponenten zu ermöglichen, ermöglichen Browser neue sanitäre Elemente, die diese Animationen unterstützen.

In der folgenden Pop-over-Demo werden Pop-over mit :popover-open für den geöffneten Zustand und @starting-style für den Zustand vor dem Öffnen animiert. Außerdem wird ein Transformationswert für das Element direkt für den Zustand „Nach dem Öffnen/Öffnen“ angewendet. Damit alles mit Displayanzeigen funktioniert, muss die Eigenschaft transition wie folgt 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

Nun kommen wir zu den Interaktionen – dem letzten Halt auf dieser Tour zu den Funktionen der Web-UI.

Wir haben bereits über das Animieren diskreter Eigenschaften gesprochen, aber es gibt auch einige wirklich aufregende APIs, die in Chrome landen, nämlich scrollgesteuerte Animationen und Ansichtsübergänge

Scroll-Animationen

Mit Scroll-Animationen können Sie die Wiedergabe einer Animation basierend auf der Scroll-Position eines Scroll-Containers steuern. Das heißt, wenn Sie nach oben oder unten scrollen, springt die Animation vor oder zurück. Darüber hinaus können Sie bei scrollbaren Animationen eine Animation auch basierend auf der Position eines Elements innerhalb des Scroll-Containers steuern. So lassen sich interessante Effekte erzielen, z. B. ein Hintergrundbild mit Parallaxe, eine Fortschrittsanzeige für das Scrollen oder Bilder, die sich erst wieder sichtbar machen.

Diese API unterstützt eine Reihe von JavaScript-Klassen und CSS-Eigenschaften, mit denen Sie auf einfache Weise deklarative scrollbare 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. Um eine JavaScript Web Animations API zu nutzen, übergeben Sie eine ScrollTimeline- oder ViewTimeline-Instanz als timeline-Option an Element.animate()

Diese neuen APIs funktionieren in Verbindung mit den bestehenden Web Animations- und CSS Animations APIs und profitieren somit von den Vorteilen dieser APIs. Dazu gehört auch die Möglichkeit, diese Animationen über den Hauptthread laufen zu lassen. Ja, das ist richtig: Sie können jetzt flüssige Animationen erstellen, die durch Scrollen gesteuert werden und aus dem Hauptthread weglaufen, mit nur wenigen zusätzlichen Codezeilen. Was soll nicht gefallen?!

Einen ausführlichen Leitfaden zum Erstellen dieser scrollgesteuerten Animationen findest du im Artikel Scroll-gesteuerte Animationen.

Übergänge ansehen

Mit der View Transition API lässt sich das DOM in einem einzigen Schritt ändern. Dabei wird ein animierter Übergang zwischen den beiden Zuständen erstellt. Dabei kann es sich um einfache Überblendungen zwischen Ansichten handeln, aber Sie können auch steuern, wie einzelne Teile der Seite übergehen sollen.

Ansichtsübergänge können als schrittweise Verbesserung verwendet werden: Sie binden Ihren Code, mit dem das DOM mit einer beliebigen Methode aktualisiert wird, in die View Transition API mit einem Fallback für Browser ein, 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 sollte, 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 wunderbaren Demo von Maxi Ferreira gezeigt wird, funktionieren andere Seiteninteraktionen, etwa das Abspielen eines Videos, während eines View-Übergangs weiter.

„View Transitions“ funktioniert derzeit mit Single-Page Apps (SPAs) aus Chrome 111. Wir arbeiten an der Unterstützung mehrerer Seiten für Apps. Weitere Informationen finden Sie in diesem Leitfaden.

Fazit

Hier auf developer.chrome.com finden Sie alle Neuigkeiten zu CSS und HTML. In den I/O-Videos finden Sie weitere Web-Landingpages.