Chrome 148 Beta

Rachel Andrew

Veröffentlicht: 8. April 2026

Sofern nicht anders angegeben, gelten die folgenden Änderungen für die neueste Chrome-Betaversion für Android, ChromeOS, Linux, macOS und Windows. Weitere Informationen zu diesen Funktionen finden Sie unter den angegebenen Links oder auf ChromeStatus.com. Chrome befindet sich ab dieser Version in der Betaphase. Sie können die aktuelle Betaversion für den Desktop unter Google.com oder für Android im Google Play Store herunterladen.

CSS und Benutzeroberfläche

Nur Namen enthaltende Containerabfragen in CSS

Sie können jetzt einen CSS-Container nur anhand seines container-name abfragen, ohne ein container-type für das Element festzulegen.

#container {
  container-name: --foo;
}
@container --foo {
  input { background-color: green; }
}

<div id="container">
  <div><input></div>
</div>

Textüberlauf bei Nutzerinteraktion abschneiden

Wenn ein Nutzer mit Text interagiert, für den text-overflow: ellipsis festgelegt ist (z. B. durch Bearbeiten oder Verwenden der Cursorsteuerung), wird der Text vorübergehend von Auslassungspunkten zu „clip“ geändert. So können Nutzer die ausgeblendeten Inhalte im Überlauf sehen und mit ihnen interagieren. Diese Funktion gilt für alle bearbeitbaren und nicht bearbeitbaren Elemente. Für Formularsteuerelemente wie <textarea> und <input> wird dieses Verhalten bereits unterstützt.

`dropEffect` für `dragEnter`-, `dragLeave`- und `dragOver`-Ereignisse richtig festlegen

Die Drag-and-drop-Spezifikationen erfordern, dass das Attribut dropEffect des dataTransfer-Objekts bestimmte vordefinierte Werte für dragEnter, dragOver und dragLeave hat. dragEnter und dragOver sollten einen dropEffect basierend auf dem aktuellen effectAllowed haben. dragLeave sollte immer eine none dropEffect haben. Derzeit werden diese Regeln in Chrome nicht eingehalten. Ab Chrome 148 werden die korrekten Werte für dieses Attribut zugewiesen.

Lazy Loading von Video- und Audioelementen

Mit dieser Funktion wird das Attribut loading den Elementen <video> und <audio> hinzugefügt. So können Entwickler das Laden von Media-Ressourcen mit loading="lazy" verzögern, bis sich das Element in der Nähe des Darstellungsbereichs befindet. Das entspricht dem vorhandenen Lazy Loading-Verhalten für <img>- und <iframe>-Elemente, wodurch die Seitenladeleistung verbessert und die Datennutzung reduziert wird.

CSS-`at-rule()`-Funktion zur Erkennung von Funktionen

Mit dieser Funktion wird der CSS-Funktion @supports die Funktion at-rule() hinzugefügt, mit der Autoren die Unterstützung für CSS-At-Regeln erkennen können.

Das Keyword `revert-rule` hinzufügen

Mit dem Keyword revert-rule wird die Kaskade auf die vorherige Regel zurückgesetzt, ähnlich wie mit revert-layer die Kaskade auf die vorherige Ebene zurückgesetzt wird. Beispiel:

div { color: green; }
div { color: revert-rule; /* Effectively green */ }

Das ist besonders bei Bedingungen nützlich, da Sie die aktuelle Regel entfernen können, wenn eine Bedingung nicht erfüllt ist:

div {
  display: if(style(--layout: fancy): grid; else: revert-rule);
}

`text-decoration-skip-ink: all` unterstützen

Mit dieser Funktion wird der Wert all für die CSS-Eigenschaft text-decoration-skip-ink unterstützt. Das Attribut text-decoration-skip-ink unterstützt bereits auto und none. Der Wert all erweitert dies, indem das Überspringen von Tinte bedingungslos auf alle Glyphen angewendet wird, einschließlich CJK-Zeichen. Im Gegensatz dazu werden CJK-Zeichen bei auto nicht übersprungen, da das Überspringen von Tinte bei typischen Unterstreichungspositionen in der Regel zu unerwünschten visuellen Ergebnissen für ideografische Schriftarten führt. Mit text-decoration-skip-ink: all können Autoren, die text-underline-position oder text-underline-offset angepasst haben, um Konflikte mit CJK-Glyphen zu vermeiden, die Funktion „Tinte überspringen“ für diese Zeichen explizit aktivieren.

Web APIs

Manifestelemente lokalisieren

Diese Funktion unterstützt die Lokalisierung von Manifestmitgliedern, sodass Apps ihre Namen, Beschreibungen, Symbole und Verknüpfungen an die Sprache und Region des Nutzers anpassen können. Entwickler geben lokalisierte Werte im Web-App-Manifest an. Der Browser wählt automatisch die entsprechenden Ressourcen basierend auf den Spracheinstellungen des Nutzers aus. So wird die Sprachunterstützung in verschiedenen Märkten eingeführt.

Unterstützung von Open Font Format `avar2` für die Textgestaltung und das Rendern von Glyphen

Mit Version 2 der Tabelle avar (Achsenvariationen) können Schriftartdesigner variable Schriftarten mit besserer Kontrolle über die Interpolation erstellen. Während in der ursprünglichen Spezifikation für variable Schriftarten Achsen unabhängig voneinander behandelt werden, können sie sich mit avar2 gegenseitig beeinflussen. So können Schriftarten einfacher von Autoren verwendet werden und lassen sich kompakt speichern.

Avar2 funktioniert mit den bekannten Konzepten von Schriftvariationen, ermöglicht es Ihnen aber, variable Deltawerte auf die Designachsen selbst anzuwenden. Das ist für eine Reihe von Achsen möglich.

Sie können beispielsweise Meta-Schieberegler erstellen, mit denen sich mehrere Variationsachsen gleichzeitig steuern lassen. So muss der Nutzer nicht mehr selbst nach einer geeigneten Ecke im Designraum der Schrift suchen.

Mit Avar2 haben Schriftgestalter mehr Kontrolle über den nutzbaren Variationsbereich ihrer Schriftart und können die Anpassung von Designachsen über mehrere Achsen hinweg koordinieren. Durch die mathematische Definition der Beziehungen zwischen Achsen in der avar-Version 2-Tabelle können Schriftarten komplexe Designs mit weniger Master-Schriften erreichen. Das führt zu kleineren Dateigrößen, da die Interpolation effizienter gespeichert wird.

Sofort-UI-Modus für die Webauthentifizierung

In diesem neuen Modus für navigator.credentials.get() wird die Anmelde-UI des Browsers dem Nutzer angezeigt, wenn dem Browser sofort ein Passkey oder Passwort für die Website bekannt ist. Andernfalls wird das Promise mit NotAllowedError abgelehnt, wenn keine solchen Anmeldedaten verfügbar sind. So kann die Website die Anzeige einer Anmeldeseite vermeiden, wenn der Browser eine Auswahl von Anmeldedaten anbieten kann, mit denen die Anmeldung wahrscheinlich gelingt. Es ist weiterhin ein Anmeldeseitenablauf für Fälle möglich, in denen keine solchen Anmeldedaten vorhanden sind.

Unterstützung der Web Serial API unter Android

Die Web Serial API bietet eine Schnittstelle zum Herstellen einer Verbindung zu seriellen Geräten. Diese Geräte können über einen seriellen Port auf dem System des Nutzers oder über Wechsel-USB- und Bluetooth-Geräte verbunden werden, die einen seriellen Port emulieren. Die API wird jetzt auf Android unterstützt.

Nutzer, insbesondere in den Bereichen Bildung, Hobby und Industrie, schließen Peripheriegeräte an ihre Computer an, für die benutzerdefinierte Software zur Steuerung erforderlich ist. So werden Roboter beispielsweise häufig eingesetzt, um Schülern Programmieren und Elektronik beizubringen. Dazu ist Software erforderlich, mit der Code auf einen Roboter hochgeladen oder der Roboter per Fernzugriff gesteuert werden kann. In einem industriellen oder Hobby-Umfeld wird ein Gerät wie eine Fräse, ein Laserschneider oder ein 3D-Drucker von einem Programm gesteuert, das auf einem angeschlossenen Computer ausgeführt wird. Diese Geräte werden oft über eine serielle Verbindung von kleinen Mikrocontrollern gesteuert.

WebGPU-Funktion `linear_indexing`

Durch diese Funktion werden zwei neue integrierte Compute-Shader-Werte hinzugefügt, um die Nutzerfreundlichkeit zu verbessern. Diese Werte werden für alle Back-Ends implementiert (als Polyfills vorhandener integrierter Werte).

`SharedWorker`-Unterstützung auf Android

SharedWorker ist auf Android-Geräten schon seit Langem deaktiviert, da der Prozesslebenszyklus unvorhersehbar ist. Die Chrome-Entwickler gingen davon aus, dass SharedWorker-Instanzen unerwartet beendet werden könnten, ohne dass Nutzer oder Webentwickler benachrichtigt werden. Das wurde als inakzeptabel eingestuft.

Eine aktuelle Diskussion auf GitHub deutet jedoch darauf hin, dass die Unvorhersehbarkeit des Prozesslebenszyklus von SharedWorker möglicherweise nicht so problematisch ist wie bisher angenommen. Aus diesem Grund wird SharedWorker in Chrome für Android wieder aktiviert. Gleichzeitig wird das Verhalten untersucht, um eine stabile und zuverlässige Nutzung zu gewährleisten.

Verlängerte Lebensdauer für SharedWorker

Mit diesem Update wird dem SharedWorker-Konstruktor die neue Option extendedLifetime: true hinzugefügt. Dadurch wird angefordert, dass der Shared Worker auch dann aktiv bleibt, wenn alle aktuellen Clients entladen wurden. Der primäre Anwendungsfall besteht darin, dass Seiten asynchrone Aufgaben ausführen können, für die JavaScript erforderlich ist, nachdem eine Seite entladen wurde, ohne dass ein Service Worker erforderlich ist.

Prompt API

Die Prompt API bietet Webentwicklern direkten Zugriff auf ein vom Browser bereitgestelltes On-Device-KI-Sprachmodell. Das API-Design bietet eine detaillierte Steuerung, die an Cloud-API-Formen ausgerichtet ist. So können Sie Websites schrittweise mit Modellinteraktionen verbessern, die auf individuelle Anwendungsfälle zugeschnitten sind. Dies ergänzt aufgabenbasierte APIs für Sprachmodelle (z. B. die Summarizer API) sowie verschiedene APIs und Frameworks für die allgemeine On-Device-Inferenz mit von Entwicklern bereitgestellten ML-Modellen. Die erste Implementierung unterstützt Text-, Bild- und Audioeingaben sowie Antwortbeschränkungen, die dafür sorgen, dass generierter Text den vordefinierten regulären Ausdrucks- und JSON-Schema-Formaten entspricht.

Dies unterstützt eine Vielzahl von Anwendungsfällen. Das Modell kann beispielsweise Bildunterschriften generieren, visuelle Suchen durchführen, Audio transkribieren, Klangereignisse klassifizieren, Text gemäß bestimmten Anweisungen generieren und Informationen oder Statistiken aus multimodalen Quellen extrahieren.

Diese API wurde bereits in Chrome-Erweiterungen eingeführt. Mit dieser Intention wird der Versand im Web verfolgt. Mit der Unternehmensrichtlinie GenAILocalFoundationalModelSettings kann das Herunterladen des zugrunde liegenden Modells deaktiviert werden. Diese API ist dann nicht mehr verfügbar. Unternehmensadministratoren können auch die Richtlinie BuiltInAIAPIsEnabled festlegen, um die Verwendung der integrierten KI-APIs zu blockieren, während andere On-Device-Funktionen für generative KI weiterhin zulässig sind.

Protokoll zur Sprachunterstützung:

In Chrome 139 und früher wurde nur Englisch ('en') unterstützt.
In Chrome 140 wurde Unterstützung für Spanisch und Japanisch ('es' und 'ja') hinzugefügt.

Funktionen für die Bestätigung sicherer Zahlungen erhalten

Mit dieser Funktion wird der Payment Request API eine neue statische Methode hinzugefügt, mit der Webentwickler die Funktionen der Browserimplementierung von Secure Payment Confirmation abrufen können. So können Webentwickler herausfinden, welche Funktionen für die sichere Zahlungsbestätigung verfügbar sind. Sie können dann entscheiden, ob sie die Funktion „Sichere Zahlungsbestätigung“ mit diesen Funktionen verwenden möchten.

IDNA-ContextJ-Regeln

IDNA ist der Mechanismus für Nicht-ASCII-Zeichen in Domainnamen. Dabei wird eine URL wie http://네이버.한국/ als http://xn--950bt9s8xi.xn--3e0b707e/ codiert (eine Weiterleitung zu naver.com).

Durch die URL-Spezifikation wird das Flag CheckJoiners festgelegt, wodurch die ContextJ-Regeln in IDNA2008 aktiviert werden. Dadurch werden ZWNJ (U+200C ZERO WIDTH NON-JOINER) und ZWJ (U+200D ZERO WIDTH JOINER) an den meisten Stellen in URLs nicht zugelassen. Bei der Implementierung wird die Option UIDNA_CHECK_CONTEXTJ an ICU übergeben, wo diese Regel implementiert ist.

„no-store“-Bilder bei Neuzuweisung desselben Quell-Attributs wiederverwenden

Mit dieser Funktion kann die Wiederverwendung von Bildern im selben Dokument das Neuladen von Cache-Control: no-store umgehen, wenn derselbe src-Wert einem <img>-Element neu zugewiesen wird. Bisher hat Blink das Bild noch einmal abgerufen, obwohl es bereits dekodiert und im Dokument verfügbar war. Dies entspricht dem bestehenden Verhalten von Gecko und WebKit.

Feld `contentType` zu „Ressourcen-Timing“ hinzufügen

Mit dieser Funktion wird das Feld contentType zu PerformanceResourceTiming hinzugefügt, um einen String zu speichern, der dem Inhaltstyp der abgerufenen Ressource entspricht, wie vom Server zurückgegeben.

Pointer-Ereignisse beim Ziehen unterdrücken

Gemäß der HTML-Spezifikation sollte der User-Agent beim Starten eines Drag-and-Drop-Vorgangs die entsprechenden Ereignisse an die Drag-Quelle senden, um anzugeben, dass der Pointer-Ereignisstream beendet wurde und keine weiteren Ereignisse von diesem Pointer erwartet werden. Dieser Code wurde teilweise für Mausereignisse und vollständig für Touch-Drag-Vorgänge unter Android implementiert. Mit dieser Funktion soll diese Spezifikationsanforderung in Chrome auf allen anderen Plattformen vollständig erfüllt werden. In der Praxis bedeutet das, dass die Drag-Quelle nach dem Starten eines Drag-Vorgangs die Ereignisse pointercancel, pointerout und pointerleave empfängt, um anzuzeigen, dass der aktuelle Ereignisstream abgeschlossen ist.

WebRTC-Datachannel: Datenchannels immer aushandeln

Diese Funktion implementiert eine WebRTC-Erweiterung, alwaysNegotiateDataChannels, die eine Möglichkeit für eine Anwendung definiert, Datenkanäle in einem SDP-Angebot auszuhandeln, bevor ein Datenkanal erstellt wird. Außerdem wird der m=-Abschnitt vor allen Audio- oder Video-m-Abschnitten ausgehandelt und als „vom Anbieter getaggter m=-Abschnitt“ für [BUNDLE] verwendet.

Wenn Sie also ein RTCPeerConnection mit alwaysNegotiateDataChannels: true erstellen und dann createOffer() aufrufen, wird ein Angebot mit einer Anwendung-M-Zeile im SDP erstellt. Beispiel:

  const pc = new RTCPeerConnection({
    alwaysNegotiateDataChannels: true});
  const offer = await pc.createOffer();

Wenn Sie auch einen Audio-Transceiver und einen Datenkanal hinzufügen, wird im Angebot eine Anwendungs-m-Zeile gefolgt von einer Audio-m-Zeile im SDP ausgehandelt:

  const pc = new RTCPeerConnection({
    alwaysNegotiateDataChannels: true});
  pc.addTransceiver('audio');
  pc.createDataChannel('somechannel');
  const offer = await pc.createOffer();

Neue Ursprungstests

In Chrome 148 können Sie die folgenden neuen Ursprungstests aktivieren.

Agentic Federated Login

Eine Reihe von FedCM-Erweiterungen, mit denen sich Nutzer in Agent-Browsern sicher mit ihren föderierten Konten auf Websites anmelden können.

Zulassungslisten für Verbindungen

Mit der Funktion „Verbindungs-Zulassungslisten“ können Sie externe Endpunkte explizit steuern, indem Sie Verbindungen einschränken, die über die Fetch API oder andere Webplattform-APIs aus einem Dokument oder Worker initiiert werden. Bei der vorgeschlagenen Implementierung wird eine Liste autorisierter Endpunkte vom Server über einen HTTP-Antwortheader verteilt. Bevor der User-Agent eine Verbindung im Namen einer Seite herstellt, wird das Ziel anhand dieser Zulassungsliste geprüft. Verbindungen zu bestätigten Endpunkten sind zulässig, während Verbindungen, die nicht mit den Einträgen in der Liste übereinstimmen, blockiert werden.

Container-Timing

Mit der Container Timing API können Sie überwachen, wann annotierte Abschnitte des DOM auf dem Bildschirm angezeigt werden und das erste Rendern abgeschlossen ist. Sie können Unterabschnitte des DOM mit dem Attribut containertiming markieren (ähnlich wie elementtiming für die Element Timing API) und Leistungseinträge erhalten, wenn dieser Abschnitt zum ersten Mal gerendert wurde. Mit dieser API können Sie das Timing verschiedener Komponenten auf Ihren Seiten messen.

Deklarative CSS-Modulskripts

Deklarative CSS-Modul-Skripts sind eine Erweiterung der vorhandenen skriptbasierten CSS-Modul-Skripts. Sie ermöglichen es Entwicklern, deklarative Stylesheets mit Shadow Roots, einschließlich deklarativer Shadow Roots, freizugeben. Entwickler können Inline-Stilmodule mit <style type="module" specifier="foo"> definieren und ein deklaratives Modul auf ein deklaratives Shadow-DOM anwenden, indem sie auf specifier oder eine URL wie <template shadowrootmode="open" shadowrootadoptedstylesheets="foo"> verweisen.

HTML-in-Canvas

HTML-in-canvas ist eine neue API, mit der Sie DOM-Elemente direkt in einem Canvas oder einer WebGL-/WebGPU-Textur rendern können, ohne die Interaktivität und Barrierefreiheit der Inhalte zu beeinträchtigen. Es besteht aus drei Teilen: einem Attribut zum Aktivieren von Canvas-Elementen (layoutsubtree), Methoden zum Zeichnen untergeordneter Elemente (2d: drawElementImage, webgl:texElementImage2D, webgpu: copyElementImageToTexture) und einer Möglichkeit, die Transformation des Elements auf dem Bildschirm für die Interaktivität richtig zu aktualisieren.

Dauer des Long Animation Frames-Stils

Mit diesem Feature werden der Long Animation Frame API styleDuration- und forcedStyleDuration-Informationen hinzugefügt. So können Entwickler zwischen Stil- und Layoutzeiten unterscheiden.

`OpaqueRange`

OpaqueRange steht für einen Live-Textbereich innerhalb des Werts eines Formularsteuerelements (z. B. ein <textarea> oder Text <input>), sodass Entwickler mit Werttext mithilfe von bereichsähnlichen APIs arbeiten können.

Sie ermöglicht Vorgänge wie getBoundingClientRect(), getClientRects() und die Verwendung mit der CSS Highlights API für Benutzeroberflächen wie Inline-Vorschläge, Hervorhebungen und verankerte Pop-overs. Die Kapselung wird beibehalten, da nur Wert-Offsets verfügbar gemacht werden (und für startContainer und endContainer „null“ zurückgegeben wird). DOM-Endpunkte und die interne Struktur werden also nicht verfügbar gemacht.

Verarbeitungsanweisungen in HTML parsen

Verarbeitungsanweisungen (Syntax: <?target data>) sind ein vorhandenes DOM-Konstrukt, das in XML verfügbar ist. Mit diesem Konstrukt können Knotenobjekte, die keine Elemente sind, eine semantische Bedeutung für die Verarbeitung eines Dokuments haben. Sie können damit beispielsweise Bereiche für das Streaming oder Hervorheben kennzeichnen, ohne dass neue DOM-Elemente erforderlich sind und die DOM-Struktur in Bezug auf CSS geändert werden muss. Sie können auch als Anweisungen für den HTML-Parser verwendet werden, um zu steuern, wie gepuffert und gestreamt werden soll.

Berechtigungsrichtlinie: focus-without-user-activation

Mit dieser Richtlinie können Einbettende den programmatischen Fokus von eingebetteten Inhalten über die focus-without-user-activation-Berechtigungsrichtlinie steuern. Wenn die Richtlinie für einen Frame abgelehnt wird, werden programmatische Fokusaufrufe (element.focus(), autofocus, window.focus(), dialog.showModal() und Pop-over-Fokus) blockiert, sofern sie nicht durch die Aktivierung durch den Nutzer ausgelöst werden. Vom Nutzer initiierter Fokus, z. B. durch Klicken oder Tabben, ist davon nicht betroffen. Sie können die Richtlinie über einen HTTP-Antwortheader Permissions-Policy oder das Attribut iframe allow festlegen. Die Fokusdelegierung wird unterstützt. Ein übergeordneter Frame mit Fokus kann den Fokus programmatisch an einen untergeordneten iFrame übergeben, auch wenn die Richtlinie für den untergeordneten iFrame abgelehnt wurde. Sobald ein Frame den Fokus hat, kann er den Fokus innerhalb seines eigenen Unterbaums verschieben.

Sampling-Parameter der Prompt API

Mit diesem Feature werden der Prompt API Sampling-Parameter hinzugefügt. Mit diesen Parametern wird gesteuert, wie Tokens aus dem Modell ausgewählt werden. So können Entwickler die Kreativität oder Zufälligkeit der Ausgabe steuern. Außerdem werden der LanguageModel-Instanz Attribute hinzugefügt, um die festgelegten Werte zu lesen. Außerdem wird eine statische LanguageModel-Funktion hinzugefügt, um die Standard- und Maximalwerte dieser Parameter abzurufen. Bei der ersten Implementierung werden die Parameter temperature und topK hinzugefügt.

HTML-Installationselement für Web-Apps

Mit diesem Feature können Websites Nutzer deklarativ auffordern, eine Web-App zu installieren. Das Element akzeptiert optional zwei Attribute, mit denen Sie Inhalte aus einem anderen Ursprung installieren können.

Chrome 148 Beta Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.