Übergänge ansehen: Vererben von mehr Animationseigenschaften

Chrom 140
Stabiles Veröffentlichungsdatum: 2. September 2025

CSS
CSS typisierte Arithmetik
Mit typisierter Arithmetik können Sie in CSS Ausdrücke wie calc(10em / 1px) oder calc(20% / 0.5em * 1px) schreiben. Dies ist z. B. in der Typografie nützlich, da Sie damit einen getippten Wert in einen nicht getippten umwandeln und ihn für nummernübernehmende Eigenschaften wiederverwenden können. Ein weiterer Anwendungsfall ist die Multiplikation eines einheitenlosen Wertes mit einem anderen Typ. Zum Beispiel können Sie jetzt von Pixeln in Grad umrechnen.

CSS-Eigenschaft caret-animation
Chromium unterstützt die Animation der Eigenschaft caret-color. Bei der Animation stört jedoch das standardmäßige Blinkverhalten des Carets die Animation.

Die CSS-Eigenschaft caret-animation hat zwei mögliche Werte: auto und manual. auto bedeutet Browser-Standard (blinkend), und manual bedeutet, dass der Entwickler die Animation des Carets steuert. Darüber hinaus können Benutzer, die sich durch blinkende oder blitzende Bilder gestört fühlen, das Blinken mit einem Benutzer-Stylesheet deaktivieren.

highlightsFromPoint API
Mit der API highlightsFromPoint können Entwickler mit benutzerdefinierten Hervorhebungen interagieren. Sie erkennt, welche Hervorhebungen an einem bestimmten Punkt innerhalb eines Dokuments vorhanden sind. Diese Interaktivität ist wertvoll für komplexe Web-Features, bei denen sich mehrere Hervorhebungen überschneiden oder im Schatten-DOM existieren können. Durch die präzise punktbasierte Erkennung von Hervorhebungen ermöglicht die API den Entwicklern, dynamische Interaktionen mit benutzerdefinierten Hervorhebungen effektiver zu verwalten. So können Entwickler beispielsweise auf Benutzerklicks oder Hover-Ereignisse auf hervorgehobenen Regionen reagieren, um benutzerdefinierte Tooltips, Kontextmenüs oder andere interaktive Funktionen auszulösen.

ScrollIntoView-Container-Option
Die Containeroption ScrollIntoViewOptions ermöglicht es Entwicklern, eine scrollIntoView-Operation durchzuführen, die nur den nächstgelegenen Vorgänger-Container scrollt. Das folgende Snippet scrollt beispielsweise nur den Scrollcontainer von target, um target in die Ansicht zu bringen, aber es scrollt nicht alle Scrollcontainer zum Viewport:

Ansichtsübergänge: Weitere Animationseigenschaften vererben
Fügt weitere Animationseigenschaften hinzu, die über den Pseudobaum der Ansichtsübergänge vererbt werden können:

• animation-timing-function
• animation-iteration-count
• animation-direction
• animation-play-state

**Ansichtsübergangs-Pseudos erben animation-delay.
Zusätzlich zur vorherigen Aktualisierung wird die Eigenschaft animation-delay nun über den Pseudo-Baum des Ansichtsübergangs vererbt.

Verschachtelte Gruppen von Ansichtsübergängen
Mit dieser Funktion können Ansichtsübergänge einen verschachtelten Pseudo-Elementbaum statt eines flachen Baums erzeugen. Dadurch kann der Ansichtsübergang besser mit seinen ursprünglichen Elementen und seiner visuellen Absicht übereinstimmen. Sie ermöglicht das Ausschneiden, verschachtelte 3D-Transformationen und die korrekte Anwendung von Effekten wie Deckkraft, Maskierung und Filter.

Overscroll-Verhalten des Ansichtsfensters von der Wurzel aus weitergeben
Mit dieser Änderung wird das Overscroll-Verhalten von der Wurzel anstelle des Körpers weitergegeben.

Die CSS-Arbeitsgruppe hat beschlossen, die Eigenschaften nicht von der Wurzel aus weiterzugeben.

auf das Ansichtsfenster zu übertragen. Stattdessen werden die Eigenschaften des Ansichtsfensters vom Root-Element () weitergegeben. Daher sollte sich das Overscroll-Verhalten vom Root-Element aus fortpflanzen. Chrome hat jedoch seit langem ein Problem: Es überträgt das Overscroll-Verhalten vom Root-Element und nicht vom Root-Element. Dieses Verhalten ist nicht interoperabel mit anderen Browsern. Durch diese Änderung erfüllt Chrome die Spezifikation und wird mit anderen Implementierungen interoperabel.

CSS counter() und counters() in alt text of content property
Diese Funktion fügt die Möglichkeit hinzu, counter() und counters() im Alt-Text der Inhaltseigenschaft zu verwenden. Dies liefert aussagekräftigere Informationen zur Verbesserung der Barrierefreiheit.

CSS scroll-target-group-Eigenschaft
Die Eigenschaft scroll-target-group gibt an, ob es sich bei dem Element um einen Container für eine Scrollmarkierungsgruppe handelt. Sie nimmt einen der folgenden Werte an:

'none': Das Element stellt keinen Scrollmarker-Gruppencontainer dar.
'auto': Das Element erstellt einen Scrollmarker-Gruppencontainer, der eine Scrollmarker-Gruppe bildet, die alle Scrollmarker-Elemente enthält, für die dies der nächste Vorgänger des Scrollmarker-Gruppencontainers ist.
Durch die Einrichtung eines Scrollmarker-Gruppen-Containers werden alle Anker-HTML-Elemente mit einem Fragment-Identifikator, die sich innerhalb eines solchen Containers befinden, zum HTML-Äquivalent von ::scroll-marker-Pseudo-Elementen. Das Ankerelement, dessen Scroll-Ziel gerade zu sehen ist, kann mit der Pseudoklasse :target-current gestaltet werden.

Unterstützung des Deskriptors font-variation-settings in der @font-face-Regel
Mit CSS können Entwickler Gewicht, Breite, Neigung und andere Achsen einer Schriftart mithilfe der Eigenschaft font-variation-settings für einzelne Elemente anpassen. Chromium-basierten Browsern fehlt jedoch die Unterstützung für diese Eigenschaft in @font-face-Deklarationen. Diese Funktion unterstützt die stringbasierte Syntax für font-variation-settings, wie sie in CSS Fonts Level 4 definiert ist. Ungültige oder nicht erkannte Feature-Tags werden laut Spezifikation ignoriert. Es werden keine binären oder nicht standardisierten Formen unterstützt. Variable Schriftarten werden sowohl aus Gründen der Leistung als auch der typografischen Flexibilität immer häufiger eingesetzt. Das Hinzufügen von Unterstützung für diesen Deskriptor in Chromium verbessert die Kontrolle, reduziert Wiederholungen und unterstützt einen skalierbaren, modernen Ansatz für die Web-Typografie.

DOM
Quellattribut ToggleEvent
Das Quellattribut eines ToggleEvents enthält das Element, das das ToggleEvent ausgelöst hat, falls zutreffend. Klickt ein Benutzer beispielsweise auf ein <button>-Element mit dem popovertarget- oder commandfor-Attribut, um ein Popover zu öffnen, wird das Quellattribut des ToggleEvents, das auf dem Popover ausgelöst wird, auf das aufrufende Element gesetzt

Isolierte Webanwendungen (IWAs)
Controlled Frame API (nur für IWAs verfügbar)
Diese Funktion fügt eine API für kontrollierte Rahmen hinzu, die nur für isolierte Webanwendungen (IWAs) verfügbar ist. Wie ähnlich benannte APIs auf anderen Plattformen ermöglicht Controlled Frame das Einbetten aller Inhalte, auch von Drittanbieterinhalten, die nicht in <iframe> eingebettet werden können. Controlled Frame ermöglicht auch die Steuerung eingebetteter Inhalte mit einer Sammlung von API-Methoden und Ereignissen. Weitere Informationen über isolierte Webanwendungen

JavaScript
Uint8Array nach und von base64 und hex
Base64 ist eine gängige Methode zur Darstellung beliebiger Binärdaten als ASCII. JavaScript hat Uint8Arrays für Binärdaten. Es fehlt jedoch ein eingebauter Mechanismus, um diese Daten als base64 zu kodieren, oder um base64-Daten zu nehmen und ein entsprechendes Uint8Array zu erzeugen. Diese Funktion fügt die Fähigkeit und Methoden zur Konvertierung zwischen Hex-Strings und Uint8Arrays hinzu

Änderung des Zeitpunkts für die Anzeige des beendeten Versprechens
Die aktuelle Zeitsteuerung für fertige Versprechen erfolgt innerhalb der Rendering-Lebenszyklusschritte. Das bedeutet, dass Code, der als Ergebnis der Versprechensauflösung ausgeführt wird, nach dem visuellen Frame, der den Ansichtsübergang aufhebt, erzeugt wurde. Dies kann zu einem Flackern am Ende der Animation führen, wenn das Skript Stile verschiebt, um einen visuell ähnlichen Zustand zu erhalten. Mit dieser Änderung wird das Problem behoben, indem die Schritte zur Bereinigung des Ansichtsübergangs so verschoben werden, dass sie asynchron ausgeführt werden, nachdem der Lebenszyklus abgeschlossen ist.

Web-APIs
Option "min" für ReadableStreamBYOBReader
Diese Funktion führt eine min-Option für die bestehende Methode ReadableStreamBYOBReader.read(view) ein. Die Methode akzeptiert bereits einen ArrayBufferView, in den sie Daten einliest, garantiert aber derzeit nicht, wie viele Elemente geschrieben werden, bevor der Lesevorgang abgeschlossen ist. Durch die Angabe eines Mindestwerts können Sie verlangen, dass der Stream wartet, bis mindestens so viele Elemente verfügbar sind, bevor er den Lesevorgang auflöst. Dadurch wird das derzeitige Verhalten verbessert, bei dem Lesevorgänge mit weniger Elementen aufgelöst werden können, als die Ansicht aufnehmen kann.

Get Installed Related Apps API auf dem Desktop
Die API "Get Installed Related Apps" (navigator.getInstalledRelatedApps) bietet Sites Zugriff darauf, ob ihre entsprechenden verwandten Anwendungen installiert sind. Sites dürfen diese API nur verwenden, wenn die Anwendung mit dem Webursprung verknüpft ist.

Die API wurde in Chrome 80 für Android eingeführt. Zusätzliche Unterstützung für Webanwendungen auf dem Desktop wurde in Chrome 140 aktiviert.

Http-Cookie-Präfix
In einigen Fällen ist es wichtig, auf der Serverseite zwischen Cookies, die vom Server gesetzt werden, und solchen, die vom Client gesetzt werden, zu unterscheiden. Ein solcher Fall sind Cookies, die normalerweise immer vom Server gesetzt werden. Unerwarteter Code (z. B. ein XSS-Exploit, eine bösartige Erweiterung oder ein Commit eines verwirrten Entwicklers) könnte sie jedoch auf dem Client setzen. Dieser Vorschlag fügt ein Signal hinzu, das es Servern ermöglicht, eine solche Unterscheidung zu treffen. Genauer gesagt definiert er die Präfixe Http und HostHttp, die sicherstellen, dass ein Cookie nicht auf der Client-Seite durch ein Skript gesetzt wird.

Dienst worker
SharedWorker-Skript erbt Controller für Blob-Skript-URL
Die Spezifikation besagt, dass Worker Controller für die Blob-URL erben sollten. Der bestehende Code erlaubt jedoch nur dedizierten Workern, den Controller zu erben; gemeinsam genutzte Worker tun dies nicht. Dies korrigiert das Verhalten von Chrome, damit es mit der Spezifikation übereinstimmt. Die Unternehmensrichtlinie SharedWorkerBlobURLFixEnabled steuert diese Funktion.

Add ServiceWorkerStaticRouterTimingInfo
Dieses Feature fügt Timing-Informationen für die ServiceWorker Static Routing API hinzu, die in der Navigations-Timing-API und der Ressourcen-Timing-API für Entwickler zur Verfügung stehen. ServiceWorker bietet Zeitinformationen, um bestimmte Zeitpunkte zu markieren.

Dieses Feature fügt zwei Teile der Static Routing API-relevanten Timing-Informationen hinzu:

• RouterEvaluationStart: Zeitpunkt des Beginns des Abgleichs einer Anfrage mit registrierten Router-Regeln.
• CacheLookupStart: Zeitpunkt des Beginns der Suche im Cache-Speicher, wenn die Quelle "Cache" ist.
  Zusätzlich fügt diese Funktion zwei Informationen über die Router-Quelle hinzu: die übereinstimmende Router-Quelle und die endgültige Router-Quelle.

Ursprungsversuche
Benachrichtigungen über eingehende Anrufe aktivieren
Diese Funktion erweitert die Benachrichtigungs-API, damit installierte PWAs Benachrichtigungen über eingehende Anrufe senden können - Benachrichtigungen mit Schaltflächen im Anruf-Stil und einem Klingelton. Diese Erweiterung unterstützt VoIP-Webanwendungen bei der Erstellung ansprechenderer Erlebnisse, indem sie es den Benutzern erleichtert, Anrufbenachrichtigungen zu erkennen und zu beantworten. Darüber hinaus hilft diese Funktion dabei, die Lücke zwischen nativen und Web-Implementierungen von Anwendungen zu schließen, die beides haben.

Schlüsselwert-API für Absturzberichte
Mit dieser Funktion wird eine neue Schlüsselwert-API eingeführt, vorläufig window.crashReport, die durch eine Zuordnung pro Dokument unterstützt wird und Daten enthält, die an Absturzberichte angehängt werden.

Die Daten, die in dieser API-Map gespeichert sind, werden im CrashReportBody gesendet, wenn ein Renderer-Prozess auf der Website abstürzt. Auf diese Weise können Entwickler herausfinden, welcher spezifische Zustand in ihrer Anwendung einen bestimmten Absturz verursacht haben könnte.

Zufügen des Clipboardchange-Ereignisses
Das clipboardchange-Ereignis wird immer dann ausgelöst, wenn eine Webanwendung oder eine andere Systemanwendung den Inhalt der Systemzwischenablage ändert. Dies ermöglicht Webanwendungen wie Remote-Desktop-Clients, ihre Zwischenablage mit der Systemzwischenablage zu synchronisieren. Es bietet eine effiziente Alternative zum Abfragen der Zwischenablage mit JavaScript auf Änderungen.

SharedWorker auf Android aktivieren
Die seit langem bestehende Nachfrage nach SharedWorker-Unterstützung auf Android geht auf mehrere von Webentwicklern geäußerte Bedürfnisse zurück:

Gemeinsame Nutzung von Ressourcen und Effizienz: Entwickler möchten eine einzige WebSocket- oder Server-Sent Events (SSE)-Verbindung über mehrere Registerkarten hinweg gemeinsam nutzen und so Ressourcen sparen.
Persistente Ressourcenverwaltung: Es besteht die Anforderung, Ressourcen über mehrere Registerkarten hinweg gemeinsam zu nutzen und aufrechtzuerhalten, insbesondere für Technologien wie WASM-basiertes SQLite.
Schließung einer Funktionslücke: Andere große mobile Browser, darunter Safari auf iOS und Firefox auf Android, unterstützen SharedWorker bereits, sodass Chrome auf Android der letzte große Browser ist, der diese Lücke schließt.

Entfernungen
Zweck: Prefetch-Header von Prefetches und Prerenders nicht mehr senden
Prefetches und Prerender verwenden jetzt den Sec-Purpose-Header, daher wird der alte Purpose: prefetch-Header entfernt.

Dies wird auf Spekulationsregeln prefetch, Spekulationsregeln prerender, <link rel="prefetch"></link>, und Chromium's Nicht-Standard

Spezielle Schriftgrößenregeln für H1 innerhalb einiger Elemente abschaffen
Die HTML-Spezifikation enthält eine Liste von Sonderregeln für

Tags, die in <article>, <aside>, <nav> oder <section> Tags verschachtelt sind:

Diese Sonderregeln sind veraltet, da sie Probleme mit der Zugänglichkeit verursachen. Sie reduzieren nämlich die Schriftgröße für verschachtelte #-Elemente, so dass sie wie ##-Elemente "aussehen", aber nichts im Zugänglichkeitsbaum spiegelt diese Herabstufung wider.