Open Font Format avar2 Textgestaltung und Glyphenrendering

Chrom 148
Stabiles Veröffentlichungsdatum: 5. Mai 2026

Sofern nicht anders angegeben, gelten die folgenden Änderungen für Chrome 148 Stable Channel Release für Android, ChromeOS, Linux, macOS und Windows.

Möchten Sie nur die Highlights? Sehen Sie sich Neu in Chrome 148 an.

CSS und UI
CSS-Container-Abfragen, die nur auf dem Namen basieren
Ein CSS-Abfragecontainer kann nur anhand seines Containernamens abgefragt werden, und der Container muss nicht auf einen Containertyp festgelegt werden:

#container {
container-name: --foo;
}
@container --foo {
input { background-color: grün; }
}

<div id="container">
Zuvor erforderte @container neben dem Namen auch einen Containertyp.

At-rule: CSS-Feature-Erkennung
Dieses Feature fügt eine at-rule()-Funktion zu CSS @supports hinzu, die es Autoren ermöglicht, die Unterstützung für CSS at-rules zu erkennen.

Open Font Format avar2 Textformung und Glyphenrendering
Version 2 der avar-Tabelle (Achsenvariationen) ermöglicht es Schriftdesignern, variable Schriften mit besserer Kontrolle über die Interpolation zu erstellen. Während die ursprüngliche Spezifikation für variable Schriften die Achsen unabhängig voneinander behandelt, erlaubt avar2, dass sich die Achsen gegenseitig beeinflussen. Dies führt zu Schriftarten, die für Autoren von Inhalten einfacher zu verwenden sind und eine kompakte Speicherung ermöglichen.

Avar2 arbeitet mit denselben bekannten Konzepten von Schriftvariationen, wendet aber die variablen Delta-Werte auf die Design-Achsenspezifikationen selbst an. Außerdem können Sie dies über einen Bereich von mehreren Achsen tun.

So können Schriftdesigner beispielsweise "Meta-Schieberegler" erstellen, die mehrere Variationsachsen auf einmal steuern und dem Benutzer die Feinabstimmung und das Auffinden einer nützlichen Ecke des Gestaltungsraums der Schrift abnehmen.

Avar2 gibt Schriftgestaltern eine bessere Kontrolle über den nutzbaren Variationsraum ihrer Schrift und ermöglicht es ihnen, die Anpassung von Gestaltungsachsen über mehrere Achsen hinweg zu koordinieren.

Durch die mathematische Definition der Beziehungen zwischen den Achsen in der Tabelle von Avar Version 2 können Schriften komplexe Designs mit weniger Vorlagen erreichen, was zu kleineren Dateigrößen führt, da die Interpolation effizienter gespeichert wird.

Das Schlüsselwort revert-rule
Das Schlüsselwort revert-rule rollt die Kaskade zur vorherigen Regel zurück, ähnlich wie revert-layer die Kaskade zur vorherigen Ebene zurückrollt. Zum Beispiel:

div { color: green; }
div { color: revert-rule; / Effektiv grün / }
Dies ist vor allem in Kombination mit Konditionalen nützlich, da Sie damit die aktuelle Regel aufheben können, wenn eine Bedingung nicht erfüllt ist:

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

Lazy loading für Video- und Audioelemente
Fügt das loading-Attribut zu <video> und <audio> Elementen hinzu, so dass Entwickler das Laden von Medienressourcen aufschieben können, bis sich das Element in der Nähe des Viewports befindet, indem sie loading="lazy" verwenden. Dies entspricht dem bereits vorhandenen Verhalten beim Laden von - und <iframe>-Elementen, wodurch die Ladeleistung der Seite verbessert und der Datenverbrauch reduziert wird.

text-decoration-skip-ink: all
Hinzufügen von Unterstützung für den Wert all für die CSS-Eigenschaft text-decoration-skip-ink.

Die Eigenschaft text-decoration-skip-ink unterstützt bereits auto und none. Der Wert all erweitert dies, indem er ink-skipping bedingungslos auf alle Glyphen - einschließlich CJK-Zeichen - anwendet, während auto CJK-Zeichen nicht überspringt, da ink-skipping bei ideografischen Schriften an typischen Unterstreichungspositionen zu unerwünschten visuellen Ergebnissen führt.

Mit text-decoration-skip-ink: all können Entwickler, die text-underline-position oder text-underline-offset angepasst haben, um Kollisionen mit CJK-Glyphen zu vermeiden, auch für diese Zeichen explizit das Ink-Skipping aktivieren.

Korrektes Setzen von dropEffect für dragEnter-, dragLeave- und dragOver-Ereignisse
Die Drag- und Drop-Spezifikationen verlangen, dass das dropEffect-Attribut des dataTransfer-Objekts bei dragEnter, dragOver und dragLeave bestimmte vorgegebene Werte aufweist. DragEnter und DragOver sollten einen dropEffect haben, der auf dem aktuellen effectAllowed basiert, und dragLeave sollte immer einen none dropEffect haben. Derzeit hält sich Chromium nicht an diese Regeln. Mit der Einführung dieser Funktion wird Chromium beginnen, die Spezifikation zu respektieren und diesem Attribut die richtigen Werte zuzuweisen, so dass Webentwickler beginnen können, sich darauf zu verlassen.

Unterdrückung des Zeiger-Ereignisses beim Start des Ziehens
Gemäß der HTML-Spezifikation sollte der User-Agent beim Start einer Ziehbewegung die entsprechenden Ereignisse an die Ziehquelle senden, um anzuzeigen, dass der Zeiger-Ereignisstrom beendet ist und dass er keine weiteren Ereignisse von diesem Zeiger erwarten sollte. Dieser Code wurde teilweise für Mausereignisse und vollständig für Touch-Drags auf Android implementiert. Mit der Arbeit an dieser Funktion wollen wir diese Spezifikationsanforderung auf allen anderen Plattformen vollständig erfüllen. In der Praxis bedeutet dies, dass nach dem Start einer Ziehbewegung die Ziehquelle nun die Ereignisse pointercancel, pointerout und pointerleave empfängt, um anzuzeigen, dass der aktuelle Ereignisstrom beendet ist.

Fähigkeiten
Lokalisierung von Manifesten
Unterstützt die Lokalisierung von Manifestmitgliedern, damit Anwendungen ihre Namen, Beschreibungen, Symbole und Verknüpfungen an die Sprache und Region des Benutzers anpassen können. Entwickler stellen lokalisierte Werte im Manifest der Webanwendung bereit, und der Browser wählt automatisch die entsprechenden Ressourcen auf der Grundlage der Spracheinstellungen des Benutzers aus, wodurch Sprachunterstützung für verschiedene Märkte eingeführt wird.

Web auf Android
Web Serial API auf Android
Die Web Serial API bietet eine Schnittstelle für die Verbindung mit seriellen Geräten, entweder über einen seriellen Anschluss am System des Benutzers oder über entfernbare USB- und Bluetooth-Geräte, die einen seriellen Anschluss emulieren. Jetzt wird sie auch auf Android unterstützt.

Vor allem im Bildungs-, Hobby- und Industriesektor schließen Benutzer Peripheriegeräte an ihre Computer an, für deren Steuerung eine spezielle Software erforderlich ist. Zum Beispiel werden Roboter oft verwendet, um Computerprogrammierung und Elektronik in Schulen zu unterrichten. Hierfür ist Software erforderlich, mit der Code auf einen Roboter geladen oder dieser ferngesteuert werden kann. In der Industrie oder im Hobbybereich wird ein Gerät wie eine Mühle, ein Laserschneider oder ein 3D-Drucker durch ein Programm gesteuert, das auf einem angeschlossenen Computer läuft. Diese Geräte werden oft von kleinen Mikrocontrollern über eine serielle Verbindung gesteuert.

SharedWorker auf Android
Lange Zeit wurde SharedWorker unter Android deaktiviert, da man Bedenken wegen seines unvorhersehbaren Prozesslebenszyklus hatte. SharedWorker-Instanzen können unerwartet beendet werden, ohne dass Benutzer oder Webentwickler darüber informiert werden.

Eine kürzlich geführte Diskussion auf GitHub (siehe GitHub-Diskussion) deutet jedoch darauf hin, dass die unvorhersehbare Natur des SharedWorker-Prozesslebenszyklus möglicherweise kein so großes Problem darstellt wie bisher angenommen. Aus diesem Grund wird SharedWorker auf Android wieder aktiviert, während dieses Verhalten untersucht wird, um eine stabile und zuverlässige Erfahrung zu gewährleisten.

Web-APIs
WebGPU: linear_indexing-Funktion
Diese Funktion fügt der WebGPU-Spezifikation nach ihrer ersten Auslieferung in einem Browser weitere Funktionen hinzu.

Fügt zwei neue integrierte Compute-Shader-Werte für die Lebensqualität der Benutzer hinzu. Diese werden für alle Backends implementiert (als Polyfills der bestehenden eingebauten Werte).

Web-Authentifizierung Sofortiger UI-Modus
Ein neuer Modus für navigator.credentials.get(), der bewirkt, dass dem Benutzer die Browser-Anmelde-UI angezeigt wird, wenn es einen Passkey oder ein Passwort für die Site gibt, die dem Browser sofort bekannt sind, oder der das Versprechen mit NotAllowedError zurückweist, wenn es keine solchen Anmeldeinformationen gibt. Auf diese Weise kann die Website die Anzeige einer Anmeldeseite vermeiden, wenn der Browser eine Auswahl an Anmeldedaten anbieten kann, die wahrscheinlich erfolgreich sind, während sie in Fällen, in denen es keine solchen Anmeldedaten gibt, immer noch einen herkömmlichen Anmeldeseitenfluss ermöglicht.

Funktionen für sichere Zahlungsbestätigung
Fügt der Zahlungsanforderung eine neue statische Methode hinzu, mit der Webentwickler die Fähigkeiten der Browserimplementierung der sicheren Zahlungsbestätigung abrufen können.

Dies hilft Webentwicklern zu wissen, welche Fähigkeiten für die sichere Zahlungsbestätigung zur Verfügung stehen, damit sie entscheiden können, ob sie die sichere Zahlungsbestätigung mit diesen Fähigkeiten verwenden wollen oder nicht.

Verlängerte Lebensdauer von Shared Workern
Dieses Update fügt dem SharedWorker-Konstruktor eine neue Option, extendedLifetime: true, hinzu. Diese neue Option verlangt, dass der Shared Worker am Leben gehalten wird, auch nachdem alle aktuellen Clients entladen wurden. Dadurch können Seiten asynchrone Arbeiten durchführen, die JavaScript erfordern, nachdem eine Seite entladen wurde, ohne sich auf einen Service Worker verlassen zu müssen.

Prompt-API
Die Prompt-API bietet Webentwicklern direkten Zugriff auf ein vom Browser bereitgestelltes KI-Sprachmodell auf dem Gerät. Das API-Design bietet eine feinkörnige Steuerung, die sich an den Formen der Cloud-API orientiert, um Websites schrittweise mit Modellinteraktionen zu erweitern, die auf individuelle Anwendungsfälle zugeschnitten sind. Dies ergänzt aufgabenbasierte Sprachmodell-APIs, z. B. die Summarizer-API, sowie eine Vielzahl von APIs und Frameworks für verallgemeinerte On-Device-Inferenz mit vom Entwickler bereitgestellten ML-Modellen.

Die erste Implementierung unterstützt Text-, Bild- und Audioeingaben. Darüber hinaus wird durch Antwortbeschränkungen sichergestellt, dass der generierte Text mit vordefinierten regulären Ausdrücken und JSON-Schemaformaten übereinstimmt.

Dies unterstützt eine Vielzahl von Anwendungsfällen, von der Generierung von Bildunterschriften und der Durchführung visueller Suchen bis hin zur Transkription von Audio, der Klassifizierung von Schallereignissen, der Generierung von Text nach bestimmten Anweisungen und der Extraktion von Informationen oder Erkenntnissen aus multimodalem Quellmaterial.

Netzwerk und Konnektivität
IDNA ContextJ-Regeln
IDNA ist der Mechanismus für Nicht-ASCII-Zeichen in Domänennamen. Es kodiert eine URL wie http://네이버.한국/ als http://xn--950bt9s8xi.xn--3e0b707e/ (eine Weiterleitung zu naver.com).

Die URL-Spezifikation setzt das CheckJoiners-Flag, 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.

Wiederverwendung von No-Store-Bildern bei Neuzuweisung desselben Ursprungs
Erlaubt die Wiederverwendung von verfügbaren Bildern desselben Dokuments, um Cache-Control: no-store reload zu umgehen, wenn derselbe src-Wert einem -Element neu zugewiesen wird. Zuvor hat Blink das Bild neu geholt, obwohl es bereits dekodiert und im Dokument verfügbar war. Dies stimmt mit dem bestehenden Verhalten von Gecko und WebKit überein.

Leistung
ContentType im Ressourcen-Timing
Fügt das Feld contentType zu PerformanceResourceTiming hinzu, um eine Zeichenkette zu enthalten, die dem HTTP-Header Content-Type der abgerufenen Ressource entspricht, wie vom Server zurückgegeben.

WebRTC Datenkanäle: Datenkanäle immer aushandeln
Implementiert eine WebRTC-Erweiterung alwaysNegotiateDataChannels, die eine Möglichkeit für die Anwendung definiert, Datenkanäle im SDP-Angebot auszuhandeln, bevor ein Datenkanal erstellt wird. Dadurch wird auch der Daten-M=-Abschnitt vor allen Audio- oder Video-M-Abschnitten ausgehandelt und als "Anbieter-getaggter M=-Abschnitt" für BUNDLE verwendet.

Dies bedeutet Folgendes:
const pc = new RTCPeerConnection({ alwaysNegotiateDataChannels: true });
const Angebot = await pc.createOffer();
ein Angebot mit einer Anwendungs-M-Zeile in der SDP erstellt wird und dass:

const pc = new RTCPeerConnection({ alwaysNegotiateDataChannels: true });
pc.addTransceiver('audio');
pc.createDataChannel('somechannel');
const offer = await pc.createOffer();
erstellt ein Angebot, das eine Anwendungs-M-Leitung gefolgt von einer Audio-M-Leitung in der SDP aushandelt.

Neue Ursprungsversuche
Deklarative CSS-Modul-Skripte
Deklarative CSS-Modulskripte sind eine Erweiterung der bestehenden skriptbasierten CSS-Modulskripte. Sie ermöglichen Entwicklern die gemeinsame Nutzung von deklarativen Stylesheets mit Schattenwurzeln, einschließlich deklarativer Schattenwurzeln. Entwickler können Inline-Stilmodule mit <style specifier="foo" type="module"> definieren und ein deklaratives Modul auf ein deklaratives Schatten-DOM anwenden, indem sie auf den specifier oder eine URL verweisen, z. B. <template shadowrootmode="open" shadowrootadoptedstylesheets="foo"

Container Timing API
Die Container Timing API ermöglicht die Überwachung des Zeitpunkts, zu dem kommentierte Abschnitte des DOM auf dem Bildschirm angezeigt werden und ihre anfängliche Zeichnung abgeschlossen haben. Ein Entwickler hat die Möglichkeit, Unterabschnitte des DOM mit dem Attribut containertiming zu markieren (ähnlich wie elementtiming für die Element Timing API) und Leistungseinträge zu erhalten, wenn dieser Abschnitt zum ersten Mal gezeichnet wurde. Diese API wird es Entwicklern ermöglichen, das Timing verschiedener Komponenten auf ihren Seiten zu messen

HTML-Installationselement für Webanwendungen
Ermöglicht es einer Website, den Benutzer deklarativ aufzufordern, eine Webanwendung zu installieren. Das Element akzeptiert optional zwei Attribute, die die Installation von Inhalten aus einem anderen Ursprung ermöglichen.

Long Animation Frames style duration
Hinzufügen von styleDuration- und forcedStyleDuration-Informationen zur API für lange Animationsrahmen, die es Entwicklern ermöglichen, Stil- und Layoutzeiten zu unterscheiden.

HTML-in-Canvas
HTML-in-canvas ermöglicht die Anpassung des Renderings von HTML unter Verwendung von Canvas mit drei neuen Primitiven: ein Attribut zur Auswahl von Canvas-Elementen (layoutsubtree), Methoden zum Zeichnen von Kindelementen (2d: drawElementImage, webgl: texElementImage2D, webgpu: copyElementImageToTexture) und ein Paint-Ereignis, das zur Behandlung von Aktualisierungen ausgelöst wird.

Verbindungszulassungslisten
Connection Allowlists ist eine Funktion, die eine explizite Kontrolle über externe Endpunkte ermöglicht, indem sie Verbindungen einschränkt, die über die Fetch-API oder andere Web-Plattform-APIs von einem Dokument oder Worker aus initiiert werden.

Die vorgeschlagene Implementierung beinhaltet die Verteilung einer Liste zugelassener Endpunkte vom Server über einen HTTP-Antwort-Header. Bevor der Benutzer-Agent im Namen einer Seite eine Verbindung herstellt, prüft er das Ziel anhand dieser Zulassungsliste; Verbindungen zu verifizierten Endpunkten werden zugelassen, während solche, die nicht mit den Einträgen in der Liste übereinstimmen, blockiert werden.<br />

Prompt API Stichprobenparameter
Fügt Sampling-Parameter zur Prompt-API hinzu. Diese steuern, wie Token aus dem Modell abgerufen werden, und geben Entwicklern die Kontrolle über die "Kreativität" oder "Zufälligkeit" der Ausgabe. Zusätzlich werden Attribute zur LanguageModel-Instanz hinzugefügt, um die eingestellten Werte zu lesen, sowie eine statische LanguageModel-Funktion, um die Standard- und Maximalwerte dieser Parameter zu erhalten.

Die erste Implementierung fügt die Parameter temperature und topK hinzu.

Parse-Verarbeitungsanweisungen in HTML
Verarbeitungsanweisungen (Syntax: <?target data>) sind ein bestehendes DOM-Konstrukt, das in XML offengelegt wird und Knotenobjekte ermöglicht, die keine Elemente sind, aber eine semantische Bedeutung für die Verarbeitung eines Dokuments haben können.

Sie können zum Beispiel verwendet werden, um Bereiche für das Streaming oder die Hervorhebung zu kennzeichnen, ohne dass neue DOM-Elemente erforderlich sind und die DOM-Struktur in Bezug auf CSS verändert wird, oder als Anweisungen für den HTML-Parser, wie er puffern und streamen soll.

OpaqueRange
OpaqueRange stellt eine lebende Textspanne innerhalb des Wertes eines Formularsteuerelements dar, wie z. B. ein <textarea> oder ein textbasierter <input>, so dass Entwickler mit Wertetext unter Verwendung bereichsähnlicher APIs arbeiten können.
Es ermöglicht Operationen wie getBoundingClientRect(), getClientRects() und die Integration mit der CSS Custom Highlight API für UI wie Inline-Vorschläge, Hervorhebungen und verankerte Popovers. Sie bewahrt die Kapselung, indem sie nur Werte-Offsets offenlegt und null für startContainer und endContainer zurückgibt, so dass DOM-Endpunkte und interne Strukturen nicht offengelegt werden.<br />