Neue CSS-Darstellungseinheiten, Federated Credential Management API, Variable COLRv1-Schriftarten und mehr.
Sofern nicht anders angegeben, gelten die unten beschriebenen Änderungen für die neueste Chrome-Betaversion für Android, ChromeOS, Linux, macOS und Windows. Weitere Informationen zu den hier aufgeführten Funktionen finden Sie über die bereitgestellten Links oder in der Liste auf ChromeStatus.com. Chrome 108 ist seit dem 27. Oktober 2022 als Betaversion verfügbar. Die neuesten Versionen stehen unter Google.com für Computer und im Google Play Store für Android-Geräte zum Download bereit.
CSS
Chrome 108 enthält eine Reihe neuer CSS-Funktionen.
CSS-Überlauf für ersetzte Elemente
In Chrome wird eine Änderung eingeführt, mit der Entwickler die vorhandene overflow-Eigenschaft mit ersetzten Elementen verwenden können, die außerhalb des Inhaltsrahmens übertragen werden. In Kombination mit object-view-box kann dies verwendet werden, um ein Bild mit einem benutzerdefinierten Schein oder Schatten zu erstellen, dessen Tintenüberlauf wie bei einem CSS-Schatten korrekt funktioniert.
Dies ist eine potenzielle funktionsgefährdende Änderung. Weitere Informationen finden Sie unter Überlauf bei ersetzten Elementen.
Kleine, große, dynamische und logische Darstellungsbereichseinheiten
Dadurch werden kleine (svw, svh, svi, svb, svmin, svmax), große (lvw, lvh, lvi, lvb, lvmin, lvmax), dynamische (dvw, dvh, dvi, dvb, dvmin, dvmax) und logische (vi, vb) Einheiten unterstützt.
Unterstützung für Preisvergleichsportale break-after, break-before und break-inside
Unterstützung für den Vermeidungswert der CSS-Fragmentierungseigenschaften break-before, break-after und break-inside beim Drucken. Damit wird dem Browser mitgeteilt, dass vor, nach oder innerhalb des Elements, auf das es angewendet wird, keine Fehler auftreten sollen. Mit dem folgenden CSS-Code wird beispielsweise verhindert, dass eine Abbildung bei einem Seitenumbruch unterbrochen wird.
figure {
break-inside: avoid;
}
Diese Funktion wurde hinzugefügt, weil in Chrome 108 das Drucken mit LayoutNG unterstützt wird.
Ausrichtung des letzten Basiselements
Mit dieser Funktion können Entwickler Elemente im flexiblen oder Rasterlayout entweder an ihrer letzten Referenz statt an ihrer ersten ausrichten. Dies erfolgt über die folgenden Eigenschaften:
align-items: last baseline;justify-items: last baseline;align-self: last baseline;justify-self: last baseline;
ContentVisibilityAutoStateChanged Ereignis
Ein Ereignis, das für ein Element mit content-visibility: auto ausgelöst wird, wenn sich der Renderingstatus des Elements aufgrund eines der Attribute ändert, die das Element für den Nutzer relevant machen.
Der Anwendungsfall hierfür besteht darin, Entwicklern eine bessere Kontrolle darüber zu geben, wann sie das Rendering starten oder stoppen, wenn der User-Agent das Rendern der Unterstruktur zur Sichtbarkeit von Inhalten beendet oder beginnt. Beispielsweise kann der Entwickler React-Aktualisierungen in einer Unterstruktur stoppen, die nicht vom User-Agent gerendert wird. Ebenso kann es sein, dass der Entwickler andere Skriptaktualisierungen (z. B. Canvas-Aktualisierungen) stoppen möchte, wenn der User-Agent das Element nicht rendert.
Web APIs
Verwaltung von föderierten Anmeldedaten (früher WebID)
Mit der Federated Credential Management API können Nutzer ihre föderierte Identität für die Anmeldung auf Websites verwenden, und zwar auf eine Weise, die mit Verbesserungen des Browser-Datenschutzes kompatibel ist.
Medienquellenerweiterungen in Workern
Aktiviert die Nutzung der Media Source Extensions (MSE) API aus DedicatedWorker-Kontexten, um eine verbesserte Leistung beim Zwischenspeichern von Medien für die Wiedergabe durch ein HTMLMediaElement im Hauptfensterkontext zu ermöglichen. Durch Erstellen eines MediaSource-Objekts in einem DedicatedWorker-Kontext kann eine Anwendung dann ein MediaSourceHandle erhalten und dieses Handle an den Hauptthread übertragen, um es zum Anhängen an ein HTMLMediaElement zu verwenden. Der Kontext, in dem das MediaSource-Objekt erstellt wurde, kann es dann zum Zwischenspeichern von Medien verwenden.
Sec-CH-Prefers-Reduced-Motion Kopfzeile für Medienfunktionen der Nutzereinstellungen – Client-Hints
Client Hints Headers für Medienfunktionen der Nutzerpräferenz definiert eine Reihe von HTTP-Client Hints-Headern zu Medienfunktionen mit Nutzerpräferenz, wie in Medienabfrageebene 5 definiert. Wenn diese Header als Critical Client Hints verwendet werden, können Server intelligente Entscheidungen treffen, z. B. in Bezug auf CSS-Inline. Sec-CH-Prefers-Reduced-Motion spiegelt die prefers-reduced-motion-Einstellung des Nutzers wider.
WebTransport-BYOB-Lesegeräte
Unterstützt BYOB-Leser(Bring Your Own-buffer, BYOB) für WebTransport, um das Lesen in einen vom Entwickler bereitgestellten Zwischenspeicher zu ermöglichen. BYOB-Lesegeräte können Zwischenspeicherkopien minimieren und Arbeitsspeicherzuweisungen reduzieren.
Platzhalter in Ursprüngen der Berechtigungsrichtlinie
In der Spezifikation der Berechtigungsrichtlinie wird ein Mechanismus definiert, mit dem Entwickler die Verwendung verschiedener Browserfunktionen und APIs selektiv aktivieren und deaktivieren können. Eine der Möglichkeiten dieses Mechanismus ermöglicht es, Funktionen nur für explizit aufgezählte Ursprünge (z. B. https://foo.com/) zu aktivieren. Dieser Mechanismus ist für das Design einiger CDNs, die Inhalte über einen Ursprung bereitstellen, der möglicherweise auf einer von mehreren hundert möglichen Subdomains gehostet wird, nicht flexibel genug.
Daher unterstützt diese Funktion Platzhalter in Berechtigungsrichtlinien, die wie SCHEME://*.HOST:PORT strukturiert sind (z. B. https://*.foo.com/), wobei aus SCHEME://HOST:PORT ein gültiger Ursprung erstellt werden kann (z. B. https://foo.com/). Dies setzt voraus, dass HOST eine registrierfähige Domain ist. Das bedeutet, dass https://*.bar.foo.com/ funktioniert, https://*.com/ jedoch nicht. Wenn Sie allen Domains die Verwendung dieser Funktion erlauben möchten, sollten Sie einfach an * delegieren.
Synchronisierungsmethoden für AccessHandles in der File System Access API
Aktualisiert die asynchronen Methoden flush(), getSize() und truncate() in FileSystemSyncAccessHandle in der File System Access API auf synchrone Methoden.
FileSystemSyncAccessHandle verfügt derzeit über eine Mischung aus Synchronisierungs- und asynchronen Methoden, was die Leistung und Nutzerfreundlichkeit beeinträchtigt, insbesondere bei Anwendungen, die C/C++ auf Wasm übertragen. Dieses Update sorgt für eine konsistente API-Nutzung und verbessert die Leistung von Wasm-basierten Bibliotheken.
Dies ist eine potenzielle funktionsgefährdende Änderung. Weitere Informationen finden Sie unter Nicht abwärtskompatible Änderung: Synchronisierungsmethoden für AccessHandles.
Bedingte WebAuthn-UI
Die bedingte UI für WebAuthn wird unter Windows 22H2 oder höher, macOS und Android P oder höher unterstützt. Die WebAuthn-Benutzeroberfläche auf Desktop-Plattformen wurde ebenfalls aktualisiert.
Variable COLRv1-Schriftarten und -Erkennung von Schriftarten
Unterstützung für COLRv1-Variablenschriftarten
COLRv1-Farbvektorschriften werden seit Chrome 98 unterstützt. In dieser ersten Version wurden jedoch nur die statischen Funktionen der COLRv1-Tabelle unterstützt. Die COLRv1-Spezifikation definiert die Integration in OpenType-Varianten, die das Ändern der Schrifteigenschaften von Farbverläufen und Transformationen durch Ändern von variablen Achsenparametern ermöglicht. Mit diesem zweiten Schritt werden solche Varianten in COLRv1 unterstützt.
font-tech()- und font-format()-Bedingungserweiterungen für CSS @supports
Wenn Sie font-tech() und font-format() zusammen mit CSS @supports verwenden, können die Erkennung von Schrifttechnologie und -formatunterstützung sowie die schrittweise Optimierung von Inhalten erfolgen. Im folgenden Beispiel wird die Unterstützung von COLRv1-Schriftarten getestet.
@supports font-tech(color-COLRv1) {
}
Funktionsunterstützung von tech() im @font-face src:-Deskriptor
CSS Fonts Level 4 bietet zusätzliche Möglichkeiten zum Auswählen oder Filtern von Schriftressourcen. Es wurde die Funktion tech() eingeführt, mit der eine Liste von Schriftarttechnologien übergeben werden kann, die für das Funktionieren des jeweiligen Schriftart-Blobs erforderlich sind. Auf dieser Grundlage wählt der User-Agent die erste geeignete Ressource aus.
Chrome für Android
Unter Android OSK wird jetzt standardmäßig die Größe des visuellen Darstellungsbereichs angepasst
Die Android-Bildschirmtastatur passt standardmäßig die Größe des visuellen Darstellungsbereichs an, nicht der am Anfang enthaltende Block. Autoren können diese Option mit dem neuen Meta-Darstellungsbereichsschlüssel interactive-widget deaktivieren.
Ursprungstests
Für diese Chrome-Version gibt es zwei neue Ursprungstests.
Händleridentität in canmakepayment-Ereignis
Das Service Worker-Ereignis canmakepayment teilt dem Händler mit, ob der Nutzer eine Karte in einer installierten Zahlungs-App hinterlegt hat. Der Ursprung des Händlers und beliebige Daten werden im Hintergrund von der Zahlungs-App an einen Service Worker übergeben. Diese ursprungsübergreifende Kommunikation findet bei der PaymentRequest-Konstruktion in JavaScript statt, erfordert keine Nutzergeste und zeigt keine Benutzeroberfläche. Test für Entwickler zum Entfernen der Identitätsfelder aus „canmakepayment“ kann aktiviert werden über: chrome://flags/#clear-identity-in-can-make-payment. Wenn Sie dieses Flag aktivieren, werden die Identitätsfelder in „canmakepayment“ leer sein und dem Android-Intent IS_READY_TO_PAY.
Weitere Informationen findest du unter Update zum Ereignisverhalten „CanMakePayment“ der Payment Handler API.
NotRestoredReason API des Back-Forward-Cache
Die NotRestoredReason API meldet die Liste der Gründe, warum eine Seite nicht aus BFcache in einer Frame-Baumstruktur über die PerformanceNavigationTiming API bereitgestellt wird.
Seiten können aus verschiedenen Gründen aus dem BFCache-Speicher blockiert werden, z. B. aufgrund der Spezifikation oder der Browserimplementierung. Entwickler können die Trefferrate von BFCache auf ihrer Website mithilfe des persistenten Parameters „pageshow-Handler“ und PerformanceNavigationTiming.type(back-forward) ermitteln. Diese API ermöglicht es Websites, Informationen darüber zu erfassen, warum BFCache nicht in einer Verlaufsnavigation verwendet wird, sodass sie Maßnahmen für jeden Grund ergreifen und ihre Seite mit BFCache kompatibel machen können.
Einstellung und Entfernung
Mit dieser Version von Chrome werden die unten aufgeführten Einstellungen und Entfernungen eingeführt. Unter ChromeStatus.com finden Sie eine Liste mit geplanten Einstellungen, aktuellen Einstellungen und früheren Löschungen.
Verworfene Produkte/Funktionen
In dieser Version von Chrome wird eine Funktion eingestellt.
window.defaultStatus und window.defaultstatus einstellen und entfernen
Hierbei handelt es sich um nicht standardmäßige APIs, die nicht von allen Browsern implementiert werden und keine Auswirkungen auf das Browserverhalten haben. Dadurch werden sie bereinigt und mögliche Fingerprinting-Signale beseitigt.
Sie wurden ursprünglich verwendet, um die Statusleiste zu ändern bzw. zu steuern. Text unten im Browserfenster. Sie hatten jedoch keine tatsächlichen Auswirkungen auf die Statusleiste von Chrome und sind keine standardisierten Attribute. Gecko unterstützt diese Attribute seit Version 23 nicht. WebKit unterstützt diese Attribute weiterhin. Das zugehörige Attribut window.status ist standardisiert, darf aber keinen Einfluss auf die Fenster-Statusleiste haben.
Entfernen
In dieser Version von Chrome werden vier Funktionen entfernt.
„ImageDecoderInit.premultiplyAlpha“ entfernen
Die Funktion hat keine erkennbaren Auswirkungen in primären Anwendungsfällen, kann Implementierungen jedoch auf suboptimale Weise einschränken. Eine ausführlichere Beschreibung finden Sie in diesem Problem. Nach übereinstimmendem Konsens der WebCodecs-Spezifikationseditoren und fehlender Nutzung (0,000000339 % bis 0,00000687% der Seitenladevorgänge pro Verwendungszähler in M106).
„navigateEvent.restoreScroll()“ entfernen
restoreScroll() wird durch navigateEvent.scroll() ersetzt. scroll() funktioniert auf die gleiche Weise, nur dass der Entwickler das Scroll-Timing für Navigationen ohne Durchlauf steuern kann. scroll() funktioniert, wenn das Scrollen keine Wiederherstellung ist, daher ändert sich der Name zusammen mit der Verhaltensänderung.
„navigateEvent.transitionWhile()“ entfernen
„transitionWhile()“ wird aufgrund von Designfehlern, die von Entwicklern gemeldet wurden, durch navigateEvent.intercept() ersetzt. Achsenfang() verhält sich fast genauso wietransitWährend() , allerdings wird kein obligatorischer Promise -Parameter verwendet, sondern eine optionale Handler-Funktion, die ein Promise zurückgibt. So kann der Browser steuern, wann der Handler ausgeführt wird, was später und intuitiver ist als bei transitionWhile().
googIPv6 von WebRTC mediaConstraint entfernen
Mit "googIPv6: false" kann die IPv6-Unterstützung in WebRTC wie im folgenden Beispiel deaktiviert werden.
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
IPv6 ist seit vielen Jahren standardmäßig aktiviert und wir sollten es nicht mehr deaktivieren können. Dies ist eine alte API, die in der Spezifikation nicht vorhanden ist.