Veröffentlicht am 3. Juni 2026
Sofern nicht anders angegeben, gelten die folgenden Änderungen für die neueste Chrome-Betaversion für Android, ChromeOS, Linux, macOS und Windows. Über die bereitgestellten Links oder die Liste auf ChromeStatus.com können Sie mehr über die hier aufgeführten Funktionen erfahren. Chrome ist ab dem 2. Juni 2026 in der Betaphase. Sie können die aktuelle Version für den Computer auf Google.com oder für Android im Google Play Store herunterladen.
CSS und Benutzeroberfläche
Systemfarben AccentColor und AccentColorText
Die Systemfarben AccentColor und AccentColorText können in CSS verwendet werden, um auf die auf dem Gerät des Nutzers angegebene Systemakzentfarbe zuzugreifen. So können Entwickler ihren Webinhalten ein App-ähnliches Design geben, wenn Nutzer eine Integration des Betriebssystemdesigns erwarten, z. B. bei einer installierten Webanwendung. Nutzer müssen sich in einer installierten Webanwendung im ursprünglichen Profil befinden, damit die Systemakzentfarbe gerendert wird.
Optionalen Rundungsparameter für polygon() zulassen
Damit können Sie einen optionalen Parameter für die Eckenrundung in der CSS-Formfunktion polygon() angeben. Entwickler können einen Längenwert angeben, um Polygonecken abzurunden, ohne manuell Bézierkurven berechnen zu müssen.
Animierbarer Zoom
Die CSS-Property zoom kann animiert werden und wird als <number> interpoliert. Entwickler können den Zoom überblenden und animieren, um Elemente und ihr Layout flüssig zu skalieren. Das ist eine Ergänzung zur vorhandenen transform-basierten Skalierung.
Modifikatoren für CSS-URL-Anfragen
CSS-url()-Funktionen akzeptieren optionale Anforderungsmodifizierer nach dem in Anführungszeichen gesetzten URL-String: cross-origin(), integrity() und referrer-policy(). Mit diesen Modifizierern lässt sich das Abrufverhalten der referenzierten Ressource direkt über CSS steuern, ohne dass Änderungen am HTML-Markup oder JavaScript erforderlich sind.
Mit background-image: url("image.png" cross-origin(anonymous)) wird das Bild beispielsweise im anonymen CORS-Modus abgerufen.
CSS-Property text-fit
Passt die Schriftgröße von Textknoten so an, dass sie genau in das umgebende Feld passen.
Mit dieser Eigenschaft können Entwickler dafür sorgen, dass Überschriften oder dynamische Inhalte den verfügbaren horizontalen Platz ausfüllen, ohne dass manuelle Berechnungen der Schriftgröße oder komplexe JavaScript-Workarounds erforderlich sind. Diese Eigenschaft bietet eine robuste, CSS-native Lösung für responsive Typografie, die die visuelle Ausrichtung bei verschiedenen Bildschirmgrößen und unterschiedlichen Textlängen beibehält.
Preisvergleichsportal background-clip: border-area
Implementiert den Wert border-area für die CSS-Eigenschaft background-clip, wie in CSS Backgrounds Level 4 definiert. Der Wert background-clip beschneidet den Hintergrund eines Elements auf den Bereich, der durch seine Rahmenstriche dargestellt wird. Dabei werden border-width und border-style berücksichtigt, die Transparenz von border-color wird jedoch ignoriert. Mit diesem Wert können Sie Verlaufsränder ohne „border-image“ erstellen.
CSS-image(<color>)-Funktion
Mit der Funktion image() können Entwickler ein einfarbiges Bild aus einer beliebigen Farbe generieren.
Die Syntax lautet: image() = image( <color> ).
CSS-light-dark() mit Bildwerten
Erweitert die CSS-Funktion light-dark(), sodass Bildwerte wie url(), image-set() und none in Stylesheets für Autoren akzeptiert werden. So können Bildeigenschaften wie background-image, list-style-image, border-image-source, cursor und content automatisch zwischen Bildern wechseln, je nach dem bevorzugten Farbschema des Nutzers.
Bisher war dieses Verhalten nur in User-Agent-Stylesheets zulässig. Diese Änderung entspricht der CSS Color 5-Spezifikation und der vorhandenen Implementierung von Firefox.
In alle untergeordneten selectedcontent-Elemente klonen
Es werden einige kleine Änderungen an Grenzfällen des selectedcontent-Elements vorgenommen:
- Wenn mehrere
selectedcontent-Elemente gleichzeitig in ein<select>-Element eingefügt werden, werden alle auf dem neuesten Stand gehalten und nicht nur das erste in der DOM-Reihenfolge. - Das Aktualisieren des
selectedcontent-Elements wird verschoben, wenn es während des Einfügens, Entfernens oder Verschiebens ausgeführt wird, um Sicherheitsprobleme zu beheben. Das Update wird mithilfe von Schritten nach dem Einfügen oder Mikrotasks verzögert.
Kommagetrennte Containerabfragen
Unterstützt mehrere Abfragen pro @container-Regel. Die @container-Regel wird angewendet, wenn mindestens eine der Abfragen übereinstimmt.
So können Sie beispielsweise Fallback-Abfragen für Funktionen erstellen, die nicht in allen Browsern unterstützt werden.
Beispiel:
@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}
Neben der Unterstützung mehrerer Abfragen wird das Objektmodell erweitert, um das Attribut conditions in der CSSContainerRule API zu unterstützen.
Nicht druckbare Bereiche für CSS verfügbar machen
Drucker haben in der Regel an jeder der vier Kanten eines Blatts Papier einen kleinen Bereich, der nicht zuverlässig bedruckt werden kann. Das liegt meist am Papierhandhabungsmechanismus des Druckers. Die Standardseitenränder sind in der Regel größer als diese Bereiche. Wenn Autoren jedoch eigene Ränder festlegen und beispielsweise @page-Randfelder für benutzerdefinierte Kopf- und Fußzeilen hinzufügen möchten, benötigen sie eine Möglichkeit, um zu bestimmen, wo es sicher ist, zu drucken.
Mit dem CSS-Deskriptor page-margin-safety können Sie solche nicht druckbaren Bereiche vermeiden.
Das Attribut focusgroup
Damit können Autoren zusammengesetzten Widgets deklarativ die Navigation mit den Pfeiltasten, einen garantierten Tabstopp und die Speicherung des zuletzt fokussierten Elements zuweisen. So werden manuell codierte Roving-Tabindex-Scripts ersetzt. Beispiel:
<div focusgroup="toolbar wrap" aria-label="Formatting">
<button>Bold</button>
<button>Italic</button>
<button>Underline</button>
</div>
Pseudoklassen für Media-Elemente
Die CSS-Pseudoklassen :playing, :paused, :seeking, :buffering, :stalled, :muted und :volume-locked entsprechen <audio>- und <video>-Elementen basierend auf ihrem Status.
Dieses Feature ist einer der Schwerpunkte von Interop 2026.
popover=hint Änderungen beim Verhalten
Mit dieser Änderung wird ein überarbeitetes und vereinfachtes Stapelmodell für das Attribut popover=hint und seine Interaktionen mit popover=auto eingeführt. Bisher konnten die Interaktionen zwischen diesen beiden Arten von Pop-ups in einigen Grenzfallsituationen komplex sein, z. B. beim Verschachteln von popover=auto in popover=hint, und zu unerwartetem Verhalten führen. Im neuen Modell wird durch das Öffnen eines popover=hint nicht mehr versehentlich ein nicht zugehöriges popover=auto geschlossen. Hinweis-Pop-ups werden nur ausgeblendet, wenn das übergeordnete popover=auto ausgeblendet wird oder wenn ein neues, nicht zugehöriges popover=auto geöffnet wird. Außerdem können Entwickler ein Auto-Pop-up sicher in ein Hinweis-Pop-up einbetten. Anstatt eine Ausnahme auszulösen oder den Stapel zu unterbrechen, wird das eingebettete popover=auto ordnungsgemäß herabgestuft und verhält sich wie ein popover=hint. Mit dieser Funktion können Entwickler ein anpassbares <select> in ein popover=hint einfügen.
Um die Vorhersagbarkeit weiter zu verbessern und komplexe Statusänderungen zu verhindern, wird das Verhalten beim Öffnen und Schließen von Popovers über das beforetoggle-Ereignis in Chrome eingeschränkt. Bisher gab es Schutzmaßnahmen für einige, aber nicht für alle möglichen Fälle. Durch diese Änderung wird der Mechanismus zur Erkennung dieser Fälle überarbeitet, um in allen Fällen zuverlässiger InvalidStateErrors auszulösen. Diese Änderung sorgt dafür, dass die Verwaltung des Popover-Zustands stabil bleibt und verhindert Reentrancy-Bugs in Schleifen.
Diese Änderungen wurden durch Standardgespräche mit Mozilla in der HTML-Spezifikations-Pull-Anfrage auf GitHub motiviert.
Relative Alpha-Farben
Relative Alphafarben bieten eine direkte CSS-Methode, um eine durchscheinende Version einer vorhandenen Farbe abzuleiten, ohne die Farbkanäle neu zu schreiben.
Derzeit müssen Entwickler Komponentenwerte duplizieren oder separate vorkonfigurierte Tokens erstellen, wenn sie dieselbe Farbe mit unterschiedlicher Deckkraft verwenden möchten.
Die CSS Color 5-Funktion alpha() behält die ursprünglichen Farbkomponenten bei und ändert nur den Alphawert. Das reduziert den Aufwand für die Erstellung und macht es einfacher, Farb-Tokens wiederzuverwenden und zu verwalten.
Responsiv – Größe <iframe>
Ermöglicht es Websites, responsive Größen für iFrames zu aktivieren. Dadurch wird die Größe des <iframe>-Elements im übergeordneten Dokument an die Überlaufgröße des Layouts des iFrame-Dokuments angepasst, um das Scrollen im untergeordneten Dokument zu vermeiden.
flex-wrap:balance
Mit flex-wrap:balance können Entwickler Inhalte auf Flex-Zeilen verteilen, sodass sie ausgewogener erscheinen, ähnlich wie bei text-wrap:balance.
named-feature()-Funktion für CSS @supports
Mit der Funktion named-feature() können CSS-@supports-Regeln eine kleine Gruppe bestimmter benannter Funktionen abfragen, die mit anderen @supports-Mechanismen nicht getestet werden können, für die Tests aber als sehr wichtig gelten.
overscroll-behavior: chain
overscroll-behavior hat drei Werte: none, auto und contain. Diese Werte wirken sich auf zwei unabhängige Effekte aus: die Scroll-Weiterleitung und den lokalen Randeffekt. Zum Beispiel das Overscroll-Stretching.
none: keine Scroll-Weiterleitung, keine lokalen Grenzeneffekte.auto: Scroll-Weitergabe, lokale Grenzeneffekte.contain: Keine Scroll-Weitergabe, lokale Grenzeneffekte.
Mit dieser Version wird ein neuer Wert erfasst, um den Satz zu vervollständigen: chain: Scroll-Weiterleitung, keine lokalen Grenzeneffekte.
Dieser Wert ist nützlich für Effekte wie Seitenmenüs, die als Scroller implementiert sind. Sie können das Menü einblenden. Wenn es den Rand erreicht, wird es nicht übermäßig gescrollt oder gestreckt und verschoben. Der Scrollvorgang wird dann jedoch an das übergeordnete Element weitergeleitet.
Web APIs
SVG-Filter für Plug-ins und ursprungsübergreifende oder eingeschränkte iFrames deaktivieren
In Chrome 150 wird verhindert, dass SVG-Filter (Scalable Vector Graphics) auf ursprungsübergreifende oder eingeschränkte iFrames, z. B. in der Sandbox, und eingebettete Plug-ins, z. B. PDFs, angewendet werden. Wenn ein Frame oder Plug-in mit einem SVG-Filtereffekt gerendert wird, wird der Effektbaum durchlaufen, um den höchsten Vorfahren ohne SVG-Filter zu finden. Dieser Effekt wird dann stattdessen angewendet.
IndexedDB: SQLite-Backend
Die IndexedDB-Implementierung von Chromium wird auf SQLite neu geschrieben, um die vorherige Implementierung zu ersetzen, die eine Kombination aus LevelDB und Flatfiles verwendet. Diese Änderung hat keine Auswirkungen auf die Web-API.
Durch die Umstellung sollen Zuverlässigkeit und in geringerem Maße auch die Leistung verbessert werden.
Diese Änderung gilt vorerst für neue Datenspeicher. Sie ist Schritt 2 einer mehrphasigen progressiven Einführung. Schritt 1 wird auf der ChromeStatus-Funktionsseite für SQLite-In-Memory-Kontexte verfolgt.
MediaStreamTrackProcessor Frame-Zähler
Fügt der MediaStreamTrackProcessor-Schnittstelle die Attribute discardedFrames und totalFrames hinzu. Mit diesen Zählern können Webentwickler den Zustand ihrer Media-Verarbeitungspipelines überwachen, indem sie die Anzahl der vom Prozessor empfangenen und verworfenen Frames erfassen.
Intransparenter Ursprung für data:-URLs
In Chrome 150 wird die Verarbeitung von data:-URLs durch DedicatedWorker und SharedWorker aktualisiert. Anstatt automatisch den Sicherheitsursprung des Skripts oder der Seite zu übernehmen, mit dem bzw. der sie erstellt wurden, wird diesen Workern ein eindeutiger intransparenter Ursprung zugewiesen.
Diese Änderung entspricht der HTML-Spezifikation für Web Worker und verbessert die Sicherheit, indem diese Web Worker vom Same-Origin-Status des Erstellers isoliert werden. So wird verhindert, dass sie über Mechanismen wie BroadcastChannel oder Same-Origin-Speicher auf vertrauliche Daten zugreifen. Um die richtigen Isolierungsgrenzen beizubehalten, befinden sich diese Worker weiterhin in derselben Speicherpartition (z. B. durch Beibehalten der Website auf oberster Ebene oder des Nonce) wie ihr Ersteller.
Diese Sicherheitsanpassung ist standardmäßig auf Desktop- und Mobilplattformen aktiviert. Administratoren können Sicherheitsgrenzen über ihre zentralen Konfigurationen überprüfen oder bestätigen. Technische Implementierungsdetails und Spezifikationsreferenzen finden Sie in Schritt 3 der HTML Living Standard Worker Settings.
Migration von PWA-Ursprüngen
Wenn ein Nutzer eine progressive Web-App (PWA) installiert, sind ihre Identität und ihr Sicherheitskontext eng mit ihrem Webursprung verknüpft, z. B. app.example.com.
Diese Bindung stellt eine erhebliche Herausforderung für Entwickler dar, die den Ursprung ihrer PWA aufgrund von Rebranding, Umstrukturierung der Domain oder technischer Umgestaltung ändern müssen. Eine solche Änderung zwingt Nutzer, die alte App manuell zu deinstallieren und die neue App neu zu installieren. Das kann zu einer schlechten Nutzererfahrung und potenziellen verlorenen Nutzern führen. In Chrome 150 wird ein Mechanismus eingeführt, mit dem Entwickler eine installierte PWA zu einem neuen Ursprung auf derselben Website migrieren können, wobei das Vertrauen der Nutzer und die Berechtigungen erhalten bleiben.
Die Richtlinie WebAppInstallForceList verhindert die Migration. Da Unternehmensrichtlinien für Webanwendungen hauptsächlich auf URLs und Ursprüngen basieren, besteht das Risiko, dass bei einer Migration bestimmte Richtlinien umgangen werden, die ein Administrator konfiguriert hat. Chrome bietet Nutzern keine Migration an, wenn eine App von ihrem Unternehmensadministrator zwangsinstalliert wird. Stattdessen wird ein Banner angezeigt, in dem dies erklärt wird.
Verarbeitungsanweisungen in HTML parsen
Verarbeitungsanweisungen (Syntax: <?target data>) sind ein vorhandenes DOM-Konstrukt, das in XML verfügbar gemacht wird und mit dem Knotenobjekte, die keine Elemente sind, aber eine semantische Bedeutung für die Verarbeitung eines Dokuments haben können, definiert werden.
Sie können damit beispielsweise Bereiche für das Streaming oder Hervorheben angeben, ohne dass neue DOM-Elemente erforderlich sind und sich die DOM-Struktur in Bezug auf CSS ändert. Außerdem können Sie sie als Anweisungen für den HTML-Parser verwenden, um das Puffern und Streamen zu steuern.
Streaming in beliebiger Reihenfolge
Mit Out-of-Order-Streaming können Sie <template for> und Bereiche mit Verarbeitungsanweisungen (<?start> und <?end>) verwenden, um HTML in nicht sequenzieller Reihenfolge zu liefern und vorhandene Teile des Dokuments ohne JavaScript zu aktualisieren.
Programmatische Scroll-Versprechen
Diese Funktion bietet ein zuverlässiges Signal für den Abschlussstatus eines programmatischen sanften Scrollens. Alle Scrollmethoden in Element und Window geben Promise-Objekte zurück, die nach Abschluss des Scrollvorgangs aufgelöst werden. Der aufgelöste Wert gibt an, ob der Scrollvorgang unterbrochen wurde.
WebGPU Immediates
Fügt einen neuen unmittelbaren Adressraum in WGSL und eine setImmediateData()-Methode für Renderpass-, Compute-Pass- und Render-Bundle-Encoder hinzu, mit der kleine Mengen häufig aktualisierter Daten direkt an Shader übergeben werden können, ohne GPU-Pufferobjekte oder Bindungsgruppen zu erstellen. Dies ist besonders nützlich für Anwendungen, die Parameter pro Draw-Aufruf aktualisieren müssen, z. B. Objekt- oder Materialindexe oder Transformationsmatrizen. So lassen sich erhebliche Leistungssteigerungen erzielen, da der Aufwand für die Verwaltung von Puffern und Bindungsgruppen entfällt.
Web Speech API: Qualität der Erkennung auf dem Gerät
Erweitert die SpeechRecognition-Schnittstelle durch Hinzufügen einer quality-Property zu SpeechRecognitionOptions. Mit dieser Property können Entwickler die semantische Funktion angeben, die für die Erkennung auf dem Gerät erforderlich ist, indem sie processLocally: true verwenden.
Das vorgeschlagene quality-Enum unterstützt drei Stufen: command, dictation und conversation. Diese entsprechen einer zunehmenden Aufgabenkomplexität und Hardwareanforderungen.
Mit dieser Funktion können Entwickler feststellen, ob das lokale Gerät anspruchsvolle Anwendungsfälle wie die Transkription von Besprechungen bewältigen kann oder ob sie auf Cloud-Dienste zurückgreifen müssen. So wird die Unübersichtlichkeit der On-Device-Modellfunktionen behoben.
Neue Ursprungstests
In Chrome 150 können Sie die folgenden neuen Ursprungstests aktivieren.
E-Mail-Bestätigungsprotokoll (EVP)
Das E-Mail-Bestätigungsprotokoll (EVP) hilft Nutzern, Konten zu erstellen, darauf zuzugreifen und sie wiederherzustellen. Dazu wird nahtlos ein kryptografischer Eigentumsnachweis erbracht, anstatt E-Mail-OTPs manuell einzugeben.
Einstellung und Entfernung
In dieser Version von Chrome werden die folgenden Einstellungen und Entfernungen eingeführt.
[LegacyNoInterfaceObject] aus der FontFaceSet-IDL entfernen
In der FontFaceSet-IDL von Chromium wurde zuvor fälschlicherweise [LegacyNoInterfaceObject] verwendet, wodurch FontFaceSet als globale Eigenschaft ausgeblendet und die Konstruktoreigenschaft aus dem Prototyp gelöscht wurde. Dieses Verhalten wich von der CSS Font Loading-Spezifikation ab und unterschied sich von Safari und Firefox.
Durch diese Entfernung wird [LegacyNoInterfaceObject] aus der FontFaceSet-IDL entfernt, sodass FontFaceSet ordnungsgemäß als globale Property zugänglich ist. Da in der IDL kein constructor() definiert ist, wird beim Aufrufen von FontFaceSet() aus JavaScript korrekt TypeError: Illegal constructor ausgegeben, was dem in der Spezifikation vorgeschriebenen Verhalten entspricht.