Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 98 is beta as of January 10, 2022. You can download the latest on Google.com for desktop or on Google Play Store on Android.
In this version Chrome supports COLRv1 color gradient vector fonts as an additional new font format. A color font contains glyphs with multiple colors in them, which can be for example an emoji or a country flag or a multi-colored letter.
COLRv1 is an evolution of the COLRv0 font format intended to make color fonts widespread on the web. COLRv1 fonts bring expressive visual capabilities such as gradients, transforms and compositions at a very small font size. COLRv1 fonts also support OpenType variations. Internal shape reuse and a compact font format definition, plus effective compression, lead to very small font sizes.
The image illustrates the example of Noto Color Emoji, which is about 9MB as a bitmap font, but only 1.85MB as a COLRv1 vector font (after WOFF2 compression).
For more information, see COLRv1 Color Gradient Vector Fonts in Chrome 98.
This year, Chrome will release version 100, adding a digit to the version number reported in Chrome's user agent string. To help site owners test for the new string, Chrome 96 introduced a runtime flag that causes Chrome to return '100' in its user agent string. This new flag called chrome://flags/#force-major-version-to-100 has been available from Chrome 96 onward. For more information, see Force Chrome major version to 100 in the User-Agent string.
This version of Chrome introduces the origin trials described below. Origin trials allow you to try new features and give feedback on usability, practicality, and effectiveness to the web standards community. To register for any of the origin trials currently supported in Chrome, including the ones described below, visit the Chrome Origin Trials dashboard. To learn more about origin trials in Chrome, visit the Origin Trials Guide for Web Developers. Microsoft Edge runs its own origin trials separate from Chrome. To learn more, see the Microsoft Edge Origin Trials Developer Console.
Region Capture is an API for cropping a self-capture video track. Applications can currently obtain a capture of the tab in which they run using getDisplayMedia(), either with or without preferCurrentTab. In this case, the application may want to crop the resulting video track to remove some content from it (typically before sharing it remotely).
getDisplayMedia()
preferCurrentTab
Support for the auto keyword in contain-intrinsic-size is added, letting websites use the last-remembered size of an element (if any), which provides for a better user experience than for elements with content-visibility: auto. Without this feature, web developers have to guess the rendered size of the element; when used with content-visibility: auto, this may lead to elements jumping around.
contain-intrinsic-size
content-visibility: auto
The new AudioContext.outputLatency property is an estimate in seconds of audio output latency. Technically, this is the interval between the time the user agent requests the host system to buffer and the time at which the first sample in the buffer is processed by the audio output device. For devices such as speakers or headphones that produce an acoustic signal, this latter time refers to the time when a sample's sound is produced. This is already implemented in Firefox.
AudioContext.outputLatency
only
color-scheme
div { color-scheme: light }
This forces the div element out of color-scheme dark. div { color-scheme: only light }
div { color-scheme: only light }
This keeps the color-scheme for the element light as above, and opts it out of forced darkening by the user agent.
In compliance with the spec, the document.adoptedStyleSheets property is now mutable, meaning operations such as push() and pop() now work on it. The previous implementation of adoptedStyleSheets was unwieldy. For example, to add a sheet, the entire array had to be re-assigned: document.adoptedStyleSheets = [...adoptedStyleSheets, newSheet]; With the new implementation, the same operation looks like this:
document.adoptedStyleSheets
push()
pop()
adoptedStyleSheets
document.adoptedStyleSheets = [...adoptedStyleSheets, newSheet];
document.adoptedStyleSheets.push(newSheet);
Chrome now supports the CSS media queries 'dynamic-range' and 'video-dynamic-range' for detecting the current display device's support for HDR. Possible values are 'standard' and 'high'. These queries allow pages to toggle CSS rules or respond using Window.matchMedia().
'dynamic-range'
'video-dynamic-range'
'standard'
'high'
Window.matchMedia()
As per a spec update, this version of Chrome lets you specify whether window.open() launches a new window or a new tab. The following examples show the new syntax. The first will open a pop up window. The second will open a new tab or window. const popup = window.open('_blank','','popup=1'); const tab = window.open('_blank','','popup=0'); Additionally, window.statusbar.visible now correctly returns correct values: specifically, false for popups, and true for tabs, and windows.
window.open()
const popup = window.open('_blank','','popup=1'); const tab = window.open('_blank','','popup=0');
window.statusbar.visible
false
true
CORS preflight requests are now sent ahead of private network requests for subresources, asking for explicit permission from the target server. A private network request is any request from a public website to a private IP address or localhost, or from a private website (e.g. intranet) to localhost. Sending a preflight request mitigates the risk of cross-site request forgery attacks against private network devices such as routers, which are often not prepared to defend against this threat.
Windows and Workers now support the structuredClone() methods for making deep copies of objects. A deep copy is one that copies an object's properties, but invokes itself recursively when it finds a reference to another object, creating a copy of that object as well. This ensures that two pieces of code don't accidentally share an object and unknowingly manipulate each others' state. For an explanation of deep copies and how to use them, see Deep-copying in JavaScript using structuredClone.
structuredClone()
Chrome now exposes the CTAP 2.1 minPinLength extension via Web Authentication. This allows sites preconfigured for a security key to learn the configured minimum PIN length for the authenticator.
When the window controls overlay is enabled for installed desktop web apps, the app's client area is extended to cover the entire window—including the title bar area—and the window control buttons (close, maximize/restore, minimize) are overlaid on top of the client area. The web developer is responsible for drawing and input-handling for the entire window except for the window controls overlay. Developers can use this feature to make their installed desktop web apps look like OS apps.
WritableStreamDefaultController now supports a signal property which returns an instance of AbortSignal, allowing a WritableStream operation to be stopped if needed. The streams APIs provide ubiquitous, interoperable primitives for creating, composing, and consuming streams of data. This change permits an underlying sink to rapidly abort an ongoing write or close when requested by the writer. Previously, when writer.abort() was called, a long-running write would still have to continue to completion before the stream could be aborted. With this change, the write can be aborted immediately. In addition to being exposed to streams authored in JavaScript, this facility will also be used by platform-provided streams such as WebTransport.
WritableStreamDefaultController
AbortSignal
WritableStream
writer.abort()
WebTransport
This version of Chrome introduces the deprecations and removals listed below. Visit ChromeStatus.com for lists of current deprecations and previous removals.
The SDES key exchange mechanism for WebRTC has been declared a MUST NOT in the relevant IETF standards since 2013. Its usage in Chrome has declined significantly over the last year. SDES is removed because it is a security problem. It exposes session keys to Javascript, which means that entities with access to the negotiation exchange, or with the ability to subvert the Javascript, can decrypt the media sent over the connection.
Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 96 is beta as of October 21, 2021.
Next year, Chrome will release version 100. This will add a digit to the version number reported in Chrome's user agent string. To help site owners test for the new string, Chrome 96 introduces a runtime flag that causes Chrome to return '100' in its user agent string. This new flag called chrome://flags/#force-major-version-to-100 is available from Chrome 96 onward.
chrome://flags/#force-major-version-to-100
Applications that capture other windows or tabs currently have no way to control whether the calling item or the captured item gets focus. (Think of a presentation feature in a video conference app.) Chrome 96 makes this possible with a subclass of MediaStreamTrack called FocusableMediaStreamTrack, which supports a new focus() method. Consider the following code:
MediaStreamTrack
FocusableMediaStreamTrack
focus()
stream = await navigator.mediaDevices.getDisplayMedia(); let [track] = stream.getVideoTracks();
Where formerly, getVideoTracks() would return an array of MediaStreamTrack objects, it now returns FocusableMediaStreamTrack objects. (Note that this is expected to change to BrowserCaptureMediaStreamTrack in Chrome 97. At the time of this writing, Canary already does this.)
getVideoTracks()
BrowserCaptureMediaStreamTrack
To determine which display media gets focus, the next line of this code would call track.focus() with either "focus-captured-surface" to focus the newly captured window or tab, or with "no-focus-change" to keep the focus with the calling window. On Chrome 96 or later, you can step through our demo code to see this in action.
track.focus()
"focus-captured-surface"
"no-focus-change"
Priority Hints introduces a developer-set "importance" attribute to influence the computed priority of a resource. Supported importance values are "auto", "low", and "high". Priority Hints indicate a resource's relative importance to the browser, allowing more control over the order resources are loaded. Many factors influence a resource's priority in browsers including type, visibility, and preload status of a resource.
"importance"
"auto"
"low"
"high"
Requests with simple range headers can now be sent without a preflight request. CORS requests can use the Range header in limited ways (only one valid range) without triggering a preflight request.
The back-forward cache stores pages to allow for instant navigations to previously-visited pages after cross-site navigations.
Cross-Origin-Embedder-Policy has a new credentialless option that causes cross-origin no-cors requests to omit credentials (cookies, client certificates, etc.). Similarly to COEP:require-corp, it can enable cross-origin isolation.
Cross-Origin-Embedder-Policy
credentialless
no-cors
COEP:require-corp
Sites that want to continue using SharedArrayBuffer must opt-in to cross-origin isolation. Doing so using COEP: require-corp is difficult to deploy at scale and requires all subresources to explicitly opt-in. This is fine for some sites, but creates dependency problems for sites that gather content from users (Google Earth, social media generally, forums, etc).
COEP: require-corp
The new autofill pseudo class enables styling autofilled form elements. This is a standardization of the :-webkit-autofill pseudo class which is already supported in WebKit. Firefox supports the standard version.
autofill
:-webkit-autofill
Some properties like writing-mode, direction, and backgrounds are propagated from body to the viewport. To avoid infinite loops for CSS Container Queries, the spec and implementation were changed to not propagate those properties when containment is applied to HTML or BODY.
The font-synthesis CSS property controls whether user agents are allowed to synthesize oblique, bold, and small-caps font faces when a font family lacks faces.
font-synthesis
The MediaKeySession.closed property now uses an enum to indicate the reason the MediaKeySession object closed. The closed property returns a Promise that resolves when the session closes. Where previously, the Promise simply resolved, it now resolves with a string indicating the reason for closing. The returned string will be one of "internal-error", "closed-by-application", "release-acknowledged", "hardware-context-reset", or "resource-evicted".
MediaKeySession.closed
MediaKeySession
"internal-error"
"closed-by-application"
"release-acknowledged"
"hardware-context-reset"
"resource-evicted"
Chrome will always connect to a website via HTTPS when an HTTPS record is available from the domain name service (DNS).
The PerformanceEventTiming interface now includes an attribute called interactiveID. This is a browser-generated ID that enables linking multiple PerformanceEventTiming entries when they correspond to the same user interaction. Developers can currently use the Event Timing API to gather performance data about events they care about. Unfortunately, it is hard to link events that correspond to the same user interaction. For instance, when a user taps, many events are generated, such as pointerdown, mousedown, pointerup, mouseup, and click.
PerformanceEventTiming
interactiveID
pointerdown
mousedown
pointerup
mouseup
click
Chrome supports a new media query called 'prefers-contrast', which lets authors adapt web content to the user's contrast preference as set in the operating system (specifically, increased contrast mode on macOS and high contrast mode on Windows). Valid options are 'more', 'less', 'custom', or 'no-preference'.
'prefers-contrast'
'more'
'less'
'custom'
'no-preference'
Web app manifests now support an optional id field that globally identifies a web app. When the id field is not present, a PWA falls back to start_url. This field is currently only supported on desktop.
id
start_url
Enable web applications to register themselves as handlers of custom URL protocols/schemes using their installation manifest. Operating system applications often register themselves as protocol handlers to increase discoverability and usage. Web sites can already register to handle schemes via registerProtocolHandler(). The new feature takes this a step further by letting web apps be launched directly when a custom scheme link is invoked.
registerProtocolHandler()
Chrome has enhanced Content Security Policy to improve interoperability with WebAssembly. The wasm-unsafe-eval controls WebAssembly execution (with no effect on JavaScript execution). Additionally, the script-src policies now include WebAssembly.
wasm-unsafe-eval
script-src
WebAssembly modules can now hold references to JavaScript and DOM objects. Specifically, they can be passed as arguments, stored in local and global variables, and stored in WebAssembly.Table objects.
The PaymentRequest API has deprecated the basic card payment method. Its usage is low and declining. It underperforms when compared to other payment methods in time-to-checkout and completion rate. Developers can switch to other payment methods as an alternative. Examples include Google Pay, Apple Pay, and Samsung Pay. Removal timeline:
The Payment Request API is a soon-to-be-recommended web standard that aims to make building low-friction and secure payment flows easier for developers. The browser facilitates the flow between a merchant website and "payment handlers". A payment handler can be built-in to the browser, a native app installed on user’s mobile device, or a Progressive Web App. Today, developers can use the Payment Request API to access several payment methods, including “basic-card” and Google Pay in Chrome on most platforms, Apple Pay in Safari, Digital Goods API on Google Play, and Secure Payment Confirmation in Chrome.
Earlier last year, we announced that we will deprecate the "basic-card" payment handler on iOS Chrome, followed by other platforms in the future. The "basic-card" is a payment method that is typically built into the browser to help users easily enter credit card numbers without remembering and typing them. This was designed to make a good transition from a form based credit card payment to an app based tokenized card payment. In order to better pursue the goal of app based payment (and a few other reasons), the Web Payments WG decided to remove it from the specification.
Starting from version 96, Chrome will show a warning message in DevTools Console (together with creating a report to Reporting API) when the "basic-card" payment method is used. In version 100, the "basic-card" payment method will be no longer available and canMakePayment() will return false unless other capable payment methods are specified. This applies to all platforms including Android, macOS, Windows, Linux, and Chrome OS.
If you are using the Payment Request API with the "basic-card" payment handler, we suggest removing it as soon as possible and using an alternative payment method such as Google Pay or Samsung Pay.
Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 95 is beta as of September 23, 2021.
It's our eventual goal to merge the origin private file system of the File System Access API with the Storage Foundation API to reduce the number of entry points for getting access to file-based storage in the browser. A first step toward this objective is the newly proposed access handle. The new feature differs from existing functionality by offering in-place and exclusive write access to a file's content. This change, along with the ability to consistently read unflushed modifications and the availability of a synchronous variant on dedicated workers, significantly improves performance and unblocks new use cases. To join the origin trial, see its entry on Chrome Origin Trials. For more on access handlers, see the information we've added to The File System Access API: simplifying access to local files.
Chrome is trying to reduce the amount of information the user agent string exposes in HTTP requests as well as in navigator.userAgent, navigator.appVersion, and navigator.platform. The user agent string can be used for passive user fingerprinting. To join the origin trial, see its entry on Chrome Origin Trials.
navigator.userAgent
navigator.appVersion
navigator.platform
The following features, previously in a Chrome origin trial, are now enabled by default.
Secure payment confirmation augments the payment authentication experience on the web with the help of the Web Authentication API. The feature adds a new 'payment' extension to that API, which allows a relying party such as a bank to opt-in to creating a PublicKeyCredential that can be queried by any merchant origin as part of an online checkout via the Payment Request API using the 'secure-payment-confirmation' payment method.
PublicKeyCredential
'secure-payment-confirmation'
This feature enables a consistent, low friction, strong authentication experience using platform authenticators. Strong authentication with the user's bank is becoming a requirement for online payments in many regions, including the European Union. The proposed feature provides a better user experience and stronger security than existing solutions.
WebAssembly now provides exception handling support. Exception handling allows code to break control flow when an exception is thrown. The exception can be any that is known by the WebAssembly module, or it may be an unknown exception that was thrown by a called imported function.
Currently, web developers can call PerformanceObserver.observe() with the buffered option to listen to past and future performance entries about their site. Unfortunately, past entries need to be stored, and there is a buffer size limit. The droppedEntriesCount parameter helps developers know if they may have lost an entry due to storage being full.
PerformanceObserver.observe()
droppedEntriesCount
The droppedEntriesCount property is one of the options specified as the third parameter of the callback passed in the PerformanceObserver constructor. It provides the number of entries dropped due to the buffer being full.
PerformanceObserver
The EyeDropper API provides a browser-supplied eyedropper for the construction of custom color pickers. Creative applications built for the web could benefit from an ability to sample a color from pixels on the screen. Many OS applications, PowerPoint for example, have this ability but are unable to carry it over to their web equivalents. Even though some browsers have eyedropper capability built into <input type=color> elements, web applications are limited in their ability to integrate this into their custom color pickers since the eyedropper is generally accessible only through the non-customizable popup triggered by the <input> element.
<input type=color>
<input>
Chrome has updated the value provided by the Sec-CH-UA-Platform-Version on Windows to provide a reasonable level of fidelity to allow sites to identify meaningful Windows platform changes. This enables sites to deliver appropriate binary executables and help content specific to a particular operating system version. The current user agent string and existing Sec-CH-UA-Platform-Version implementation provides the major and minor version Windows components. However, as of Windows 10, Windows generally doesn't increase either of these numbers across significant releases. Notably, Windows 11 does not increase either of these numbers. You can find a table of value mappings to Windows releases in the UA Client Hints' repo issue 220.
Sec-CH-UA-Platform-Version
This function, available in windows and workers, allows developers to report errors to the console and any global "error" event handlers in the same way as an uncaught JavaScript exception. It is mainly useful for custom event-dispatching or callback-manipulating libraries. This allows library developers to report exceptions in the same way the browser does, which is useful when they need custom control over running the callback.
URLPattern is a new web API that provides operating system support for matching URLs given a pattern string. It can be used in JavaScript directly or by passing patterns to other web platform APIs such as, for example, as a service worker scope. Both web platform features and JavaScript applications often need to match against URLs. Examples include, service worker scopes on the web platform and URL routing in JavaScript frameworks. Past web platform features have individually created their own URL matching mechanisms. JavaScript has relied on libraries such as path-to-regexp.
Chrome is removing support for FTP URLs. Use of FTP in the browser is sufficiently low that it is no longer viable to invest in improving the existing FTP client. In addition, more capable FTP clients are available on all affected platforms. Google Chrome 72 and later removed support for fetching document subresources over FTP and rendering of top level FTP resources. Currently navigating to FTP URLs results in showing a directory listing or a download depending on the type of resource. A bug in Google Chrome 74 and later resulted in dropping support for accessing FTP URLs over HTTP proxies. Proxy support for FTP was removed entirely in Google Chrome 76. In Chrome 86 FTP support was turned off for pre-release channels (Canary and Beta) and experimentally turned off for one percent of stable users, though it could be reenabled via the command line. In Chrome 87 it was turned off for fifty percent of users but could also be enabled through the command line. Since Chrome 88, it was only available through a deprecation trial and is now disabled.
Most hostnames that aren't valid IPv4 addresses, but end in numbers are treated as valid, and looked up via DNS (for example, http://foo.127.1/). Per the Public Suffix List spec, the eTLD+1 of the hostname in that URL should be 127.1. If that is ever fed back into a URL, http://127.1/ is mapped to http://127.0.0.1/ by the URL spec, which seems potentially dangerous. 127.0.0.0.1 could also potentially be used to confuse users. URLs with these hostnames are now rejected.
http://foo.127.1/
127.1
http://127.1/
http://127.0.0.1/
127.0.0.0.1
Chrome now deprecates sharing WebAssembly modules between cross-origin, but same-site environments to allow agent clusters to be scoped to origins long term.
Chrome's legacy U2F API for interacting with security keys is deprecated and beginning a deprecation trial in Chrome 95 wherein the API remains enabled by default, but the trial token will disable the key for participating sites. U2F security keys themselves are not deprecated and will continue to work.
Affected sites should migrate to the Web Authentication API. Credentials that were originally registered via the U2F API can be challenged via web authentication. USB security keys that are supported by the U2F API are also supported by the Web Authentication API.
U2F is Chrome's original security key API. It allows sites to register public key credentials on USB security keys and challenge them for building phishing-resistant two-factor authentication systems. U2F never became an open web standard and was subsumed by the Web Authentication API (launched in Chrome 67). Chrome never directly supported the FIDO U2F JavaScript API, but rather shipped a component extension called cryptotoken, which exposes an equivalent chrome.runtime.sendMessage() method. U2F and Cryptotoken are firmly in maintenance mode and have encouraged sites to migrate to the Web Authentication API for the last two years.
chrome.runtime.sendMessage()
The following timeline is currently planned for deprecation and removal:
Stable as of August 31, 2021. Support added for the googleLegacyAppIdSupport extension.
Beta as of September 23, 2021. The following changes were implemented:
Beta expected in early January 2022, stable in February. The deprecation trial will continue, but its behavior will reverse: the API will be disabled by default, but may be kept alive by trial participants.
Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Android WebView, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 93 is beta as of July 29, 2021.
Cross-origin no-CORS requests can now be made to omit credentials (cookies, client certificates, etc.) using the credentialless keyword. Similarly to COEP: require-corp, it can enable cross-origin isolation.
Sites that wish to continue using SharedArrayBuffer must opt-in to cross-origin isolation. Today, COEP: require-corp exists, and is used to enable cross-origin isolation. It is functional and solid, but turns out to be difficult to deploy at scale, as it requires all subresources to explicitly opt-in. This is fine for some sites, but creates dependency problems for sites that gather content from users (Google Earth, social media generally, forums, etc.).
SharedArrayBuffer
The Multi-Screen Window Placement API allows you to place windows on any display connected to your machine, store that placement, and make a window full-screen on any display. With this API, a presentation app can show slides on one screen and speaker notes on another. An art or music creation app can place palettes on a second screen. And a restaurant can show a touchscreen menu on a kiosk and a separate window for employees. Incorporating developer feedback from the first origin trial, the API enters a second origin trial with an improved shape and ergonomics.
Window controls overlay extends an app's client area to cover the entire window, including the title bar, and the window control buttons (close, maximize/restore, minimize). The web app developer is responsible for drawing and input-handling for the entire window except for the window controls overlay. Developers can use this feature to make their installed desktop web apps look like O.S. apps. For more information, see Customize the window controls overlay of your PWA's title bar.
PWA as URL Handlers allows apps like music.example.com to register themselves as URL handlers for URLs that match patterns like https://music.example.com, https://*.music.example.com, or https://🎵.example.com, so that links from outside of the PWA, for example, from an instant messenger application or an email client, open in the installed PWA rather than in a browser tab.
music.example.com
https://music.example.com
https://*.music.example.com
https://🎵.example.com
Web Bundles provides a new approach to load a large number of resources efficiently using a format that allows multiple resources to be bundled. This feature addresses issues with previous approaches to resource bundling.
The output of some JavaScript bundlers does not interact well with the HTTP cache and configuring them can sometimes be difficult. Even with bundled JavaScript, execution needs to wait for all bytes to download. Ideally loading multiple subresources should use streaming and parallelization, which is not possible with one JavaScript file. For JavaScript modules, execution still needs to wait for an entire resource tree to download because of deterministic execution.
WebXR applications can now retrieve data about planes present in a user's environment, which enables augmented reality applications to create more immersive experiences. Without this feature, developers would have to resort to running their own computer vision algorithms on data from getUserMedia() (available on navigator and MediaDevices) in order to detect planes present in the users' environment. Such solutions have thus far been unable to match the quality and accuracy of native augmented reality capabilities or support world scale.
getUserMedia()
navigator
MediaDevices
AbortSignal.abort() is a static method that allows creating a new AbortSignal object that is already aborted. It is similar in spirit to Promise.reject(), and provides improved developer ergonomics.
AbortSignal.abort()
Promise.reject()
Web developers have found aborted AbortSignal objects to be useful for a variety of purposes. They signify to JavaScript APIs that no work should be done. Currently, creating an already-aborted AbortSignal object requires multiple lines of code. AbortSignal.abort() requires one: return AbortSignal.abort();
return AbortSignal.abort();
The flexbox and flex items now obey positional alignment keywords. Flexbox previously only obeyed center, flex-start, and flex-end. The additional alignment keywords (start, end, self-start, self-end, left, right) allow authors to more easily align the flex items in the face of varying writing modes and flex flows.
center
flex-start
flex-end
start
end
self-start
self-end
left
right
Without these additional keywords, developers need to change the keyword values whenever they change the writing mode, text direction, or flex reversal properties (flex-direction: row-reverse, flex-direction:column-reverse or align-content: wrap-reverse). The keywords implemented here let them set alignment once.
flex-direction: row-reverse
flex-direction:column-reverse
align-content: wrap-reverse
The Error() constructor supports a new options property called cause, which will be assigned to the error as a property. This allows errors to be chained without unnecessary and overelaborate formalities on wrapping the errors in conditions.
Error()
The meta element's "media" attribute will be honored for meta[name="theme-color"] so that web developers can adjust the theme color of their site based on a media query (dark and light modes for instance). The first one that matches will be picked.
meta[name="theme-color"]
The HTMLMediaElement.controlsList property now supports noplaybackrate, which allows websites to enabled or disable the playback speed control exposed by the browser. With browser vendors adding playback speed control to their media controls, developers should have a way to control the visibility of this new control. Try the new property on the noplaybackrate in HTMLMediaElement.controlsList Sample.
noplaybackrate
HTMLMediaElement.controlsList
The CSS user preference media feature prefers-color-scheme has a potentially significant impact on the amount of CSS that needs to be delivered by a page and on the experience the user is going to have when the page loads. The new Sec-CH-Prefers-Color-Scheme client hint header allows sites to obtain the user's preference optionally at request time, allowing servers to inline the right CSS and therefore avoid a flash of incorrect color theme.
prefers-color-scheme
Sec-CH-Prefers-Color-Scheme
This version of Chrome adds four new features and changes to the User-Agent client hints API.
Sec-CH-UA-Platform
Low-entropy hints are those that don't give away too much information, or give information that would be too easy to discover in other ways to realistically hide. In the context of client hints, this means that these hints are available in every request, whether or not the origin involved requested it or whether the frame involved is a first or third party context.
The WebOTP API will now be supported on desktop when both Chrome on Desktop and Android Chrome are logged in using the same Google account. The WebOPT API provides the ability to programmatically read a one-time code from specially-formatted SMS messages addressed to their origin, reducing user friction during sign-on. Previously, this was only available on mobile devices where SMS was supported.
This version of Chrome incorporates version 9.3 of the V8 JavaScript engine. It specifically includes the changes listed below. You can find a complete list of recent features in the V8 release notes.
Object.hasOwn, a new boolean property, provides an easier-to-use, static method version of Object.prototype.hasOwnProperty.
Object.hasOwn
Object.prototype.hasOwnProperty
Connections to HTTP, HTTPS or FTP servers on ports 989 and 990 now fail. These ports are used by the FTPS protocol, which has never been implemented in Chrome. However, FTPS servers can be attacked in a cross-protocol attack by malicious web pages using carefully-crafted HTTPS requests. This is a mitigation for the ALPACA attack.
Chrome has now removed support for the TLS_RSA_WITH_3DES_EDE_CBC_SHA cipher suite. TLS_RSA_WITH_3DES_EDE_CBC_SHA is a remnant of the SSL 2.0 and SSL 3.0 era. 3DES in transport layer security (TLS) is vulnerable to the Sweet32 attack. Being a CBC cipher suite, it is also vulnerable to the Lucky Thirteen attack. The first replacement AES cipher suites were defined for TLS in RFC3268, published around 19 years ago, and there have been several iterations since.
WebAssembly module sharing between cross-origin but same-site environments will be deprecated to allow agent clusters to be scoped to origins long term. This follows a WebAssembly specification change, which has an impact on the platform as well.
Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 92 is beta as of June 3, 2021
Now that web apps are capable of reading and writing files, the next logical step is to let developers declare web apps as file handlers for files they create and process. The File Handling API allows you to do exactly this. For example, after a text editor PWA has registered itself as a file handler, you can right-click a .txt file in your operating system's file manager and instruct this PWA to (always or just once) open .txt files. This means PWAs are just a (double) click away from the file manager.
This improves the user experience for PWA use cases, making them more like OS apps than they are already. For example:
File Handling is starting an origin trial in 92 that is expected to run until around the end of August, 2021. For more information on this feature, see Let web applications be file handlers. For information about other origin trials in this release, see Origin Trials, below.
Shared Element Transitions allows a simple set of transitions in both single-page applications (SPAs) and multi-page applications (MPAs). This enhances the visual polish of pages with minimal effort by letting developers select from a set of user-agent provided transition effects. Without this, single-page app transitions are difficult since they require a careful coordination of animations and DOM manipulations to achieve the desired effect. Multi-page app transitions are, for the most part, not possible since each page can only control the contents of its own view. This origin trial is only for SPA use cases.
Most Android launchers now allow only three app shortcuts instead of the previously allowed four. A shortcut to the site settings was added to the application icon in the Android launcher, taking one of the available shortcut slots for the app. For more information, see Get things done quickly with app shortcuts.
Adds the size-adjust descriptor for @font-face allowing scaling of glyph sizes for a particular font face without affecting the CSS font-size and derived metrics such as em. CSS font-size can be seen as a scale factor for a box that the font draws in. Glyph sizes within that box vary between fonts, and size-adjust enables harmonising them across different fonts. That's why it reduces cumulative layout shift by matching up the fallback font and primary web font using this descriptor.
@font-face
font-size
Imperative slotting allows node-to-slot assignments without needing the slot attribute in markup. This enables dynamic slotting behavior based on input conditions and types. The feature originally shipped in Chrome 86; in this release some adjustments to the API have been made to ensure interoperability with other browsers.
This version of Chrome incorporates version 9.2 of the V8 JavaScript engine. It specifically includes the changes listed below. You can find a complete list of recent features in the V8 release notes.
A dayPeriod option (part of ECMA402 2021) has been added to the Intl.DateTimeFormat() method so the caller can format times such as "7 in the morning", "11 in the morning", "12 noon", "1 in the afternoon", "6 in the evening", "10 at night" (or in Chinese, "清晨7時", "上午11時", "中午12時", "下午1時" ,"下午6時" ,"晚上10時").
Intl.DateTimeFormat()
This enhances Intl.DateTimeFormat() to match what is already possible in C++ and Java by calling ICU and ICU4J. Without this feature, developers need to either format the quarter in the server or ship a set of day period patterns and hour to day period mappings from the server to client to perform such tasks.
Adds a new method named at(), to Array.prototype, String.prototype, and the TypedArray prototypes, that permit relative indexing with negative indices. For example: let arr = [1,2,3,4]; arr.at(-1); // Returns 4
at()
Array.prototype
String.prototype
TypedArray
let arr = [1,2,3,4]; arr.at(-1); // Returns 4
The ICU LocaleMatcher now implements the BestFitMatcher abstract operation to better match locale data.
SharedArrayBuffers on desktop platforms are now restricted to cross-origin isolated environments, matching the behavior recently shipped on Android and Firefox. A Cross-origin isolated page is considered a secure environment because it blocks loading cross-origin resources that are not opt-in and communicating with cross-origin windows. Only pages that opt-in to cross-origin isolation will be able to use SharedArrayBuffers. Learn more about the upcoming options at SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92.
SharedArrayBuffers
Adds actions to the Media Session API, specifically "togglemicrophone", "togglecamera", and "hangup". This enables developers of video conferencing websites to handle these actions from the browser interface. For example, if the user puts their video call into a picture-in-picture window, the browser could display buttons for mute/unmute, turn-on/turn-off camera, and hanging up. When the user clicks these, the website handles them through the Media Session API. For more information, see the section from our recent article, or try our demo.
"togglemicrophone"
"togglecamera"
"hangup"
Chrome now accounts for the tainted origin flag when computing whether a fetched resource passes the timing allow origin check. The timing allow origin check is used in resource timing to determine whether the page can receive detailed timing information about a resource used in the page. The tainted origin flag impacts this check in cases where there are multiple redirects that cross origins. In those cases, the header should be '*'. In other words, it can no longer be a specific origin.
If a resource performs two cross-origin crosses (via redirects), then the developer needs to use Timing-Allow-Origin: * for the checks to pass. For example if a page on origin A fetches a resource on origin B, which redirects to a resource on origin C, then the tainted origin flag is set and the final resource needs to have Timing-Allow-Origin: * in order to receive detailed timing information."
Timing-Allow-Origin: *
Web applications can now register themselves as handlers of custom URL protocols or schemes using their web app manifests. Operating system applications often register themselves as protocol handlers to increase discoverability and usage. Websites can already register to handle schemes via registerProtocolHandler(), it is desirable to have web apps be first-class citizens and be launched directly when a custom-scheme link is invoked.
The Web Bluetooth API can now filter based on manufacturer data such as vendor ID and product ID. Developers have been able to prompt users through a browser picker to select a nearby Bluetooth device that matches their advertised name and services. However it hasn't been possible to filter nearby Bluetooth devices based on advertised manufacturer specific data. Manufacturer data is specified through new properties on options.filters, which is passed to Bluetooth.requestDevice(). For more information, see Communicating with Bluetooth devices over JavaScript or try our demo.
Bluetooth.requestDevice()
This feature, which enabled web-based payment handlers to receive paymentrequest events with non-URL, but standardized payment method identifiers, such as "basic-card" or "tokenized-card", has been removed.
paymentrequest
"basic-card"
"tokenized-card"
Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 91 is beta as of April 22, 2021.
The new Web App Manifest member called capture_links controls what happens when the user navigates to a page within scope of an installed web app. It allows sites to automatically open a new PWA window when the user clicks a link to their app or to have a single window mode like mobile apps. Sign up for the origin trial and learn more on the origin trial dashboard.
capture_links
WebTransport is a protocol framework that enables clients constrained by the Web security model to communicate with a remote server using a secure multiplexed transport.
Currently, Web application developers have two APIs for bidirectional communications with a remote server: WebSockets and RTCDataChannel. WebSockets are TCP-based, thus having all of the drawbacks of TCP (head of line blocking, lack of support for unreliable data transport) that make it a poor fit for latency-sensitive applications. RTCDataChannel is based on the Stream Control Transmission Protocol (SCTP), which does not have these drawbacks; however, it is designed to be used in a peer-to-peer context, which causes its use in client-server settings to be fairly low. WebTransport provides a client-server API that supports bidirectional transfer of both unreliable and reliable data, using UDP-like datagrams and cancellable streams. WebTransport calls are visible in the Network panel of DevTools and identified as such in the Type column.
WebSockets
RTCDataChannel
For more information, see Experimenting with WebTransport. Sign up for the origin trial and learn more on the origin trial dashboard.
WebXR applications can now retrieve data about planes (flat surfaces) in the user's environment, allowing better user experiences with less processing power. Without this feature plane detection requires custom computer vision algorithms using data from MediaDevices.getUserMedia(). These solutions usually fall short of quality and accuracy expectations for AR experiences and don't support world scale. Sign up for the origin trial and learn more on the dashboard.
MediaDevices.getUserMedia()
WebAssembly SIMD exposes hardware SIMD instructions to WebAssembly applications in a platform-independent way. This introduces a new 128-bit type that can represent different types of packed data, and several vector operations that work on packed data. SIMD can boost performance by exploiting data level parallelism and is also useful when compiling native code to WebAssembly. For more information, see the V8 feature explainer for WebAssembly SIMD.
Coarsening of performance.now() and related timestamps based on site isolation status is now consistent across platforms. This decreases the resolution on desktop from 5 microseconds to 100 microseconds in non-isolated contexts. It also increases their resolution on Android from 100 microseconds to 5 microseconds in cross-origin isolated contexts, where it's safe to do so.
performance.now()
On desktop, apps can now read files from the clipboard (but not write files to the clipboard). For files on the clipboard, apps have read-only access.
async function onPaste(e) { let file = e.clipboardData.files[0]; let contents = await file.text(); }
The CSS @counter-style rule allows web authors to specify and use custom counter styles in list markers and CSS counters. This helps internationalization. This change implements all of the features in CSS Counter Styles Level 3 except:
@counter-style
speak-as
symbols()
The :host() and :host-context() pseudo-classes now accept a single <compound-selector> in addition to a <compound-selector-list>.
:host()
:host-context()
<compound-selector>
<compound-selector-list>
Form controls have a new, refreshed appearance, with better accessibility and touch support. This was a collaboration between Microsoft and Google, and if you'd like additional information, you can view a past CDS talk or the Microsoft's blog post.
In this release, we have brought the same form controls UX to Android as already launched on other platforms. The new form controls include automatically darkening form controls and scrollbars when in dark mode.
Dark mode is an accessibility feature that allows web authors to enable their web pages to be viewed in dark mode. When enabled, users are able to view dark mode supported websites by toggling the dark mode settings on their Android devices. dark mode is easier on the eyes in a low light environment and lowers battery consumption.
The GravitySensor interface provides a three-axis reading of the gravity force. It's already possible to derive readings close to those provided by this interface removing the LinerAccelerometer reading from the Accelerometer reading.
GravitySensor
LinerAccelerometer
Accelerometer
When using the File System Access API, web apps can now suggest the name and location of a file or directory that is being created or loaded. This provides a better user experience and brings web apps closer to the behavior of system apps. For more about the File System Access API, see The File System Access API: simplifying access to local files.
The WebOTP API is now usable in cross-origin iframes when enabled by a permission policy. The WebOTP API gives developers the ability to programmatically read one time codes from specially-formatted SMS messages addressed to their origin to reduce user friction. Many sites embed iframes that handle authentication.
Chrome supports WebSockets over HTTP/2 in Chromium as specified in RFC 8441. This is only used for secure WebSockets requests, and only when there is already an HTTP/2 connection where the server has already advertised support for WebSockets over HTTP/2 via the HTTP/2 SETTINGS parameter defined in the specification.
Since 2015 developers have used Digital Asset Links (DALs) to associate Android apps with websites to assist users with logging in. If you employ multiple domains that share the same account management backend, you can now also associate them with one another to enable users to save credentials once and have the Chrome password manager suggest them to any of the affiliated websites. For more information, see Enable Chrome to share login credentials across affiliated sites.
This version of Chrome incorporates version 9.1 of the V8 JavaScript engine. It specifically includes the changes listed below. You can find a complete list of recent features in the V8 release notes.
JavaScript now supports modules in service workers. Setting 'module' type by the constructor's type attribute, worker scripts are loaded as ES modules and the import statement is available on worker contexts. With this feature, web developers can more easily write programs in a composable way and share them among a page and workers.
'module'
import
Developers can now test for the existence of private fields in an object using the syntax #foo in obj.
#foo in obj
This version of Chrome introduces the deprecation listed below. Visit ChromeStatus.com for lists of previous removals.
Chrome allows iframes to trigger Javascript dialogs. For example it shows “<URL> says ...” when the iframe is the same origin as the top frame, and “An embedded page on this page says...” when the iframe is cross-origin. This is confusing, and has led to spoofs where sites pretend the message comes from Chrome or a different website.
Chrome 91 deprecates this ability. Removing support for cross origin iframes’ ability to call alert(), confirm(), and prompt() will prevent this kind of spoofing, and unblock further UI simplifications. For example, this means notexample.com will no longer be able to call window.alert(), window.prompt(), or window.confirm() if embedded in an iframe on example.com.
alert()
confirm()
prompt()
window.alert()
window.prompt()
window.confirm()
Unless otherwise noted, changes described below apply to the newest Chrome beta channel release for Android, Chrome OS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 90 is beta as of March 11, 2021.
An AV1 encoder is shipping in Chrome desktop that is specifically optimized for video conferencing with WebRTC integration. The benefits of AV1 include:
This is an important addition to WebRTC especially since it recently became an official W3C and IETF standard.
The mediaDevices.getCurrentBrowsingContextMedia() method allows capturing a MediaStream with the current tab's video (and potentially audio), similar to getDisplayMedia(). Unlike getDisplayMedia(), calling this new method will eventually present the user with a simple accept/reject dialog box. If the user accepts, the current tab is captured. However, this will require some additional security measures which are still being finalized. Until then, or if the call is made with these measures absent, a dialog is displayed to the user that allows the selection of any source, but highlights the option of the current tab (whereas normally getDisplayMedia highlights the option of entire-screen).
An API for manipulating raw media carried by MediaStreamTracks such as the output of a camera, microphone, screen capture, or the decoder part of a codec and the input to the decoder part of a codec. It uses WebCodecs interfaces to represent raw media frames and exposes them using streams, similar to the way the WebRTC Insertable Streams API exposes encoded data from RTCPeerConnections. This is intended to support use cases such as:
This origin trial is expected to run through Chrome 92.
Subresource loading with Web Bundles provides a new approach to loading a large number of resources efficiently using a format that allows multiple resources to be bundled., e.g. Web Bundles.
The output of JavaScript bundlers (e.g. webpack) doesn't interact well with browsers. They are good tools but:
This origin trial also allows a bundle to include the source for an opaque-origin iframe as urn:uuid: resources. The scheme for these resources is expected to change in Chrome 91.
urn:uuid:
WebAssembly now provides exception handling support. Exception handling allows code to break control flow when an exception is thrown. The exception can be any that is known by the WebAssembly module, or it may be an unknown exception that was thrown by a called imported function. This origin trial is expected to run through Chrome 94.
Lighting estimation allows sites to query for estimates of the environmental lighting conditions within WebXR sessions. This exposes both spherical harmonics representing the ambient lighting, as well as a cubemap texture representing "reflections". Adding Lighting Estimation can make your models feel more natural and like they "fit" better with the user's environment.
The aspect-ratio property allows for automatically computing the other dimension if only one of width or height is specified on any element. This property was originally launched as non-interpolable (meaning that it would snap to the target value) when animated. This feature provides smooth interpolation from one aspect ratio to another.
aspect-ratio
Custom elements now expose their states via the state CSS pseudo class. Built-in elements have states that can change over time depending on user interaction and other factors, which are exposed to web authors through pseudo classes. For example, some form controls have the "invalid" state, which is exposed through the :invalid pseudo class. Since custom elements also have states it makes sense to expose their states in a manner similar to built-in elements.
The default values of CSS property appearance and -webkit-appearance for the following form controls are changed to 'auto'.
appearance
-webkit-appearance
'auto'
<select>
<input type=date>
<input type=datetime-local>
<input type=month>
<input type=time>
<input type=week>
Note that the default rendering of these controls are not changed.
The clip value for overflow results in a box's content being clipped to the box's overflow clip edge. In addition, no scrolling interface is provided, and the content cannot be scrolled by the user or programmatically. Additionally the box is not considered a scroll container, and does not start a new formatting context. As a result, this value has better performance than overflow: hidden.
clip
overflow
overflow: hidden
The overflow-clip-margin property enables specifying how far outside the bounds an element is allowed to paint before being clipped. It also allows the developer to expand the clip border. This is particularly useful for cases where there is ink overflow that should be visible.
overflow-clip-margin
The Permissions-Policy HTTP header replaces the existing Feature-Policy header for controlling delegation of permissions and powerful features. The header allows sites to more tightly restrict which origins can be granted access to features.
Permissions-Policy
Feature-Policy
The Feature Policy API, introduced in Chrome 74, was recently renamed to "Permissions Policy", and the HTTP header has been renamed along with it. At the same time, the community has settled on a new syntax, based on structured field values for HTTP.
Protect application/x-protobuffer from speculative execution attacks by adding it to the list of never sniffed MIME types used by Cross-Origin-Read-Blocking. application/x-protobuf is already protected as a never sniffed mime type. application/x-protobuffer is another commonly used MIME type that is defined as an "ALT_CONTENT_TYPE" by the protobuf library.
application/x-protobuffer
Cross-Origin-Read-Blocking
application/x-protobuf
"ALT_CONTENT_TYPE"
When data is passed to FileSystemWritableFileStream.write() that would extend past the end of the file, the file is now extended by writing 0x00 (NUL). This enables creating sparse files and greatly simplifies saving content to a file when the data to be written is received out of order. Without this functionality, applications that receive file contents out of order (for example, BiTtorrent downloads) would have to manually resize the file either ahead of time or when needed during writing.
FileSystemWritableFileStream.write()
0x00
NUL
Currently, Range is the only constructible range type available to web authors. However, Range objects are "live" and maintaining them can be expensive. For every tree change, all affected Range objects need to be updated. The new StaticRange objects are not live and represent a lightweight range type that is not subject to the same maintenance cost as Range. Making StaticRange constructible allows web authors to use them for ranges that do not need to be updated on every DOM tree change.
Range
StaticRange
The <source> element now supports width and height properties when used inside a <picture> element. This allows Chrome to compute an aspect ratio for <picture> elements. This matches similar behavior for <img>, <canvas> and <video> elements.
<source>
width
height
<picture>
<img>
<canvas>
<video>
It is no longer possible to set periodicWave to null when creating a new OscillatorNode object. This value is set on the options object passed to the OscillatorNode() constructor. The WebAudio spec doesn't allow setting this value to null. Chrome now matches both the spec and Firefox.
OscillatorNode
OscillatorNode()
This version of Chrome incorporates version 9.0 of the V8 JavaScript engine. It specifically includes the changes listed below. You can find a complete list of recent features in the V8 release notes.
Array, String, and TypedArray now support the at() method, which supports relative indexing with negative numbers. For example, the code below returns the last item in the given array.
let arr = [1,2,3,4]; arr.at(-1);
The 'plugin-types' directive allows developers to restrict which types of plugin can be loaded via <embed> or <object> html elements. This allowed developers to block Flash in their pages. Since Flash support has been discontinued, there is no longer any need for this policy directive.
<embed>
<object>
Chrome has removed support for the non-standard RTP data channels in WebRTC. Users should use the standard SCTP-based data channels instead.
Chrome now returns empty for navigator.plugins and navigator.mimeTypes. With the removal of Flash, there is no longer the need to return anything for these properties.
navigator.plugins
navigator.mimeTypes