Chrome 148 Beta

Rachel Andrew

Veröffentlicht: 8. April 2026

Sofern nicht anders angegeben, gelten die folgenden Änderungen für die neueste Version der Chrome-Betaversion für Android, ChromeOS, Linux, macOS und Windows. Weitere Informationen zu diesen Funktionen finden Sie über die angegebenen Links oder auf ChromeStatus.com. Chrome befindet sich zum Zeitpunkt dieser Veröffentlichung in der Betaphase. Sie können die aktuelle Betaversion für Computer von Google.com oder für Android aus dem Google Play Store herunterladen.

CSS und UI

Nur-Name-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 Caret-Navigation), wechselt der Text vorübergehend von „ellipsis“ zu „clip“. So kann der Nutzer den ausgeblendeten Überlauf-Inhalt sehen und damit interagieren. Diese Funktion gilt für alle bearbeitbaren und nicht bearbeitbaren Elemente. Bei Formularsteuerelementen 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 Objekts dataTransfer 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 einen dropEffect vom Typ none haben. Derzeit hält sich Chrome nicht an diese Regeln. Ab Chrome 148 wird die Spezifikation berücksichtigt und diesem Attribut werden die richtigen Werte zugewiesen.

Lazy Loading von Video- und Audioelementen

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

CSS-Funktion at-rule() zur Featureerkennung

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

Keyword revert-rule hinzufügen

Mit dem Schlüsselwort 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 so 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

Diese Funktion fügt Unterstützung für den Wert all für die CSS-Eigenschaft text-decoration-skip-ink hinzu. Die Property text-decoration-skip-ink unterstützt bereits auto und none. Der Wert all erweitert dies, indem er das Überspringen von Tinte bedingungslos auf alle Glyphen anwendet, einschließlich CJK-Zeichen. Im Gegensatz dazu werden bei auto CJK-Zeichen nicht übersprungen, da das Überspringen von Tinte bei ideografischen Schriften an typischen Unterstreichungspositionen zu unerwünschten visuellen Ergebnissen 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, explizit das Überspringen von Tinte für diese Zeichen aktivieren.

Web APIs

Manifestmitglieder lokalisieren

Diese Funktion unterstützt die Lokalisierung von Manifestelementen, sodass Apps ihre Namen, Beschreibungen, Symbole und Verknüpfungen an die Sprache und Region des Nutzers anpassen können. Entwickler geben im Web-App-Manifest lokalisierte Werte 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 ermöglicht.

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

Mit Version 2 der Tabelle avar (Achsenvariationen) können Schriftdesigner variable Schriftarten mit besserer Kontrolle über die Interpolation erstellen. Während die ursprüngliche Spezifikation für variable Schriftarten Achsen unabhängig voneinander behandelt, können sich Achsen bei avar2 gegenseitig beeinflussen. Das Ergebnis sind Schriftarten, die für Autoren von Inhalten einfacher zu verwenden sind und eine kompakte Speicherung ermöglichen.

Avar2 verwendet dieselben vertrauten Konzepte von Schriftvariationen, ermöglicht es Ihnen jedoch, variable Deltawerte auf die Designachsen selbst anzuwenden. Sie können dies über mehrere Achsen hinweg tun.

Sie können beispielsweise Meta-Schieberegler erstellen, mit denen mehrere Variationsachsen gleichzeitig gesteuert werden. So müssen Nutzer nicht mehr mühsam nach einem nützlichen Bereich im Designbereich der Schriftart suchen und diesen optimieren.

Avar2 bietet Schriftdesignern eine bessere Kontrolle über den nutzbaren Variationsbereich ihrer Schriftart und ermöglicht es ihnen, die Anpassung von Designachsen über mehrere Achsen hinweg zu koordinieren. Durch die mathematische Definition der Beziehungen zwischen den Achsen in der avar-Tabelle der Version 2 können Schriftarten mit weniger Mastern komplexe Designs erreichen. Dies führt zu kleineren Dateigrößen, da die Interpolation effizienter gespeichert wird.

Modus „Sofortige UI“ für Webauthentifizierung

Dieser neue Modus für navigator.credentials.get() bewirkt, dass die Benutzeroberfläche für die Browseranmeldung dem Nutzer angezeigt wird, wenn dem Browser ein Passkey oder Passwort für die Website sofort bekannt ist. Andernfalls wird das Promise mit NotAllowedError abgelehnt, wenn keine solchen Anmeldedaten verfügbar sind. So muss die Website keine Anmeldeseite anzeigen, wenn der Browser eine Auswahl von Anmeldedaten anbieten kann, die wahrscheinlich erfolgreich sind. Es ermöglicht weiterhin einen Anmeldeseitenablauf für Fälle, in denen keine solchen Anmeldedaten vorhanden sind.

Unterstützung der Web Serial API unter Android

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

Nutzer, insbesondere im Bildungs-, Hobby- und Industriesektor, verbinden Peripheriegeräte mit ihren Computern, die eine benutzerdefinierte Software zur Steuerung erfordern. Beispielsweise wird Robotik häufig verwendet, um Computerprogrammierung und Elektronik in Schulen zu unterrichten. Dazu ist Software erforderlich, mit der Code auf einen Roboter hochgeladen oder der Roboter ferngesteuert werden kann. In einer industriellen oder hobbymäßigen Umgebung wird ein Gerät wie eine Fräse, ein Laserschneider oder ein 3D-Drucker von einem Programm gesteuert, das auf einem verbundenen Computer ausgeführt wird. Diese Geräte werden oft von kleinen Mikrocontrollern über eine serielle Verbindung gesteuert.

WebGPU-linear_indexing-Funktion

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

SharedWorker-Unterstützung unter Android

SharedWorker war lange Zeit auf Android deaktiviert, da es Bedenken hinsichtlich des unvorhersehbaren Prozesslebenszyklus gab. Chrome-Entwickler waren der Ansicht, dass SharedWorker-Instanzen möglicherweise unerwartet beendet werden, ohne Nutzer oder Webentwickler zu benachrichtigen. Das war inakzeptabel.

Eine aktuelle Diskussion auf GitHub legt jedoch nahe, dass die Unvorhersehbarkeit des Prozesslebenszyklus von SharedWorker möglicherweise kein so großes Problem ist wie bisher angenommen. Auf dieser Grundlage wird SharedWorker in Chrome für Android wieder aktiviert. Gleichzeitig wird dieses Verhalten untersucht, um eine stabile und zuverlässige Nutzung zu gewährleisten.

Verlängerte Lebensdauer für freigegebene Worker

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

Prompt API

Über die Prompt API können Webentwickler direkt auf ein vom Browser bereitgestelltes On-Device-KI-Sprachmodell zugreifen. Das API-Design bietet eine detaillierte Steuerung, die an Cloud-API-Strukturen ausgerichtet ist. So können Sie Websites schrittweise mit Modellinteraktionen verbessern, die auf individuelle Anwendungsfälle zugeschnitten sind. Dies ergänzt aufgabenbasierte Language Model APIs wie die Summarizer API sowie eine Vielzahl von APIs und Frameworks für die generalisierte 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 vordefinierten regulären Ausdrücken und JSON-Schemaformaten entspricht.

Dies unterstützt eine Vielzahl von Anwendungsfällen. Sie kann beispielsweise Bildunterschriften generieren, visuelle Suchen durchführen, Audio transkribieren, Geräuschereignisse klassifizieren, Text nach bestimmten Anweisungen generieren und Informationen oder Statistiken aus multimodalen Quellen extrahieren.

Diese API wurde bereits in Chrome-Erweiterungen ausgeliefert. Mit dieser Intent 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 Built-In AI API zu blockieren, während andere Funktionen für generative KI auf dem Gerät weiterhin zulässig sind.

Protokoll zur Sprachunterstützung:

  • In Chrome 139 und früheren Versionen wurde nur Englisch ('en') unterstützt.
  • In Chrome 140 wurden Spanisch und Japanisch ('es' und 'ja') hinzugefügt.

Funktionen für die sichere Zahlungsbestätigung erhalten

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

IDNA-ContextJ-Regeln

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

In der 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. Die Implementierung übergibt die Option UIDNA_CHECK_CONTEXTJ an ICU, wo diese Regel implementiert ist.

No-Store-Bilder bei Neuzuweisung von same-src wiederverwenden

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

Feld contentType zu „Resource 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 er vom Server zurückgegeben wird.

Zeigerereignisse beim Starten des Ziehvorgangs unterdrücken

Gemäß der HTML-Spezifikation sollte der User-Agent beim Start eines Ziehvorgangs die entsprechenden Ereignisse an die Ziehquelle senden, um anzugeben, dass der Zeigerereignisstream beendet wurde und keine weiteren Ereignisse von diesem Zeiger zu erwarten sind. Dieser Code wurde teilweise für Mausereignisse und vollständig für Touch-Drag-Aktionen auf Android-Geräten 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 Start eines Ziehvorgangs die Ereignisse pointercancel, pointerout und pointerleave empfängt, um anzuzeigen, dass der aktuelle Ereignisstream beendet ist.

WebRTC-Datenkanal: Datenkanäle immer aushandeln

Mit dieser Funktion wird eine WebRTC-Erweiterung (alwaysNegotiateDataChannels) implementiert, 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 Datenabschnitt m= vor allen Audio- oder Videoabschnitten m 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 m-Zeile für die Anwendung 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 m-Zeile für die Anwendung und dann eine m-Zeile für Audio 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 sich für die folgenden neuen Ursprungstests anmelden.

Agentische föderierte Anmeldung

Eine Reihe von FedCM-Erweiterungen, mit denen KI-Agenten Nutzer sicher mit ihren föderierten Konten auf Websites anmelden können.

Zulassungslisten für Verbindungen

Mit der Funktion „Verbindungs-Allowlists“ können Sie externe Endpunkte explizit steuern, indem Sie Verbindungen einschränken, die über die Fetch API oder andere Webplattform-APIs von 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 im Namen einer Seite eine Verbindung herstellt, prüft er das Ziel anhand dieser Zulassungsliste. Verbindungen zu verifizierten 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 beobachten, wann annotierte Abschnitte des DOM auf dem Bildschirm angezeigt werden und das erste Rendern abgeschlossen ist. Du kannst 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 die Zeitmessung verschiedener Komponenten auf Ihren Seiten messen.

Deklarative CSS-Modulskripts

Deklarative CSS-Modulskripts sind eine Erweiterung der vorhandenen skriptbasierten CSS-Modulskripts. Damit können Entwickler deklarative Stylesheets mit Shadow-Roots teilen, einschließlich deklarativer Shadow-Roots. 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 ein Canvas- oder WebGL-/WebGPU-Texture rendern können, während die Interaktivität und Barrierefreiheit des Inhalts erhalten bleiben. Sie besteht aus drei Teilen: einem Attribut zum Aktivieren von Canvas-Elementen (layoutsubtree), Methoden zum Zeichnen von untergeordneten Elementen (2d: drawElementImage, webgl:texElementImage2D, webgpu: copyElementImageToTexture) und einer Möglichkeit, die Transformation des Elements auf dem Bildschirm für die Interaktivität korrekt zu aktualisieren.

Dauer des Stils „Long Animation Frames“

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

OpaqueRange

OpaqueRange stellt einen Live-Textbereich innerhalb des Werts eines Formularsteuerelements dar (z. B. ein <textarea> oder ein Text-<input>), sodass Entwickler mit bereichsähnlichen APIs mit dem Werttext arbeiten können.

Sie ermöglicht Vorgänge wie getBoundingClientRect() und getClientRects() und kann mit der CSS Highlights API für UI-Elemente wie Inline-Vorschläge, Hervorhebungen und verankerte Pop-over verwendet werden. Die Kapselung bleibt erhalten, 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 offengelegt.

Verarbeitungsanweisungen in HTML parsen

Verarbeitungsanweisungen (Syntax: <?target data>) sind ein vorhandenes DOM-Konstrukt, das in XML verfügbar gemacht wird. Mit diesem Konstrukt können Knotenobjekte, die keine Elemente sind, eine semantische Bedeutung für die Verarbeitung eines Dokuments haben. Sie können sie beispielsweise verwenden, um Bereiche für Streaming oder Hervorhebungen zu kennzeichnen, ohne dass neue DOM-Elemente erforderlich sind und die DOM-Struktur in Bezug auf CSS geändert werden muss. Sie können sie auch als Anweisungen für den HTML-Parser verwenden, um zu bestimmen, 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 Berechtigungsrichtlinie focus-without-user-activation steuern. Wenn die Richtlinie für einen Frame abgelehnt wird, werden programmatische Fokusaufrufe (element.focus(), autofocus, window.focus(), dialog.showModal() und Popover-Fokussierung) blockiert, es sei denn, sie werden durch eine Nutzeraktivierung ausgelöst. Vom Nutzer initiierter Fokus, z. B. durch Klicken oder Drücken der Tabulatortaste, ist davon nicht betroffen. Sie können die Richtlinie über einen Permissions-Policy-HTTP-Antwortheader oder das Attribut iframe allow festlegen. Die Fokusdelegation wird unterstützt. Ein übergeordneter Frame, der den Fokus hat, kann den Fokus programmatisch an einen untergeordneten iFrame übergeben, auch wenn die Richtlinie für den untergeordneten Frame abgelehnt wurde. Sobald ein Frame den Fokus hat, kann er den Fokus innerhalb seines eigenen Unterbaums verschieben.

Sampling-Parameter der Prompt API

Mit dieser Funktion werden der Prompt API Sampling-Parameter hinzugefügt. Diese Parameter steuern, 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 Höchstwerte dieser Parameter abzurufen. Bei der ersten Implementierung werden die Parameter temperature und topK hinzugefügt.

HTML-Installationselement für Web-Apps

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