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

Una Kravets

Veröffentlicht: 14. August 2025

Die Google I/O-Saison neigt sich dem Ende zu. In diesem Beitrag finden Sie eine Zusammenfassung der wichtigsten Highlights zu CSS und Web-UI, 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 jedoch immer noch ü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, aber seine interne Struktur wurde 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.

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] der Schaltfläche auf id verweisen.

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

• Rendering der obersten Ebene: Z-Index-Konflikte gehören der Vergangenheit an.
• Optionale Light Dismiss-Funktionen: Das Popover wird geschlossen, wenn ein Nutzer außerhalb des Popover-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

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

Bisher fehlten bei <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 wird ein Element deklarativ an ein anderes gebunden. Die Neupositionierung wird automatisch vorgenommen, wenn sich das Element dem Bildschirmrand nähert. Diese Funktion ist Teil von Interop 2025, einer browserübergreifenden Initiative zur Einführung häufig nachgefragter Funktionen. Wir gehen davon aus, dass sie bis Ende 2025 in allen wichtigen Browsern verfügbar sein wird.

Sie können Elemente zwar explizit mit den Attributen 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 zugehörigen <button> erstellt. Dadurch wird der Code erheblich vereinfacht. Sie können das Pop-over jetzt mit einer einzigen CSS-Zeile positionieren, z. B. position-area: bottom span-left.

Im Ankertool auf chrome.dev wird gezeigt, wie Sie position-area verwenden, um die gewünschte Platzierung zu erzielen:

Sie können den Browser auch dazu bringen, Ihre Anker neu zu positionieren, damit sie nicht außerhalb des Bildschirms liegen. Dazu definieren Sie Fallbacks mit position-try-fallbacks. Im folgenden Demobeispiel wird ein Pop-over gezeigt, 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 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äkchensymbols

So können Sie Optionen mit Rich Content erstellen und die Darstellung präzise 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 native Webauswahl 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 „schnell“ 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 ::scroll-button()-Pseudoelement, das in Chrome 135 eingeführt wurde, weist den Browser an, statusbehaftete, barrierefreie Schaltflächen „Weiter“ und „Zurück“ zu generieren. Der Browser kümmert sich automatisch um die richtigen ARIA-Rollen und die Tab-Reihenfolge und deaktiviert sogar die Schaltflächen, wenn Sie den Anfang oder das Ende erreichen – alles ohne zusätzliches JavaScript.

Um die Scrollschaltflä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 zum übergeordneten Karussell mit der CSS-Ankerpositionierung. Das ist die empfohlene Vorgehensweise.

Direkte Navigation mit ::scroll-marker

Bei Punktindikatoren oder Thumbnails werden die Pseudoelemente ::scroll-marker und ::scroll-marker-group verwendet, um Navigationsmarkierungen direkt mit den Elementen im Scrollcontainer zu verknüpfen. Der Browser behandelt die Gruppe wie ein tablist und übernimmt die Tastaturnavigation.

Ähnlich wie bei Scrollschaltflächen müssen Sie die Scrollmarkierungen mit dem Attribut content aktivieren und ein zugängliches Label angeben. Im folgenden Beispiel wird ein Datenattribut verwendet, um das Label für die Scrollmarkierung festzulegen. Außerdem müssen Sie die Scrollmarkierungen mit der Property scroll-marker-group im ::scroll-marker-group positionieren. Zum Schluss können Sie die aktive Markierung mit der neuen Pseudoklasse :target-current gestalten. Hier ist ein Beispiel für ein einfaches Karussell:

.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. Bei Karussells ist das der Fall, wenn das Bild in der Mitte des Karussells angezeigt wird.
• 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 ein Fade-out 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. Mit scrollgesteuerten Animationen können Sie Animationen direkt mit der Scrollposition verknüpfen und so 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 ein flüssiges Nutzererlebnis sorgt.

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

Außerdem können Sie die neue Property interactivity verwenden, damit sich Nutzer auf die aktiven Inhalte konzentrieren. Mit interactivity: inert kann der Nutzer mit CSS die Inaktivität anwenden. Dadurch werden Karussell-Elemente außerhalb des sichtbaren Bildschirmbereichs nicht mehr fokussierbar und aus dem Barrierefreiheitsbaum entfernt.

Weitere Informationen zu CSS-Karussells

Interaktive Kurzinfos

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 mehrerer Geräte richtig zu implementieren, kann ein eigenes Team Monate kosten. Wir arbeiten jedoch an einer neuen deklarativen Lösung, die dieses Problem ein für alle Mal beheben soll.

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

Das Attribut[interestfor]ist das Herzstück der deklarativen Kurzinfos. Diese Funktion bietet die Vorteile von Pop-overs, löst sie aber basierend auf dem „Interesse“ des Nutzers aus. Das Nutzerinteresse an einem Zeigegerät kann sich beispielsweise in einem Mouse-Over, einer Tab-Navigation mit einer Tastatur oder einem langen Drücken oder Tippen auf Touchscreens äußern. Die mobile Interaktion muss noch behoben 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> sein kann, und weisen Sie ihm ein [interestfor]-Attribut zu, das dem id des [popover]-Elements entspricht. So sieht das in HTML aus:

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

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

Der Browser verarbeitet 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.
• Ereignisverzögerungen:Mit einer einzigen CSS-Eigenschaft können Sie die Ein- und Ausstiegsverzögerungen 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.

Aufrufer gestalten

Für die Auslöser für Interessen gibt es einige neue Funktionen. Eine davon ist die Möglichkeit, Ein- und Ausstiegsverzögerungen mit einer CSS-Property zu steuern: interest-target-delay. Außerdem lässt sich das aufrufende Element mithilfe der Pseudoklasse :has-interest formatieren, je nachdem, ob es Interesse weckt oder nicht.

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

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

popover="hint" und multifunktionale Benutzeroberfläche

Ein wichtiger Baustein für Interesse weckende Inhalte 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 für die primäre Klickaktion (z. B. zum Öffnen eines Benachrichtigungsbereichs) mit popovertarget und ein Pop-over mit einem Hinweis zum Aufrufen von Interessen haben, um einen hilfreichen Tooltip beim Bewegen des Mauszeigers einzublenden.

Die Zukunft ist deklarativ

Die hier behandelten Funktionen stellen eine grundlegende Änderung 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. Wir befinden uns in einem goldenen Zeitalter für Web-UIs und das ist erst der Anfang. Hier erfahren Sie, wie wir ein leistungsstarkes und noch nutzerfreundlicheres Web schaffen.

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
• Erläuterung von Interest Invokers