Scroll-ausgelöste Animationen

Chrom 146

CSS und UI
Scroll-ausgelöste Animationen
Diese Funktion ermöglicht die Steuerung von Animationen auf der Grundlage der Bildlaufposition, z. B. das Abspielen, Anhalten und Zurücksetzen von Animationen.

Ein gängiges Muster auf Seiten im Web ist es, eine Animation zu starten, wenn eine Bildlaufposition erreicht wird. Entwickler verwenden dazu oft JavaScript, um manuell zu erkennen, dass sich ein Element innerhalb des Sichtbereichs seines Scroll-Containers befindet, und um eine entsprechende Animation zu starten (z. B. das Element in den Sichtbereich zu schieben). Viele dieser Anwendungsfälle beruhen auf deklarativ bereitgestellten Informationen. Mit dieser Funktion können Sie solche Interaktionen deklarativ mit CSS erstellen, wodurch der User-Agent diese Interaktion an einen Worker-Thread auslagern kann. Die API umfasst auch JavaScript-Schnittstellen, mit denen Sie die Funktion zusätzlich zu CSS-Animationen auf Web-Animationen erweitern können.

Die Eigenschaft trigger-scope
Mit der Eigenschaft trigger-scope können Sie die Namen von Animationsauslösern einschränken, die durch trigger-instantiierende Eigenschaften deklariert werden.

Auslöser-instantiierende Eigenschaften, z. B. timeline-trigger, geben Namen an, auf die die Eigenschaft animation-trigger verweisen kann, um Animationen an Auslöser anzuhängen. Diese Namen sind jedoch standardmäßig global (ähnlich wie anchor-name), und es ist oft sinnvoll, die Sichtbarkeit der Namen einzuschränken, um Animations-zu-Trigger-Interaktionen zu isolieren

meta name="text-scale "
Die Standard-Schriftgröße des Root-Elements skaliert im Verhältnis zu den Einstellungen des Betriebssystems und des Browsers für die Textskalierung. Dadurch können Seiten, die sich an bewährte Praktiken in Bezug auf schriftrelative Einheiten halten (d.h. rem und em für Schriftgrößen verwenden und Seitenelemente, die sich an die Textgrößenpräferenzen des Benutzers anpassen), die Textgrößeneinstellung des Benutzers auf Betriebssystemebene respektieren. Dadurch werden auch bestehende browserbasierte Mechanismen (z. B. Ganzseiten-Zoom bei Fenstern) und Heuristiken (z. B. automatische Textgrößenanpassung bei mobilen Geräten) deaktiviert. Sie können dem Browser signalisieren, dass die Seite so aufgebaut ist (d.h. mit rem und em), dass sie über verschiedene vom Benutzer gewählte Schriftgrößeneinstellungen hinweg gut skaliert. Ähnlich wie env(preferred-text-scale), das eine Möglichkeit bietet, auf die Textskalierung zuzugreifen, erweitert diese API dies, indem sie die Skalierung unter Verwendung der Standardschriftgröße des Wurzelelements aktiviert und die automatische Textskalierung ausschaltet.

Scoped custom element registry
Mit dieser Funktion können mehrere benutzerdefinierte Elementdefinitionen für einen einzigen Tag-Namen innerhalb einer Seite existieren. Dadurch werden Namenskonflikte bei benutzerdefinierten Elementen vermieden, wenn eine Webanwendung Bibliotheken aus mehreren Quellen verwendet. Dies wird dadurch erreicht, dass der Benutzercode mehrere benutzerdefinierte Elementregistrierungen erstellen und diese mit Baumbereichen und Elementen verknüpfen kann, die als Scoping-Objekte fungieren.

Fähigkeiten
Population von targetURL während der Dateiverarbeitung
Die Launch Handler-Implementierung stellt nun sicher, dass LaunchParams.targetURL ausgefüllt wird, wenn eine PWA mit Dateibehandlung gestartet wird. Vor dieser Änderung war die Eigenschaft null, wenn ein Dateistart an ein bestehendes Fenster gerichtet war. Diese Änderung stellt sicher, dass die URL aus dem Manifest-Aktionsfeld (dieselbe URL, die das Dokument derzeit laden muss) für den launchQueue-Verbraucher verfügbar ist.

LaunchParams beim Neuladen nicht mehr in die Warteschlange stellen
Verhindert, dass die launchQueue die letzten LaunchParams (einschließlich der Datei-Handles) erneut sendet, wenn ein Benutzer die Seite neu lädt. Zuvor löste eine Seitenaktualisierung den Launch-Consumer erneut mit den Daten des ursprünglichen Launch aus. Diese Änderung stellt sicher, dass ein Neuladen als Standardnavigation und nicht als "Neustart" behandelt wird, und die launchQueue wird nicht mit doppelten Dateien gefüllt, es sei denn, es tritt ein neues Dateistart-Ereignis auf.

DOM
Navigations-API: Post-Commit-Handler von Precommit hinzufügen
Beim Abfangen von Navigationen mit dem navigate-Ereignis werden precommitHandlers und post-commit ordinary handlers separat übergeben.

Das funktioniert gut, wenn es nur den einen oder den anderen gibt, kann aber umständlich sein, wenn der Fluss einen precommitHandler enthält, der zu einem post-commit-Handler führt.

Dieser Zusatz ist eine kleine ergonomische Verbesserung, die es Ihnen ermöglicht, einen Post-Commit-Handler zu registrieren, während Sie einen Pre-Commit-Handler aufrufen.

Grafik
WebGPU: Textur- und Sampler-Lets
Fügen Sie ein Sprachfeature zu WGSL hinzu, texture_and_sampler_let, mit dem Sie Textur- und Sampler-Objekte in einer let-Deklaration in WGSL speichern können.

WebGPU: Transiente Anhänge
Dieses Feature fügt der WebGPU-Spezifikation nach der ersten Auslieferung in einem Browser Funktionalität hinzu.

Mit dem neuen TRANSIENT_ATTACHMENT GPUTextureUsage können Sie Anhänge erstellen, mit denen Rendering-Pass-Operationen im Kachelspeicher verbleiben, wodurch VRAM-Verkehr und möglicherweise VRAM-Zuweisung für die Texturen vermieden werden

WebGPU-Kompatibilitätsmodus
Dieser Modus fügt eine leicht eingeschränkte Teilmenge der WebGPU-API hinzu, die ältere Grafik-APIs ausführen kann, zum Beispiel OpenGL und Direct3D11. Wenn Sie sich für diesen Modus entscheiden und seine Einschränkungen befolgen, können Sie die Reichweite Ihrer WebGPU-Anwendungen auf viele ältere Geräte ausdehnen, die nicht über die modernen, expliziten Grafik-APIs verfügen, die der WebGPU-Kern erfordert. Für einfache Anwendungen ist die einzige erforderliche Änderung die Angabe des Kompatibilitäts-FeatureLevels beim Aufruf von requestAdapter. Für fortgeschrittene Anwendungen sind möglicherweise einige Änderungen erforderlich, um die Einschränkungen des Modus zu berücksichtigen. Da der Kompatibilitätsmodus eine Teilmenge ist, sind die resultierenden Anwendungen auch gültige WebGPU Core-Anwendungen und laufen auch auf User Agents, die den Kompatibilitätsmodus nicht unterstützen.

JavaScript
Iterator-Sequenzierung
Ein TC39-Vorschlag zur Erstellung von Iteratoren durch Aneinanderreihung bestehender Iteratoren. Dies führt Iterator.concat (...items) ein.

Selektiver Eingriff in die Berechtigungen
Wenn Sie einer Website die Erlaubnis erteilen, auf eine leistungsstarke API zuzugreifen (z. B. Bluetooth, Kamera, Zwischenablage, DisplayCapture, Geolocation, Mikrofon, Seriell und USB), gilt Ihre Zustimmung für die Website, nicht unbedingt für jedes Skript eines Drittanbieters, das auf der Seite läuft. Insbesondere eingebettete Anzeigenskripte, die im Hauptrahmen oder in Iframes gleichen Ursprungs laufen, können die Genehmigung der Seite nutzen, um opportunistisch auf diese sensiblen Daten zuzugreifen. Sie sind sich möglicherweise nicht bewusst, dass eine Werbung auf Ihre Daten zugreift.

Diese Maßnahme zielt darauf ab, eine erteilte Erlaubnis besser mit Ihren Absichten in Einklang zu bringen, indem verhindert wird, dass Anzeigenskripte in einem Kontext mit API-Erlaubnis diese nutzen, wodurch Ihr Vertrauen und Ihre Kontrolle über Ihre Daten gestärkt werden.

DropEffect-Werte von Dragover zu Drop-Events beibehalten
Die HTML5-Drag-and-Drop-API ermöglicht es Webanwendungen, Drag-and-Drop-Vorgänge über eine Reihe von Ereignissen zu verarbeiten: Dragstart, Dragenter, Dragover, Dragleave, Drop und Dragend. Während dieser Ereignisse gibt die Eigenschaft dataTransfer.dropEffect an, welche Operation (Kopieren, Verschieben, Verknüpfen oder keine) durchgeführt werden soll.

Gemäß der HTML5-Spezifikation sollte der dropEffect-Wert, der von Webanwendungen während des letzten dragover-Ereignisses festgelegt wurde, beibehalten werden und im nachfolgenden drop-Ereignis verfügbar sein.

Chromium-basierte Browser überschrieben jedoch den dropEffect-Wert der Webanwendung mit der eigenen ausgehandelten Operation des Browsers, bevor das Drop-Ereignis ausgelöst wurde, wodurch die Einhaltung der Spezifikation verletzt und die Kontrolle über das Drag-and-Drop-Verhalten eingeschränkt wurde. Dieses Verhalten ist nun geändert worden.

Multimedia
Wiedergabestatistik-API für WebAudio
Diese Funktion fügt ein AudioContext.playbackStats-Attribut hinzu, das ein AudioPlaybackStats-Objekt zurückgibt. Dieses Objekt liefert Audiowiedergabestatistiken, z. B. die durchschnittliche Latenz, die minimale/maximale Latenz, die Dauer der Unterschreitung und die Anzahl der Unterschreitungen. Mit dieser API können Webanwendungen die Qualität der Audiowiedergabe überwachen und Störungen erkennen.

Netzwerk
Erhaltung von MIME-Typ-Parametern in der Daten-URL
Beibehaltung von MIME-Typ-Parametern (z. B. charset, boundary) in Daten-URL-Content-Type-Headern, wie im Fetch-Standard angegeben.

Leistung
LCP: Anpassung des spezifizierten Verhaltens bei der Ausgabe von Kandidaten
Der LCP-Algorithmus sendet nun Kandidaten auf der Grundlage des größten gemalten Bildes anstelle des größten anhängigen, aber noch nicht gemalten Bildes. Dies kann dazu führen, dass mehr Zwischenkandidaten an die Leistungszeitachse gesendet werden.

In jedem Animationsbild, nachdem es präsentiert wurde, gibt der LCP-Algorithmus einen neuen Kandidaten (höchstens einen) an die Leistungszeitleiste ab, wenn es einen neuen größten Text oder ein neues größtes Bild gibt, das in diesem Bild gemalt wurde. Der Algorithmus verfolgt auch das "größte ausstehende Bild", d. h. das größte noch zu ladende Bild, und verwendet die Größe dieses Bildes, um festzustellen, ob der neue Kandidat der größte ist. Das bedeutet, dass ein langsam ladendes großes Bild die Ausgabe von LCP-Zwischenkandidaten verhindern kann, und diese Kandidaten liefern Ihnen oft nützliche Informationen, um den Ladevorgang zu verstehen.

Dieses Verhalten hat sich auf der Interop 2025 als Unterschied zu anderen Engines herauskristallisiert, und das Team hat sich darauf geeinigt, maximal einen Kandidaten pro Frame auszugeben, der auf der Menge der gemalten Bild- und Textelemente für diesen Frame basiert.

Sicherheit
Sanitizer-API
Die Sanitizer-API bietet eine Möglichkeit, Inhalte, die Skripte ausführen könnten, aus beliebigen, vom Benutzer bereitgestellten HTML-Inhalten zu entfernen. Ziel ist es, die Erstellung von XSS-freien Webanwendungen zu erleichtern.

Ursprungsversuche
WebNN
Mit WebNN können Webanwendungen und Frameworks die Vorteile nativer Betriebssystemdienste für maschinelles Lernen und die zugrundeliegenden Hardwarefähigkeiten Ihres Computers nutzen, um konsistente, effiziente und zuverlässige ML-Erfahrungen im Web zu implementieren.

CPU-Leistungs-API
Diese API stellt Informationen über die Leistung Ihres Geräts zur Verfügung. Diese API zielt auf Webanwendungen ab, die diese Informationen nutzen, um ein verbessertes Benutzererlebnis zu bieten, möglicherweise in Kombination mit der Compute Pressure API, die Informationen über den CPU-Druck oder die CPU-Auslastung des Geräts liefert und Anwendungen auf Änderungen des CPU-Drucks reagieren lässt.

Spekulationsregeln: form_submission Feld
Dies erweitert die Syntax der Spekulationsregeln, so dass Sie das form_submission-Feld für die Vorberechnung angeben können.

Dieses Feld weist den Browser an, den Prerender als Formularübermittlung vorzubereiten, so dass er durch echte Formularübermittlungsnavigationen aktiviert werden kann. Ein einfaches Suchformular führt beispielsweise zu einer /search?q=XXX GET-Anforderungsnavigation; Webentwickler haben um Unterstützung für diese Funktion gebeten.

Fokusgruppe
Die Focusgroup-Funktion erleichtert die Navigation mit dem Tastaturfokus zwischen einer Reihe von fokussierbaren Elementen mit Hilfe der Pfeiltasten der Tastatur.