Veröffentlicht am 28. Juli 2026
Chrome 151 wird jetzt eingeführt. In diesem Beitrag werden einige der wichtigsten Funktionen der Version vorgestellt. Vollständige Versionshinweise zu Chrome 151 lesen
Highlights dieser Version:
- Das Capability-Element
<usermedia>bietet ein deklaratives, vom Nutzer aktiviertes Steuerelement für Kamera- und Mikrofonstreams. - Mit der deklarativen Shadow-DOM-Slotzuweisung können Webkomponenten die manuelle Slotzuweisung ohne imperativen JavaScript-Code verwenden.
- Mit den Messwerten für Soft-Navigationen und Interaktionsleistung werden interaktionsbedingte Latenz und Routenänderungen in einseitigen Webanwendungen erfasst.
Capability-Element: <usermedia> MVP
Das <usermedia> Element ist das neueste Element in der Suite der Capability-Elemente nach <geolocation>. Durch diese Umstellung vom ursprünglichen Vorschlag <permission> – Teil der PEPC-Initiative – kann der Browser die einzigartigen Komplexitäten und Verhaltensweisen verschiedener Hardwarefunktionen effektiver verarbeiten. Während sich der frühe Vorschlag hauptsächlich auf die Verwaltung von Berechtigungsstatus konzentrierte, z. B. „Zulassen“ im Vergleich zu „Ablehnen“, fungieren Capability-Elemente als Datenvermittler.
Das <geolocation> Element stellt Ihrer Website ein Standortobjekt zur Verfügung und <usermedia> verwaltet den gesamten Ablauf für den Zugriff auf Kamera und Mikrofon. Es erfasst die Nutzerabsicht, verwaltet die Browseraufforderung und liefert das MediaStream-Objekt an die Anwendung. Durch diese Änderung sind keine separaten getUserMedia()-Aufrufe mehr erforderlich, die Implementierung wird vereinfacht und der Browser erhält ein vertrauenswürdiges Signal der Nutzerabsicht.
Weitere Informationen finden Sie unter Introducing the <usermedia> HTML element.
Deklaratives Shadow-DOM: Attribut shadowrootslotassignment
In Chrome 151 wird das Attribut shadowrootslotassignment für <template> Elemente unterstützt. So können Sie deklarative Shadow-Roots erstellen, die die manuelle Slotzuweisung direkt in Ihrem HTML-Code verwenden.
Bisher war die manuelle Slotzuweisung nur imperativ verfügbar. Mit diesem Update können Sie shadowrootslotassignment="manual" in Ihrer Shadow-Root-Vorlage angeben.
Das Attribut akzeptiert named (Standardverhalten) und manual und wird durch die Eigenschaft shadowRootSlotAssignment für HTMLTemplateElement wiedergegeben. Weitere Informationen finden Sie in der Dokumentation zu HTMLTemplateElement.shadowRootSlotAssignment auf MDN.
Dieses Attribut ist bereits in Firefox und in der Safari 27-Betaversion verfügbar und wird daher bald als „Baseline Newly available“ gekennzeichnet.
Messwerte für Soft-Navigationen und Interaktionsleistung
In Chrome 151 wird die Web-Performance-Zeitachse um zwei neue PerformanceEntry-Typen erweitert: soft-navigation und interaction-contentful-paint. Mit diesen Einträgen können Entwickler die interaktionsbedingte Leistung und Latenz in einseitigen Webanwendungen (Single-Page Applications, SPAs) erfassen. Dabei werden etablierte Core Web Vitals-Messwerte wie Largest Contentful Paint (LCP) und Interaction to Next Paint (INP) verwendet.
In einer SPA lösen durch JavaScript gesteuerte Routenübergänge keinen herkömmlichen Seitenaufbau im Browser aus. Der Eintrag soft-navigation erfasst diese Änderungen des Verlaufsstatus im selben Dokument, die durch Nutzerinteraktionen ausgelöst werden. Bei einer Soft-Navigation legt der Browser einen neuen Zeitursprung fest. So können Sie nachfolgende Leistungsdaten der aktiven SPA-Route und nicht der ursprünglichen Dokument-URL zuordnen.
Der Eintrag interaction-contentful-paint misst neue Contentful Paints in DOM-Bereichen, die durch eine Nutzerinteraktion geändert wurden. So erhalten Sie Einblick in die Latenz beim Laden von Interaktionen, auch wenn Inhaltsaktualisierungen von asynchronen Vorgängen wie fetch()-Anfragen abhängen.
Sie können diese neuen Einträge in Ihrer Anwendung mit einem PerformanceObserver beobachten. Das folgende Code-Snippet protokolliert Einträge für Soft-Navigationen in der Konsole, einschließlich früherer Soft-Navigationen auf dieser Seite mit der Option „buffered“:
const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });
Weitere Informationen zur Implementierung und Messung von SPA-Navigationen finden Sie in der Dokumentation zu Soft-Navigationen auf Chrome for Developers.
Weitere Informationen
Hier werden nur einige wichtige Highlights behandelt. Weitere Änderungen in Chrome 151 finden Sie unter den folgenden Links:
Abonnieren
Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen. Sie können uns auch auf X oder LinkedIn folgen, um neue Artikel und Blogposts zu erhalten.
Sobald Chrome 152 veröffentlicht wird, informieren wir Sie hier über die Neuerungen in Chrome.