Neues in der Web-UI: I/O 2025 – Zusammenfassung

Una Kravets

Veröffentlicht am 14. August 2025

Die Google I/O-Veranstaltungssaison neigt sich dem Ende zu. In diesem Beitrag werden die wichtigsten Highlights für CSS und Web-UI zusammengefasst, die dieses Jahr auf unseren Veranstaltungen vorgestellt wurden.

Unglaublich leistungsstarke Funktionen, von denen Entwickler früher nur geträumt haben, sind in Browsern verfügbar und erreichen schneller als je zuvor die browserübergreifende Kompatibilität. Trotz dieser Fortschritte ist die korrekte Implementierung einiger der häufigsten UI-Muster überraschend schwierig. Oft müssen Sie sich auf JavaScript-Frameworks, komplexe CSS-Tricks und viel benutzerdefinierten Code verlassen, um Komponenten zu erstellen, die eigentlich einfacher sein sollten.

Das Chrome-Team arbeitet mit anderen Browseranbietern, Standardisierungsgremien wie CSSWG und WHATWG sowie Community-Gruppen wie Open UI zusammen, um die Implementierung dieser grundlegenden UI-Muster zu vereinfachen.

Anpassbare Auswahlmenüs

Das <select>-Element ist für Formulare unerlässlich, seine interne Struktur wurde jedoch in der Vergangenheit vom Browser geschützt, was einheitliches und umfassendes CSS-Styling nahezu unmöglich machte. Um ein besseres <select> zu erstellen, müssen Sie die Bausteine verstehen: die Popover API und die CSS Anchor Positioning API.

Die Popover API: Jetzt in Baseline

Für ein benutzerdefiniertes Drop-down-Menü ist ein unverankertes Optionsfeld erforderlich, das über allen anderen UI-Elementen angezeigt wird, sich einfach schließen lässt und den Fokus richtig verwaltet. Die Popover API übernimmt all das. Seit diesem Jahr hat sie den Status „Baseline Newly available“ erreicht, d. h., sie ist in allen wichtigen Browsern stabil.

Zum Erstellen eines Pop-overs sind zwei Teile erforderlich: ein Triggerelement (z. B. ein <button>) und das Pop-over-Element selbst. Verbinden Sie sie, indem Sie dem Pop-over das Attribut id und das Attribut [popover] zuweisen und dann im Attribut [popovertarget] des Buttons auf id verweisen.

Die Popover API verwaltet den gesamten Lebenszyklus des Elements und bietet:

• Rendering der obersten Ebene: Sie müssen sich nicht mehr mit dem Z-Index herumschlagen.
• Optionale Funktionen zum leichten Schließen: Das Pop-over wird geschlossen, wenn ein Nutzer außerhalb des Pop-over-Bereichs klickt.
• Automatische Fokusverwaltung: Der Browser übernimmt die Tab-Navigation in und aus dem Popover.
• Barrierefreie Bindungen: Das zugrunde liegende Interaktionsmodell wird nativ verarbeitet.

Das <dialog>-Element wird aktualisiert

Pop-overs sind zwar leistungsstark, aber nicht immer die richtige Wahl. Bei seitenblockierenden Interaktionen, die Nutzerfeedback erfordern, ist ein Modal <dialog> beispielsweise besser geeignet.

Bisher fehlten in <dialog> einige der praktischen Funktionen von [popover], aber das ändert sich. Mit dem neuen Attribut closedby="any" unterstützen modale Dialogfelder jetzt die Funktion „Light Dismiss“. Sie werden geschlossen, wenn der Nutzer außerhalb des Dialogfelds klickt oder die Esc-Taste drückt.

Außerdem bieten Befehlsaufrufer ([command] und [commandfor]) eine deklarative, JavaScript-kostenlose Möglichkeit, eine Schaltfläche mit einer Aktion zu verknüpfen, z. B. das Öffnen eines Dialogfelds mit command="show-modal".

CSS Anchor Positioning

Wenn ein Pop-over angezeigt wird, muss es relativ zu dem Element positioniert werden, das es geöffnet hat. Die manuelle Berechnung mit JavaScript ist fehleranfällig und kann die Leistung beeinträchtigen.

Ab Chrome 125 können Sie die CSS Anchor Positioning API verwenden. Mit dieser neuen Funktion kann ein Element deklarativ an ein anderes gebunden werden. Die Neupositionierung wird automatisch vorgenommen, wenn es sich dem Bildschirmrand nähert. Diese Funktion ist Teil von Interop 2025, einer browserübergreifenden Initiative zur Einführung häufig gewünschter Funktionen. Wir können also davon ausgehen, dass sie bis Ende 2025 in allen wichtigen Browsern verfügbar sein wird.

Sie können Elemente zwar explizit mit den Eigenschaften anchor-name und position-anchor verknüpfen, aber durch eine Aktualisierung der Spezifikation und in Chrome 133 wird eine implizite Ankerbeziehung zwischen einem <popover> und dem aufrufenden <button> erstellt. Dadurch wird der Code erheblich vereinfacht und Sie können das Popover jetzt mit einer einzigen CSS-Zeile positionieren, z. B. position-area: bottom span-left.

Mit dem Ankertool auf chrome.dev erfahren Sie, wie Sie position-area verwenden, um die gewünschte Platzierung zu erhalten:

Sie können noch einen Schritt weiter gehen und den Browser Ihre Anker neu positionieren lassen, damit sie nicht vom Bildschirm verschwinden. Dazu definieren Sie Fallbacks mit position-try-fallbacks. In der folgenden Demo sehen Sie ein Pop-over, das diese Eigenschaft für die integrierte Neupositionierungslogik verwendet:

Ein wirklich anpassbares <select>

Nachdem diese Bausteine in früheren Versionen eingeführt wurden, ist das webnative Styling für <select>-Elemente nun endlich in Chrome 134 verfügbar. Dazu gehören das neue Attribut appearance, neue Pseudoelemente und das <selectedcontent>-Element.

Um die Anpassung zu ermöglichen, wenden Sie appearance: base-select; auf das <select>-Element und sein neues ::picker(select)-Pseudoelement an, das auf die Drop-down-Liste mit Optionen ausgerichtet ist. Dadurch werden neue interne Teile für das Styling verfügbar, darunter:

• <selectedcontent>: Stellt den Inhalt der ausgewählten Option dar, die auf der Schaltfläche angezeigt wird.
• ::picker-icon: Das Drop-down-Pfeilsymbol
• <option>:checked und ::checkmark: Zum Formatieren der ausgewählten Option und des zugehörigen Häkchens

So können Sie Rich Content in Optionen einfügen und die Darstellung genau steuern. Sie können beispielsweise ein Symbol und einen Untertitel in der Optionsliste anzeigen, aber im geschlossenen Zustand mit display: none innerhalb von selectedcontent ausblenden.

Das Beste daran ist, dass diese API schrittweise verbessert werden kann. In Browsern, die diese Funktionen nicht unterstützen, wird Nutzern weiterhin eine funktionale Auswahl im Web angezeigt. Sie erhalten ein benutzerdefiniertes Erscheinungsbild und behalten gleichzeitig die integrierte Barrierefreiheit, Tastaturnavigation und Formularintegration des webnativen select-Elements bei.

Karussells

Karussells sind überall im Web zu finden, nicht nur in Hero-Bereichen. Dazu gehören auch horizontal scrollbare Inhalte in kompakten Layouts wie der Benutzeroberfläche eines App-Stores. Das Erstellen von Karussells im Web ist jedoch immer noch schwierig, da viele Aspekte wie Statusverwaltung, Scroll-Jank, Interaktivität und Barrierefreiheit berücksichtigt werden müssen. Wenn man genauer darüber nachdenkt, sind Karussells im Grunde nur scrollbare Bereiche mit zusätzlichen UI-Elementen.

Erste Schritte mit Scrollern

Um ein Karussell zu erstellen, beginnen Sie mit einer Liste von Elementen, die ihren Container überlaufen. Wenn Sie die horizontale Scrollleiste ausblenden, aber die Inhalte weiterhin scrollbar halten möchten, verwenden Sie scrollbar-width: none. Damit sich das Scrollen „flüssig“ anfühlt, wenden Sie außerdem scroll-snap-type und scroll-snap-align an. So werden Elemente beim Scrollen des Nutzers eingerastet.

Vorherige und nächste mit einem ::scroll-button

Das neue Pseudoelement ::scroll-button(), das in Chrome 135 eingeführt wurde, weist den Browser an, statusbehaftete, zugängliche Schaltflächen „Weiter“ und „Zurück“ zu generieren. Der Browser kümmert sich automatisch um die richtigen ARIA-Rollen, die Tab-Reihenfolge und deaktiviert die Schaltflächen sogar, wenn Sie den Anfang oder das Ende erreichen – alles ohne zusätzliches JavaScript.

Um die Scroll-Schaltflächen zu initialisieren, müssen Sie ihnen Inhalt und ein zugängliches Label geben:

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

Gestalten Sie diese Schaltflächen und positionieren Sie sie relativ zu ihrem übergeordneten Karussell mit der CSS-Ankerpositionierung. Das ist die empfohlene Vorgehensweise.

Direkte Navigation mit ::scroll-marker

Bei Punktindikatoren oder Thumbnails werden die Navigationsmarkierungen mit den Pseudoelementen ::scroll-marker und ::scroll-marker-group direkt den Elementen in Ihrem Scrollcontainer zugeordnet. Der Browser behandelt die Gruppe wie ein tablist und übernimmt die Tastaturnavigation.

Ähnlich wie bei den Scrollschaltflächen werden die Scrollmarkierungen durch Aktivieren der content-Eigenschaft initiiert. Außerdem muss ein barrierefreies Label angegeben werden. Im folgenden Beispiel wird ein Datenattribut verwendet, um das Label für die Scrollmarkierung festzulegen. Die Scrollmarkierungen werden mit der scroll-marker-group-Eigenschaft in der ::scroll-marker-group positioniert. Die aktive Markierung wird mit der neuen Pseudoklasse :target-current formatiert. Hier ist ein Beispiel dafür, wie das bei einem einfachen Karussell aussehen könnte:

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

Abfragen zum Scrollstatus

Mit den neuen scrollbezogenen CSS-Funktionen lassen sich dynamischere und interaktivere Karussells erstellen. Die scroll-state-Abfrage ist eine neue Media-Abfrage, die je nach Status eines Scrollers angewendet wird. Es gibt drei verschiedene Arten von Scrollstatus-Abfragen, auf die mit scroll-state() in einer @container-Anweisung zugegriffen werden kann. Diese sind:

• scroll-state(snapped): Wird ausgelöst, wenn sich ein Element in der „eingerasteten“ Position befindet. In Karussells ist das der Fall, wenn es in der Mitte des Karussells eingerastet ist.
• scroll-state(stuck): Damit können Sie ein Element wie eine Überschrift formatieren, wenn das übergeordnete Element fixiert wird.
• scroll-state(scrollable): Fügen Sie visuelle Hinweise wie einen Fade-Effekt hinzu, um zu zeigen, dass es weitere Inhalte gibt, zu denen gescrollt werden kann.

Zusammenfassung

Eine Kombination aus neuen CSS-Karussell-Primitiven, Scrollstatusabfragen und Ankerpositionierung erleichtert das Erstellen benutzerdefinierter und interaktiver Karussells. Scrollgesteuerte Animationen gehen noch einen Schritt weiter. Hier werden Animationen direkt mit der Scrollposition verknüpft. So lassen sich leistungsstarke Effekte erzielen, z. B. dass Elemente skaliert und ein- oder ausgeblendet werden, wenn sie in den sichtbaren Bereich gescrollt werden. Diese Animationen werden außerhalb des Haupt-Threads ausgeführt, was für eine flüssige Darstellung sorgt.

Dieses interaktive Karussell kombiniert scroll-state()-Abfragen, ::scroll-button, ::scroll-marker, CSS-Ankerpositionierung und :target-current.

Außerdem können Sie mit der neuen Eigenschaft interactivity dafür sorgen, dass sich Nutzer auf die aktiven Inhalte konzentrieren können. Mit interactivity: inert kann der Nutzer die Inaktivität über CSS anwenden. Dadurch werden Karussellelemente, die sich nicht auf dem Bildschirm befinden, nicht mehr fokussierbar und aus dem Barrierefreiheitsbaum entfernt.

Weitere Informationen zu CSS-Karussells

Interaktive Minikarten

Hovercards – die umfangreichen Pop-ups, die angezeigt werden, wenn Sie den Mauszeiger auf einen Nutzernamen oder Link bewegen – sind unglaublich nützlich, aber notorisch schwierig zu erstellen. Die Verzögerungen, die Ereignisverarbeitung und die Unterstützung für verschiedene Geräte richtig zu implementieren, kann ein engagiertes Team Monate kosten. Wir arbeiten jedoch an einer neuen deklarativen Lösung, die dieses Problem ein für alle Mal lösen soll.

Pop-overs mit [interestfor], die durch Interesse ausgelöst werden

Das [interestfor]-Attribut ist das Herzstück der deklarativen Hovercards. Diese Funktion bietet die Leistungsfähigkeit von Pop-overs, löst sie aber basierend auf dem „Interesse“ des Nutzers aus. Bei einem Zeigegerät kann das beispielsweise ein Hover mit dem Zeiger, die Tab-Navigation mit einer Tastatur oder ein langes Drücken oder Tippen auf Touchscreens sein. Die mobile Interaktion muss noch geklärt werden.

Wenn Sie ein klickbasiertes Pop-over in ein interessenbasiertes Pop-over umwandeln möchten, erstellen Sie ein aufrufendes Element, das ein <button>- oder ein <a>-Element sein kann, und weisen Sie ihm ein [interestfor]-Attribut zu, das dem id des [popover]-Elements entspricht. In HTML sieht das so aus:

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

Der Browser übernimmt die gesamte komplexe Ereignislogik, einschließlich:

• Eintritts- und Austrittsereignisse:Hover-Eintritt auf Geräten mit feinem Zeiger, Tab-Navigation mit der Tastatur, langes Drücken oder Berühren auf Geräten mit grobem Zeiger.
• Verzögerungen bei Ereignissen:Mit einer einzigen CSS-Eigenschaft können Sie die Verzögerungen beim Ein- und Ausblenden steuern.

Dieses Feature unterstützt andere Popover-Funktionen wie die Unterstützung der obersten Ebene, bei der das Popover auf einer neuen Ebene über dem Rest des DOM-Baums gerendert wird. Die semantischen Komponentenbindungen und das zugrunde liegende Barrierefreiheitsbaummodell werden nativ verarbeitet.

Aufrufelemente gestalten

Zu den Funktionen für das Auslösen von Interessen gehören einige neue Möglichkeiten. Eine davon ist die Möglichkeit, Ein- und Ausstiegsverzögerungen mithilfe einer CSS-Eigenschaft zu steuern: interest-target-delay. Die andere ist die Möglichkeit, das auslösende Element basierend darauf zu gestalten, ob es Interesse weckt oder nicht, indem Sie die Pseudoklasse :has-interest verwenden.

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" und multifunktionale Benutzeroberfläche

Ein wichtiger Bestandteil von Interesse weckenden Inhalten ist ein neuer Pop-over-Typ: popover="hint". Der Hauptunterschied zu anderen Pop-overs besteht darin, dass ein Hinweis-Pop-over beim Öffnen keine anderen Pop-overs schließt. Das ist ideal für Tooltips oder Vorschaukarten, die angezeigt werden sollen, ohne dass ein bereits geöffnetes Menü oder Chatfenster geschlossen wird.

So können Sie leistungsstarke, multifunktionale Benutzeroberflächen deklarativ erstellen. Eine einzelne Schaltfläche kann jetzt ein automatisches Pop-over mit popovertarget für die primäre Klickaktion (z. B. zum Öffnen eines Benachrichtigungsfelds) und ein Pop-over mit einem Hinweis zum Aufrufen von Interessen haben, um beim Hovern mit dem Mauszeiger einen hilfreichen Tooltip anzuzeigen.

Die Zukunft ist deklarativ

Die hier behandelten Funktionen stellen eine grundlegende Verlagerung hin zu einer leistungsstärkeren und deklarativen Webplattform dar. Wenn wir dem Browser die komplexe, sich wiederholende Arbeit der Statusverwaltung und Barrierefreiheit überlassen, können wir Unmengen an JavaScript entfernen, die Leistung verbessern und uns auf das konzentrieren, was wir am besten können: innovative und ansprechende Nutzererlebnisse schaffen. Dies ist wirklich ein goldenes Zeitalter für die Web-UI, und es hat gerade erst begonnen. Folgen Sie uns hier, während wir daran arbeiten, ein leistungsstärkeres Web zu schaffen, das einfacher zu bedienen ist.

Weitere Ressourcen:

• Popover API
• Ankerpositionierung
• Anker-Tool
• Befehlsaufrufer
• Anpassbare Auswahlmenüs (RFC)
• Preisvergleichsportal-Karussells
• Karussell-Galerie für Preisvergleichsportale
• Konfigurator für Preisvergleichsportal-Karusselle
• CSS-Abfragen zum Scrollstatus
• Erklärung zu Interest Invokers