Neues zu Preisvergleichsportalen und der Web-UI: Zusammenfassung der I/O 2024

Die Webplattform ist von Innovationen geprägt, wobei CSS und Web-UI-Funktionen an vorderster Front dieser aufregenden Weiterentwicklung stehen. Wir leben in einer goldenen Ära der Web-UI mit neuen CSS-Funktionen, die in einem völlig neuen Tempo in verschiedenen Browsern verfügbar sind. Dadurch eröffnen sich unendlich viele Möglichkeiten, schöne und ansprechende Weberlebnisse zu schaffen. In diesem Blogpost werfen wir einen genaueren Blick auf den aktuellen Stand von CSS und stellen einige der bahnbrechendsten neuen Funktionen vor, die die Entwicklung von Webanwendungen neu definieren, live auf der Google I/O 2024.

Neuartige interaktive Erlebnisse

Eine Nutzererfahrung im Web ist im Wesentlichen ein Aufruf und eine Reaktion zwischen Ihnen und Ihren Nutzern. Daher ist es so wichtig, in qualitativ hochwertige Nutzerinteraktionen zu investieren. Wir haben an einigen großen Verbesserungen gearbeitet, die neue Funktionen im Web für die Navigation innerhalb von Webseiten und die Navigation zwischen den Nutzern zur Verfügung stellen.

Scroll-Animationen

Wie der Name schon sagt, können Sie mit der Scroll-gesteuerten Animations-API dynamische, scrollbare Animationen ohne Scroll-Beobachter oder andere aufwendige Skripts erstellen.

Scroll-gesteuerte Animationen erstellen

Ähnlich wie bei zeitbasierten Animationen auf der Plattform können Sie jetzt den Scrollfortschritt eines Scrollers verwenden, um eine Animation zu starten, anzuhalten und umzukehren. Wenn du also vorwärts scrollst, siehst du den Fortschritt der Animation. Wenn du zurückscrollst, geschieht dies umgekehrt. Damit lassen sich teilweise oder ganzseitige visuelle Elemente erstellen, bei denen Elemente im Darstellungsbereich animiert und innerhalb des Darstellungsbereichs animiert werden. Dies wird auch als Scrollytelling bezeichnet und sorgt für eine dynamische visuelle Wirkung.

Mit Scroll-Animationen können Sie wichtige Inhalte hervorheben, Nutzer durch eine Story führen oder Ihren Webseiten einfach eine dynamische Note verleihen.

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Mit dem vorherigen Code wird eine einfache Animation definiert, die im Darstellungsbereich angezeigt wird, indem die Deckkraft und Skalierung eines Bildes geändert werden. Die Animation wird durch die Scrollposition ausgelöst. Richten Sie zum Erstellen dieses Effekts zuerst die CSS-Animation und dann das animation-timeline ein. In diesem Fall verfolgt die view()-Funktion mit ihren Standardwerten das Bild relativ zum Scrollport (in diesem Fall auch der Darstellungsbereich).

Es ist wichtig, die Browserunterstützung und die Nutzerpräferenzen zu berücksichtigen, insbesondere im Hinblick auf die Barrierefreiheit. Verwenden Sie daher die Regel @supports, um zu prüfen, ob der Browser scrollbare Animationen unterstützt, und umschließen Sie Ihre scroll-gesteuerte Animation in eine Nutzereinstellungsabfrage wie @media (prefers-reduced-motion: no-preference), um die Nutzer zu respektieren. Bewegungseinstellungen. Nachdem Sie diese Prüfungen durchgeführt haben, wissen Sie, dass Ihre Stile funktionieren und die Animation für den Nutzer nicht problematisch ist.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

Scroll-gesteuerte Animationen können ganzseitige Scrollytelling-Erlebnisse bedeuten, aber sie können auch subtilere Animationen bedeuten, z. B. eine Headerleiste, die beim Scrollen durch eine Web-App einen Schatten minimiert.

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

In dieser Demo werden einige verschiedene Keyframe-Animationen verwendet: Überschrift, Text, Navigationsleiste und Hintergrund. Anschließend wird jeweils die entsprechende Scroll-Animation angewendet. Sie haben zwar jeweils einen anderen Animationsstil, aber alle haben dieselbe Animationszeitachse, den nächsten Scroller und denselben Animationsbereich – vom oberen Rand der Seite bis zu 150 Pixel.

Leistungsvorteile scrollbarer Animationen

Diese integrierte API reduziert eine Codelast, die Sie verwalten müssen, unabhängig davon, ob Sie ein benutzerdefiniertes Script erstellen oder eine zusätzliche Drittanbieterabhängigkeit verwenden. Außerdem müssen keine verschiedenen Scroll-Beobachter versendet werden, was erhebliche Leistungsvorteile bedeutet. Das liegt daran, dass scrollbare Animationen vom Hauptthread ausgeführt werden, wenn Eigenschaften animiert werden, die auf dem Compositor animiert werden können, wie Transformationen und Deckkraft. Dies gilt unabhängig davon, ob Sie die neue API direkt in CSS oder die JavaScript-Hooks verwenden.

Tokopedia verwendete kürzlich auch scrollbare Animationen, damit beim Scrollen die Produktnavigationsleiste angezeigt wird. Die Verwendung dieser API bietet erhebliche Vorteile, sowohl für die Codeverwaltung als auch für die Leistung.

<ph type="x-smartling-placeholder">

</ph>

„Im Vergleich zu herkömmlichen JS-Scroll-Ereignissen konnten wir bis zu 80% unserer Codezeilen reduzieren. Dabei haben wir festgestellt, dass die durchschnittliche CPU-Auslastung beim Scrollen von 50% auf 2% reduziert wurde. – Andy Wihalim, Senior Software Engineer, Tokopedia“

Die Zukunft der Scroll-Effekte

Wir wissen, dass diese Effekte das Web weiterhin zu einem interaktiven Ort machen werden, und wir denken bereits darüber nach, was als Nächstes kommen könnte. Dazu gehört die Möglichkeit, nicht nur neue Animationszeitachsen zu verwenden, sondern auch einen Scrollpunkt zum Auslösen einer Animation zu verwenden. Diese werden als durch Scrollen ausgelöste Animationen bezeichnet.

In Zukunft werden weitere Funktionen zum Scrollen in Browsern hinzukommen. In der folgenden Demo sehen Sie eine Kombination dieser zukünftigen Funktionen. Dabei werden die CSS-scroll-start-target verwendet, um das ursprüngliche Datum und die ursprüngliche Uhrzeit in der Auswahl festzulegen, und das JavaScript-Ereignis scrollsnapchange, um das Header-Datum zu aktualisieren. Die Synchronisierung der Daten mit dem ausgerichteten Ereignis ist daher sehr einfach.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Sie können darauf auch aufbauen und eine Auswahl in Echtzeit mit dem JavaScript-Ereignis scrollsnapchanging aktualisieren.

Diese speziellen Funktionen befinden sich derzeit nur in Canary hinter einer Flagge. Sie ermöglichen jedoch Funktionen, die auf der Plattform bisher unmöglich oder sehr schwer zu entwickeln waren, und heben die Zukunft der scrollbaren Interaktionsmöglichkeiten hervor.

Weitere Informationen zu scrollbaren Animationen finden Sie in einer neuen Videoreihe auf dem YouTube-Kanal von Chrome für Entwickler. Hier lernen Sie die Grundlagen von Scroll-Animationen von Bramus van Damme kennen, einschließlich der Funktionsweise der Funktion, ihres Vokabulars, verschiedener Möglichkeiten zum Erstellen von Effekten und der Kombination von Effekten, um ansprechende Erlebnisse zu schaffen. Es ist eine tolle Videoserie, die Sie sich ansehen sollten.

Übergänge ansehen

Wir haben gerade eine leistungsstarke neue Funktion für Animationen innerhalb von Webseiten kennengelernt. Es gibt aber auch eine leistungsstarke neue Funktion namens „Ansichtsübergänge“, mit der zwischen Seitenaufrufen eine nahtlose User Experience ermöglicht. Mit der Funktion „Übergänge anzeigen“ wird das Web noch flüssiger, da Sie nahtlose Übergänge zwischen verschiedenen Ansichten auf einer einzelnen Seite oder sogar über verschiedene Seiten hinweg schaffen können.

Airbnb ist eines der Unternehmen, die bereits mit der Integration von Ansichtenübergängen in die Benutzeroberfläche experimentieren, um eine reibungslose und nahtlose Webnavigation zu ermöglichen. Dazu gehört auch die Seitenleiste des Eintragseditors, über die Sie direkt Fotos bearbeiten und Ausstattung hinzufügen können, und das alles innerhalb eines flüssigen User Flows.

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

Die ganzseitigen Effekte sind zwar ansprechend und nahtlos, du kannst aber auch Mikrointeraktionen erstellen, wie in diesem Beispiel, bei dem die Listenansicht auf Grundlage der Nutzerinteraktion aktualisiert wird. Dieser Effekt lässt sich ganz einfach mit Übergängen von Ansichten erzielen.

Sie können in Ihrer Single-Page-Anwendung schnell Übergänge für Ansichten aktivieren. Dazu müssen Sie einfach eine Interaktion mit document.startViewTransition zusammenfassen und sicherstellen, dass jedes Element, das übergeht, ein view-transition-name, inline oder dynamisch mit JavaScript hat, wenn Sie DOM-Knoten erstellen.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Übergangsklassen ansehen

Namen von Ansichtsübergängen können verwendet werden, um benutzerdefinierte Animationen auf Ihren Ansichtsübergang anzuwenden. Dies kann jedoch umständlich werden, wenn viele Elemente übergangen werden. Das erste neue Update zum Ansehen von Übergängen vereinfacht dieses Problem und bietet die Möglichkeit, Übergangsklassen anzusehen, die auf benutzerdefinierte Animationen angewendet werden können.

Übergangstypen ansehen

Eine weitere große Verbesserung bei den Übergängen von Aufrufen ist die Unterstützung von Arten von Übergängen bei Aufrufen. Typen von Wiedergabeübergängen sind nützlich, wenn Sie bei der Animation zu und von Seitenaufrufen einen anderen visuellen Übergang zwischen Ansichten verwenden möchten.

Angenommen, die Startseite soll auf eine andere Art und Weise zu einer Blog-Seite animiert werden, als wenn die Blog-Seite zurück zur Startseite animiert wird. Oder Sie möchten, dass die Seiten wie in diesem Beispiel von links nach rechts und umgekehrt wechseln. Vorher war das alles chaotisch. Sie könnten dem DOM Klassen hinzufügen, um Stile anzuwenden, und müssten die Klassen anschließend entfernen. Mit Ansichts-Übergangstypen kann der Browser alte Übergänge bereinigen, anstatt dies für Sie manuell tun zu müssen, bevor Sie neue starten.

<ph type="x-smartling-placeholder">

</ph>

Sie können Typen innerhalb der document.startViewTransition-Funktion einrichten, die jetzt ein Objekt akzeptiert. update ist die Callback-Funktion, die das DOM aktualisiert, und types ist ein Array mit den Typen.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

Übergänge bei der mehrseitigen Ansicht

Was das Web so leistungsstark macht, ist seine Reichweite. Viele Anwendungen bestehen nicht nur aus einer einzigen Seite, sondern bestehen aus einem soliden, aus mehreren Seiten bestehenden Wandteppich. Deshalb freuen wir uns, euch mitteilen zu können, dass wir in Chromium 126 jetzt übergänge dokumentübergreifende Ansichten für mehrseitige Anwendungen unterstützen.

Dieser neue dokumentübergreifende Funktionssatz umfasst Web-Erlebnisse, die sich im selben Ursprung befinden, z. B. das Navigieren von web.dev zu web.dev/blog. Das gilt jedoch nicht für ursprungsübergreifende Navigationen, z. B. das Navigieren von web.dev zu blog.web.dev oder zu einer anderen Domain wie google.com.

Einer der Hauptunterschiede bei Übertragungen der Ansicht für dasselbe Dokument besteht darin, dass Sie Ihre Umstellung nicht mit document.startViewTransition() abschließen müssen. Aktivieren Sie stattdessen beide Seiten, die am Aufrufübergang beteiligt sind, mithilfe der CSS-@view-transitionat-Regel.

@view-transition {
  navigation: auto;
}

Für einen stärkeren benutzerdefinierten Effekt können Sie die JavaScript-Elemente mithilfe der neuen Ereignis-Listener pageswap oder pagereveal einbinden, die Zugriff auf das Objekt vom Typ „View Transit“ bieten.

Mit pageswap können Sie kurz vor dem Erstellen der alten Snapshots einige kurzfristige Änderungen auf der ausgehenden Seite vornehmen und mit pagereveal die neue Seite anpassen, bevor sie nach der Initialisierung des Renderings begonnen hat.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

<ph type="x-smartling-placeholder">

</ph>

Zukünftig möchten wir weitere Änderungen bei der Wiedergabe von Videos vornehmen, darunter:

• Auf einen Bereich reduzierte Übergänge: Damit können Sie einen Übergang auf eine DOM-Unterstruktur beschränken, damit der Rest der Seite weiterhin interaktiv ist und mehrere Ansichtsübergänge gleichzeitig ausgeführt werden können.
• Bewegungsgesteuerte Ansichtsübergänge: Mit Drag- oder Wischgesten können Sie eine dokumentübergreifende Ansicht auslösen und so eine native Darstellung im Web schaffen.
• Navigationsabgleich in CSS: Passen Sie den Übergang der dokumentübergreifenden Ansicht direkt in Ihrem CSS an, anstatt pageswap- und pagereveal-Ereignisse in JavaScript zu verwenden. Im folgenden Vortrag von Bramus Van Damme erfahren Sie mehr über Übergänge zwischen Ansichten für mehrseitige Anwendungen und darüber, wie Sie diese am besten mit Pre-Rendering einrichten können:

Engine-fähige UI-Komponenten: Komplexe Interaktionen vereinfachen

Das Erstellen komplexer Webanwendungen ist nicht einfach, aber CSS und HTML werden weiterentwickelt, um diesen Prozess noch einfacher zu gestalten. Neue Funktionen und Verbesserungen vereinfachen das Erstellen von UI-Komponenten, sodass Sie sich ganz auf die Gestaltung großartiger Inhalte konzentrieren können. Dies wird durch eine gemeinsame Initiative mit mehreren wichtigen Normungsgremien und Community-Gruppen erreicht, darunter die CSS Working Group, die Open UI Community Group und die WHATWG (Web Hypertext Application Technology Working Group).

Ein großes Problem für Entwickler ist eine scheinbar einfache Anforderung: die Möglichkeit, Dropdown-Menüs (das Auswahlelement) zu gestalten. Auf den ersten Blick scheint es einfach, aber es ist ein komplexes Problem, das so viele Teile der Plattform betrifft: von Layout und Rendering über Scrollen und Interaktionen bis hin zu User-Agent-Stilen und CSS-Eigenschaften bis hin zu Änderungen am HTML-Code selbst.

<ph type="x-smartling-placeholder">

</ph>

Ein Drop-down-Menü besteht aus vielen Teilen und enthält viele Bundesstaaten, die berücksichtigt werden müssen, zum Beispiel:

• Tastaturbelegungen (zum Aufrufen/Beenden der Interaktion)
• Zum Schließen wegklicken
• Aktive Pop-over-Verwaltung (andere Pop-over beim Öffnen schließen)
• Verwaltung des Fokus auf Tabs
• Ausgewählten Optionswert visualisieren
• Interaktionsstil „Pfeil“
• Statusverwaltung (offen/geschlossen)

Es ist derzeit schwierig, den gesamten Status selbst zu verwalten, aber die Plattform macht es auch nicht einfach. Um dieses Problem zu beheben, haben wir diese Teile aufgeteilt und ein paar einfache Funktionen herausgebracht, mit denen Stil-Drop-down-Menüs aktiviert werden können, aber noch viel mehr.

Popover API

Zunächst haben wir ein globales Attribut namens popover veröffentlicht, das vor einigen Wochen den neuen Status von Baseline erreicht hat.

Popover-Elemente werden mit display: none ausgeblendet, bis sie mit einem Aufrufer wie einer Schaltfläche oder mit JavaScript geöffnet werden. Wenn Sie ein einfaches Pop-over erstellen möchten, legen Sie das Popover-Attribut für das Element fest und verknüpfen Sie seine ID mithilfe von popovertarget mit einer Schaltfläche. Die Schaltfläche ist der Aufrufer,

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Wenn das Popover-Attribut jetzt aktiviert ist, führt der Browser viele wichtige Verhaltensweisen aus, ohne dass zusätzliche Skripts erstellt werden müssen. Dazu gehören:

• Förderung in die oberste Ebene: Eine separate Ebene über dem Rest der Seite, damit Sie nicht mit z-index herumexperimentieren müssen.
• Lichtabschaltung: Wenn Sie auf eine Stelle außerhalb des Popover-Bereichs klicken, wird es geschlossen und wieder in den Fokus rückt.
• Standardmäßige Verwaltung des Fokus auf Tabs: Durch das Öffnen des Pop-overs wird der nächste Tab innerhalb des Pop-overs gestoppt.
• Integrierte Tastaturbelegung: Wenn Sie die esc-Taste drücken oder zweimal umschalten, wird das Pop-over geschlossen und der Fokus kehrt zurück.
• Standardkomponentenbindungen: : Der Browser verbindet ein Popover semantisch mit seinem Trigger.

<ph type="x-smartling-placeholder">

</ph>

Vielleicht verwenden Sie dieses Popover-API heute sogar, ohne es zu merken. GitHub hat ein Pop-over auf seiner Startseite im Menü „Neu“ und in der Übersicht über die Überprüfung von Pull-Anfragen implementiert. Diese Funktion wurde mithilfe von Popover-Polyfill, das von Oddbird mit erheblicher Unterstützung von Keith Cirkel von GitHub erstellt wurde, schrittweise verbessert, um auch ältere Browser zu unterstützen.

„Durch die Migration zu einem Popover haben wir es geschafft, buchstäblich Hunderte von Codezeilen abzuschaffen. Popover hilft uns, da wir nicht mehr gegen die magischen Z-Index-Zahlen kämpfen müssen. Die richtige Barrierefreiheitsbaumbeziehung mit deklarativem Schaltflächenverhalten und ein integriertes Fokusverhalten machen es unserem Designsystem wesentlich einfacher, Muster richtig zu implementieren. – Keith Cirkel, Software Engineer, GitHub“

Ein- und Ausstiegseffekte animieren

Wenn Sie Pop-over verwenden, können Sie Interaktionen hinzufügen. Im letzten Jahr wurden vier neue Interaktionsfunktionen zur Unterstützung der Animation von Pop-overs eingeführt. Dazu gehören:

display und content-visibility können auf einer Keyframe-Zeitachse animiert werden.

Die Eigenschaft transition-behavior mit dem Schlüsselwort allow-discrete, um den Übergang diskreter Eigenschaften wie display zu ermöglichen.

Die @starting-style-Regel zum Animieren von Eingabeeffekten aus display: none in die oberste Ebene.

Overlay-Eigenschaft zur Steuerung des Verhaltens der obersten Ebene während einer Animation.

Diese Eigenschaften funktionieren für jedes Element, das Sie im obersten Layer animieren, sei es ein Popover oder ein Dialogfeld. Bei einem Dialog vor dem Hintergrund sieht das so aus:

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

Richten Sie zuerst das @starting-style ein, damit der Browser weiß, über welche Stile dieses Element im DOM animiert werden soll. Dies geschieht sowohl für das Dialogfeld als auch für den Hintergrund. Gestalten Sie dann den Öffnungsstatus sowohl für das Dialogfeld als auch für den Hintergrund. Bei einem Dialogfeld wird das Attribut open und für ein Pop-over das Pseudoelement ::popover-open verwendet. Animieren Sie abschließend opacity, display und overlay mithilfe des Schlüsselworts allow-discrete, um den Animationsmodus zu aktivieren, in dem diskrete Eigenschaften übergangen werden können.

Positionierung der Anker

Popover war nur der Anfang der Geschichte. Ein sehr spannendes Update ist, dass die Ankerpositionierung jetzt ab Chrome 125 unterstützt wird.

Mithilfe der Ankerpositionierung kann der Browser mit nur wenigen Codezeilen die Logik verarbeiten, um ein positioniertes Element per Tethering mit einem oder mehreren Ankerelementen zu verbinden. Im folgenden Beispiel ist bei jeder Schaltfläche eine einfache Kurzinfo verankert und befindet sich unten in der Mitte.

Richten Sie in CSS eine Beziehung zur Ankerposition ein, indem Sie die Eigenschaft anchor-name für das Verankerungselement (in diesem Fall die Schaltfläche) und die Eigenschaft position-anchor für das positionierte Element (in diesem Fall die Kurzinfo) verwenden. Wenden Sie dann mit der Funktion anchor() eine absolute oder feste Positionierung relativ zum Anker an. Mit dem folgenden Code wird der obere Teil der Kurzinfo an den unteren Rand der Schaltfläche platziert.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

Alternativ können Sie den Anchor-Namen direkt in der Anchor-Funktion verwenden und das Attribut position-anchor überspringen. Dies kann nützlich sein, wenn Sie mit mehreren Elementen verankern.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Verwenden Sie schließlich das neue Keyword anchor-center für die Eigenschaften justify und align, um das positionierte Element am Anker zu zentrieren.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Es ist zwar sehr praktisch, die Ankerpositionierung mit einem Popover zu verwenden, aber definitiv keine Voraussetzung dafür. Die Ankerposition kann mit zwei (oder mehr) Elementen verwendet werden, um eine visuelle Beziehung zu schaffen. Die folgende Demo, inspiriert von einem Artikel von Roman Komarov, zeigt einen Unterstrich-Stil, der beim Bewegen des Mauszeigers auf Elemente in Listen verankert wird.

In diesem Beispiel wird die Ankerfunktion verwendet, um die Ankerposition mithilfe der physischen Eigenschaften von left, right und bottom einzurichten. Wenn Sie die Maus über einen der Links bewegen, ändert sich der Zielanker und der Browser verschiebt das Ziel, um die Positionierung anzuwenden. Dabei wird gleichzeitig die Farbe animiert, um einen schönen Effekt zu erzeugen.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area-Positionierung

Neben der standardmäßigen richtungsweisenden absoluten Positionierung, die Sie wahrscheinlich schon verwendet haben, ist ein neuer Layout-Mechanismus, der als Teil der Anchor Positioning API als eingefügter Bereich gelandet ist. Der eingefügte Bereich erleichtert die Platzierung von Elementen relativ zu ihren jeweiligen Ankern. Dieser Bereich funktioniert bei einem Raster mit 9 Zellen, bei dem sich das Verankerungselement in der Mitte befindet. Mit inset-area: top wird das positionierte Element z. B. ganz oben und inset-area: bottom unten platziert.

Eine vereinfachte Version der ersten Ankerdemo sieht mit inset-area so aus:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

Sie können diese Positionswerte mit span-Keywords kombinieren, um an der mittleren Position zu beginnen und sich entweder nach links oder rechts zu spannen oder alles zu spannen, um den vollständigen Satz an verfügbaren Spalten oder Zeilen in Anspruch zu nehmen. Sie können auch logische Eigenschaften verwenden. Um diesen Layoutmechanismus leichter zu visualisieren und anzuwenden, sehen Sie sich dieses Tool in Chrome 125+ an:

Da diese Elemente verankert sind, wird das positionierte Element dynamisch auf der Seite verschoben, während sich der Anker bewegt. In diesem Fall haben wir Kartenelemente im Containerabfragestil, deren Größe basierend auf ihrer eigentlichen Größe angepasst wird, was bei Medienabfragen nicht möglich ist. Das verankerte Menü ändert sich mit dem neuen Layout, wenn sich die Benutzeroberfläche der Karte ändert.

Dynamische Ankerpositionen mit position-try-options

Menüs und die Navigation in Untermenüs lassen sich mit einer Kombination aus Popover- und Ankerpositionierung viel einfacher erstellen. Und wenn Sie den Rand eines Darstellungsbereichs mit Ihrem verankerten Element erreichen, können Sie die Positionierungsänderung ebenfalls vom Browser übernehmen lassen. Dafür gibt es mehrere Möglichkeiten. Die erste besteht darin, eigene Positionierungsregeln zu erstellen. In diesem Fall befindet sich das Untermenü anfänglich rechts neben der Schaltfläche „Außenbereich“. Sie können jedoch einen @position-try-Block für den Fall erstellen, dass rechts neben dem Menü nicht genügend Platz ist, und ihm die benutzerdefinierte Kennung --bottom zuweisen. Anschließend verbinden Sie diesen @position-try-Block mithilfe von position-try-options mit dem Anker.

Jetzt wechselt der Browser zwischen diesen Verankerungszuständen, indem er zuerst die richtige Position auswählt und dann nach unten verschiebt. Das ist auch mit einem schönen Übergang möglich.

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

Neben der expliziten Positionierungslogik gibt der Browser einige Keywords für grundlegende Interaktionen wie das Umdrehen eines Ankers im Block oder eine Inline-Wegbeschreibung.

position-try-options: flip-block, flip-inline;

Für ein einfaches Spiegeln können Sie diese Keyword-Werte umdrehen und überspringen das Schreiben einer position-try-Definition ganz. Jetzt können Sie mit nur wenigen CSS-Zeilen ein voll funktionsfähiges, standortbezogenes Ankerelement erstellen.

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

Weitere Informationen zur Verwendung der Positionierung von Ankeranzeigen

Die Zukunft der mehrschichtigen UI

Tethering ist überall zu finden. Die in diesem Beitrag vorgestellten Funktionen sind ein guter Anfang, um der Kreativität freien Lauf zu lassen und eine bessere Kontrolle über verankerte Elemente und mehrschichtige Benutzeroberflächen zu erhalten. Aber das ist erst der Anfang. Beispielsweise funktioniert popover derzeit nur mit Schaltflächen als aufrufendes Element oder mit JavaScript. Für Vorschauen im Wikipedia-Stil, ein Muster, das überall im Web zu sehen ist, muss es möglich sein, mit ihnen zu interagieren und ein Pop-over über einen Link und den Nutzer, der Interesse zeigt, ohne dass er darauf klickt, z. B. durch Bewegen des Mauszeigers oder einen Tab-Fokus, auszulösen.

Als nächsten Schritt für die Popover API arbeiten wir an interesttarget, um diese Anforderungen zu erfüllen und es mit den richtigen integrierten Bedienungshilfen einfacher zu machen, diese Inhalte zu reproduzieren. Dies ist ein Problem mit der Barrierefreiheit und es gibt viele offene Fragen zum idealen Verhalten. Die Lösung und Normalisierung dieser Funktionalität auf Plattformebene sollte diese Funktionen für alle verbessern.

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

Dank der Unterstützung der Drittanbieter Keith Cirkel und Luke Warlow steht außerdem ein weiterer zukunftsorientierter General-Aufrufer (invoketarget) zum Testen in Canary zur Verfügung. invoketarget unterstützt die deklarative Entwicklerumgebung, die von popovertarget Pop-overs bereitstellt, die für alle interaktiven Elemente normalisiert sind, darunter <dialog>, <details>, <video> und <input type="file">.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

Uns ist bewusst, dass es einige Anwendungsfälle gibt, die von dieser API noch nicht abgedeckt werden. Beispielsweise können Sie einen Pfeil gestalten, der ein verankertes Element mit seinem Anker verbindet, insbesondere wenn sich die Position des verankerten Elements ändert. Außerdem kann ein Element sich bewegen und im Darstellungsbereich verbleiben, anstatt an einer anderen Position anzudocken, wenn es den Begrenzungsrahmen erreicht. Wir freuen uns also, diese leistungsstarke API einführen zu können, und werden ihre Funktionen in Zukunft weiter ausbauen.

Stilauswahl

Mit popover und anchor hat das Team Fortschritte bei der endgültigen Aktivierung einer anpassbaren Auswahl-Drop-down-Liste gemacht. Die gute Nachricht ist, dass es große Fortschritte gegeben hat. Die schlechte Nachricht ist, dass sich diese API zum jetzigen Zeitpunkt noch in der Testphase befindet. Ich freue mich jedoch, Ihnen einige Live-Demos und Updates zu unseren Fortschritten vorstellen zu können und würde dazu hoffentlich einiges Feedback dazu erhalten. Erstens haben wir Fortschritte bei der Aktivierung der neuen, anpassbaren Auswahlmöglichkeit für Nutzer gemacht. Die aktuelle Methode hierfür ist die Verwendung einer Darstellungseigenschaft in CSS, die auf appearance: base-select festgelegt ist. Nachdem du die Darstellung festgelegt hast, aktivierst du eine neue, anpassbare Auswahlmöglichkeit.

select {
  appearance: base-select;
}

Neben appearance: base-select gibt es einige neue HTML-Updates. Sie haben unter anderem die Möglichkeit, Ihre Optionen zur Anpassung in ein datalist zu verpacken. Außerdem haben Sie die Möglichkeit, den Optionen beliebige nicht interaktive Inhalte wie Bilder hinzuzufügen. Außerdem haben Sie Zugriff auf das neue Element <selectedoption>, das den Inhalt der Optionen abbildet und das Sie dann an Ihre eigenen Bedürfnisse anpassen können. Dieses Element ist wirklich praktisch.

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

Im folgenden Code sehen Sie, wie <selectedoption> in der Gmail-Benutzeroberfläche angepasst werden kann. Ein visuelles Symbol repräsentiert den Antworttyp, der aus Platzgründen ausgewählt wurde. Sie können einfache Darstellungsstile in selectedoption verwenden, um zwischen den verschiedenen Stilen und den Stilen in der Vorabversion zu unterscheiden. In diesem Fall kann der in der Option angezeigte Text im selectedoption optisch verborgen werden.

selectedoption .text {
  display: none;
}

Einer der größten Vorteile bei der Wiederverwendung des <select>-Elements für diese API ist die Abwärtskompatibilität. In dieser Länderauswahl wird dir eine benutzerdefinierte Benutzeroberfläche mit Flaggenbildern in den Optionen angezeigt, damit Nutzer die Inhalte leichter analysieren können. Da nicht unterstützte Browser die Zeilen ignorieren, die sie nicht verstehen, wie die benutzerdefinierte Schaltfläche, die Datenliste, die ausgewählte Option und Bilder in den Optionen, ähnelt das Fallback der aktuellen Standardbenutzeroberfläche für die Auswahl.

<ph type="x-smartling-placeholder">

</ph>

Die anpassbare Auswahl bietet unzählige Möglichkeiten. Besonders gefällt mir die Länderauswahl im Airbnb-Stil, weil das responsive Design so clever ist. Mit der stilisierten Auswahl können Sie dies und noch viel mehr tun, was sie zu einer dringend benötigten Ergänzung zur Webplattform macht.

Exklusives Akkordeon

Das Chrome-Team hat sich nicht nur auf die Lösung ausgewählter Stile und alle Komponenten der Benutzeroberfläche konzentriert. Das erste zusätzliche Komponenten-Update ist die Möglichkeit, exklusive Akkordeons zu erstellen, in denen jeweils nur ein Element im Akkordeon geöffnet werden kann.

Sie können dies aktivieren, indem Sie denselben Namenswert auf mehrere Details-Elemente anwenden und somit eine verbundene Gruppe von Details erstellen, ähnlich wie bei einer Gruppe von Optionsfeldern.

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid und :user-invalid

Eine weitere Verbesserung der UI-Komponente sind die Pseudoklassen :user-valid und :user-invalid. Die Pseudoklassen :user-valid und :user-invalid sind in letzter Zeit in allen Browsern stabil und verhalten sich ähnlich wie die Pseudoklassen :valid und :invalid, stimmen aber erst dann mit einem Formularsteuerelement überein, wenn ein Nutzer signifikant mit der Eingabe interagiert hat. Das bedeutet, dass deutlich weniger Code erforderlich ist, um festzustellen, ob mit einem Formularwert interagiert wurde oder „schmutzig“ geworden ist. Dies kann sehr nützlich sein, um Nutzerfeedback zu geben, und reduziert den Aufwand an Scripting, das in der Vergangenheit dafür erforderlich wäre.

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

Weitere Informationen zur Verwendung von Pseudoelementen der Nutzer*-Formularvalidierung

field-sizing: content

Ein weiteres praktisches Komponentenupdate ist field-sizing: content, das auf Formularsteuerelemente wie Eingaben und Textbereiche angewendet werden kann. Dadurch kann die Größe der Eingabe je nach Inhalt größer oder kleiner werden. field-sizing: content kann besonders praktisch für Textbereiche sein, da Sie nicht mehr zu festen Größen aufgelöst werden und möglicherweise nach oben scrollen müssen, um in einem zu kleinen Eingabefeld zu sehen, was Sie in den vorherigen Teilen Ihres Prompts geschrieben haben.

textarea, select, input {
  field-sizing: content;
}

Weitere Informationen zur Feldgröße

<hr> in <select>

Die Möglichkeit, das horizontale Regelelement <hr> in „selects“ zu aktivieren, ist eine weitere kleine, aber nützliche Funktion. Diese Methode hat zwar wenig semantische Verwendung, hilft Ihnen aber dabei, Inhalte innerhalb einer Auswahlliste deutlich zu trennen, insbesondere Inhalte, die Sie nicht unbedingt mit einer Optgroup (z. B. einem Platzhalterwert) gruppieren möchten.

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

Weitere Informationen zur Verwendung von hr in select

Verbesserungen der Lebensqualität

Wir iterieren kontinuierlich und nicht nur für Interaktionen und Komponenten. Im letzten Jahr gab es viele weitere Updates zur Lebensqualität.

Nesting mit Lookahead

Die native CSS-Verschachtelung wurde letztes Jahr in allen Browsern eingeführt und wurde seither verbessert, um Lookaheads zu unterstützen. Das bedeutet, dass die & vor Elementnamen nicht mehr erforderlich ist. Dadurch fühlt sich das Verschachteln so viel ergonomischer an und ähnelt dem, was ich früher gewohnt habe.

Eines der Dinge, die an der CSS-Verschachtelung besonders gut sind, ist die Möglichkeit, Komponenten visuell zu blockieren. Innerhalb dieser Komponenten sind Status und Modifikatoren enthalten, wie z. B. Containerabfragen und Medienabfragen. Zuvor habe ich es gewohnt, alle diese Abfragen am Ende der Datei zu Gruppierungen zu gruppieren. Jetzt können Sie sie auf sinnvolle Weise direkt neben dem restlichen Code schreiben.

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Inhalt für Blocklayout ausrichten

Eine weitere wirklich schöne Änderung ist die Möglichkeit, Zentrierungsmechanismen wie align-content im Block-Layout zu verwenden. Das bedeutet, dass Sie jetzt Dinge innerhalb eines div-Elements vertikal zentrieren können, ohne ein flexibles oder Rasterlayout anwenden zu müssen, und ohne Nebeneffekte wie das Verhindern der Randminimierung, die Sie von diesen Layoutalgorithmen möglicherweise nicht erwarten würden.

div {
  align-content: center;
}

Textumbruch: Ausgewogen und hübsch

Apropos Layout: Das Textlayout wurde durch die Hinzufügung von text-wrap: balance und pretty deutlich verbessert. text-wrap: balance wird für einen einheitlicheren Textblock verwendet, während text-wrap: pretty sich auf die Reduzierung von Singleton-Elementen in der letzten Zeile des Textes konzentriert.

h1 {
  text-wrap: balance;
}

Weitere Informationen zu Textumbruch: Balance

Internationale Typografie-Updates

Typografische Aktualisierungen des Layouts für CJK-Textelemente wurden im letzten Jahr zahlreiche nette Aktualisierungen erhalten, z. B. die Funktion word-break: auto-phrase, die die Linie an der natürlichen Phrasengrenze umschließt.

<ph type="x-smartling-placeholder">

</ph>

Bei text-spacing-trim wird die Unterschneidung zwischen Satzzeichen angewendet, um die Lesbarkeit von Typografien für Chinesisch, Japanisch und Koreanisch zu verbessern und optisch ansprechendere Ergebnisse zu erzielen.

<ph type="x-smartling-placeholder">

</ph>

Relative Farbsyntax

In der Welt der Farbgestaltung gab es ein großes Update bei der relativen Farbsyntax.

In diesem Beispiel werden für die Farben die auf Oklch basierenden Designs verwendet. Wenn sich der Farbtonwert entsprechend dem Schieberegler anpasst, ändert sich das gesamte Design. Dies kann durch eine relative Farbsyntax erreicht werden. Der Hintergrund verwendet die Primärfarbe basierend auf dem Farbton und passt die Helligkeits-, Farb- und Farbtonkanäle an, um ihren Wert anzupassen. --i ist der gleichgeordnete Index in der Liste für die Abstufung von Werten. Er zeigt, wie Sie Schritte mit benutzerdefinierten Eigenschaften und relative Farbsyntax kombinieren können, um Designs zu erstellen.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

light-dark()-Funktion

Zusammen mit der light-dark()-Funktion sind die Themen wesentlich dynamischer und einfacher geworden.

Die light-dark()-Funktion ist eine ergonomische Verbesserung, die die Optionen für Farbthemen vereinfacht. So können Sie Designstile prägnanter schreiben, wie in diesem visuellen Diagramm von Adam Argyle so gut veranschaulicht. Bisher waren zwei verschiedene Codeblöcke erforderlich (Ihr Standarddesign und eine Abfrage mit den Nutzereinstellungen), um Designoptionen einzurichten. Jetzt können Sie diese Stiloptionen für helle und dunkle Designs mit der Funktion light-dark() in derselben CSS-Zeile schreiben.

<ph type="x-smartling-placeholder">

</ph>

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

Wenn der Nutzer ein helles Design ausgewählt hat, hat die Schaltfläche einen hellblauen Hintergrund. Wenn der Nutzer ein dunkles Design ausgewählt hat, hat die Schaltfläche einen dunkelblauen Hintergrund.

:has()-Auswahl

Außerdem möchte ich gerne auf die moderne Benutzeroberfläche eingehen, ohne eines der wirkungsvollsten Interoperabilität-Highlights des vergangenen Jahres zu erwähnen, nämlich den :has()-Selektor, der im Dezember letzten Jahres in verschiedenen Browsern erschienen ist. Diese API ist ein entscheidender Faktor beim Schreiben logischer Stile.

Mit dem :has()-Selektor können Sie prüfen, ob ein untergeordnetes Element bestimmte untergeordnete Elemente hat oder ob diese untergeordneten Elemente einen bestimmten Status haben und somit auch als übergeordneter Selektor fungieren können.

<ph type="x-smartling-placeholder">

</ph>

:has() hat sich bereits als besonders nützlich für viele Unternehmen erwiesen, einschließlich PolicyBazaar, die :has() verwenden, um Stile für Blöcke basierend auf ihrem Inhalt zu erstellen, z. B. im Vergleichsbereich, bei dem der Stil angepasst wird, wenn es einen Plan für einen Vergleich im Block gibt oder er leer ist.

„Mit dem :has()-Selektor konnten wir die JavaScript-basierte Validierung der Nutzerauswahl eliminieren und durch eine CSS-Lösung ersetzen, die reibungslos funktioniert und die gleiche Erfahrung bietet. – Aman Soni, Tech Lead, PolicyBazaar.“

Containerabfragen

Eine weitere wichtige Neuerung im Web, die inzwischen verfügbar ist und immer häufiger verwendet wird, sind Containerabfragen, die es ermöglichen, die unveränderliche Größe eines übergeordneten Elements abzufragen, um Stile anzuwenden. Dies ist ein viel feinerer Zahn als bei Medienabfragen, bei denen nur die Größe des Darstellungsbereichs abgefragt wird.

Vor Kurzem hat Angular eine ansprechende neue Dokumentationswebsite auf angular.dev veröffentlicht, bei der mithilfe von Containerabfragen die Header-Blöcke an den verfügbaren Platz auf der Seite angepasst werden. Selbst wenn sich das Layout ändert und von einem mehrspaltigen Seitenleistenlayout zu einem einspaltigen Layout wechselt, können sich die Kopfzeilen selbst anpassen.

<ph type="x-smartling-placeholder">

</ph>

Ohne Containerabfragen war eine solche Vorgehensweise ziemlich schwer zu erreichen, was sich negativ auf die Leistung auswirkte, da die Größenänderung von Beobachtern und Elementbeobachtern erforderlich war. Jetzt ist es einfach, ein Element basierend auf seiner übergeordneten Größe zu gestalten.

@property

Und schon bald ist es erfreulich, dass @property in Baseline landen wird. Dies ist eine wichtige Funktion, mit der benutzerdefinierte CSS-Eigenschaften (auch als CSS-Variablen bezeichnet) semantische Bedeutung erhalten. Außerdem ermöglicht sie eine Vielzahl neuer Interaktionsfunktionen. @property ermöglicht außerdem kontextabhängige Bedeutung, Typprüfung, Standardeinstellungen und Fallback-Werte in CSS. Noch mehr robuste Funktionen wie Abfragen im Bereich „Reichweite“ werden geöffnet. Diese Funktion war früher nie möglich und bietet inzwischen so viel Tiefe für die Sprache von CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Fazit

Mit all diesen neuen leistungsstarken UI-Funktionen, die browserübergreifend verfügbar sind, bieten sich unzählige Möglichkeiten. Neue interaktive Erlebnisse mit scrollbaren Animationen und Ansichtsübergängen machen das Web flüssiger und interaktiver auf eine ganz neue Art und Weise. Mit den UI-Komponenten der nächsten Generation ist es einfacher denn je, robuste, perfekt angepasste Komponenten zu erstellen, ohne das gesamte native Erlebnis zu zerreißen. Und schließlich lösen Verbesserungen der Lebensqualität in Architektur, Layout, Typografie und responsivem Design nicht nur die kleinen großen Dinge, sondern geben Entwicklern auch die Tools an die Hand, die sie zum Erstellen komplexer Benutzeroberflächen benötigen, die auf verschiedenen Geräten, Formfaktoren und Anforderungen von Nutzenden funktionieren.

Mit diesen neuen Funktionen sollten Sie Drittanbieter-Scripting für leistungsintensive Funktionen wie Scrollytelling und Tethering-Elemente mit Ankerposition entfernen können, fließende Seitenübergänge erstellen, Drop-down-Menüs gestalten und die Gesamtstruktur Ihres Codes nativ verbessern.

Nie war die Zeit für Webentwickler besser denn je. Seit der Ankündigung von CSS3 gab es nicht mehr so viel Energie und Spannung. Funktionen, die wir gebraucht haben, aber bisher nur davon geträumt haben, werden endlich Realität und Teil der Plattform werden. Und dank deiner Stimme können wir diese Funktionen priorisieren und endlich umsetzen. Wir arbeiten daran, dass sich komplexe und mühsame Dinge einfacher erledigen lassen, damit Sie mehr Zeit für die Entwicklung der wichtigen Dinge haben – wie die Kernfunktionen und Designdetails, die Ihre Marke von anderen abheben.

Wenn Sie mehr über diese neuen Funktionen erfahren möchten, lesen Sie die Informationen unter developer.chrome.com und web.dev. Dort informiert unser Team über die neuesten Webtechnologien. Probieren Sie scrollbare Animationen, Ansichtsübergänge, Ankerpositionierung oder sogar die stilfähige Auswahl aus und teilen Sie uns Ihre Meinung mit. Wir hören Ihnen zu und helfen Ihnen gerne weiter.