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.
int foo();int fiver(int num) { for(int j = 0; j < 5; j++) num = num + foo(); return num;}
inline int foo() { return 3; };int fiver_inline(int num) { for(int j = 0; j < 5; j++) num = num + foo(); return num;}
int fiver_inline(int num) { for(int j = 0; j < 5; j++) num = num + 3; return num;}
return num + 15;
g.c extern int f1(); extern int f2(); extern int f3(); int g() { f1(); for(..) { f3(); } f1(); f2();}
Posted by Theodore Olsauskas-Warren
At Chrome, we’re always looking for ways to help users better understand and manage privacy on the web. Our most recent change provides more clarity on controlling site storage settings.
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. Chrome 97 is beta as of November 18, 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. For more information, see Force Chrome major version to 100 in the User-Agent string.
chrome://flags/#force-major-version-to-100
Closed details elements are now searchable and can now be linked to. These hidden elements will also automatically expand when find-in-page, ScrollToTextFragment, and element fragment navigation are used.
find-in-page
ScrollToTextFragment
Dedicated workers are now governed by Content Security Policy. Previously, Chrome incorrectly applied the Content Security Policy of the owner document.
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 oblique, bold, and small-caps faces, respectively. Without the font-synthesis property some web pages that do not have font families with the required variations may have unnatural forms of fonts
font-synthesis
The perspective() function now supports the value 'none' as an argument. This causes the function to behave as though it were passed an argument that is infinite. This makes it easier (or, in some cases, possible) to do animations involving the perspective() function where one of the endpoints of the animation is the identity matrix.
perspective()
'none'
Chrome supports a new keyboard-map value for the allow list of a feature policy. Keyboard.getLayoutMap() helps identify a key pressed key for different keyboard layouts such as English and French. This method is unavailable in iframe elements. The architecture of some web apps (Excel, Word, and PowerPoint) that could not use the Keyboard API can now do so.
keyboard-map
Keyboard.getLayoutMap()
The HTMLScriptElement.supports() method provides a unified way to detect new features that use script elements. Currently there is no simple way to know what kind of types can be used for the type attribute of HTMLScriptElement.
HTMLScriptElement.supports()
HTMLScriptElement
Newlines in form entries are now normalized the same as Gecko and WebKit, solving a long-standing interoperability problem where Gecko and WebKit normalized newlines late, while Chrome did them early. Starting in Chrome 97, early normalization is removed and late normalization is extended to all encoding types.
Chrome 97 standardizes client hint names by prefixing them with Sec-CH-. Affected client hints are dpr, width, viewport-width, device-memory, rtt, downlink, and ect. Chrome will continue to support existing versions of these hints. Nevertheless, web developers should plan for their eventual deprecation and removal.
Sec-CH-
dpr
width
viewport-width
device-memory
rtt
downlink
ect
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.
This version of Chrome incorporates version x.x 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 and TypedArray now support the findLast() and fileLastIndex() static methods. These functions are analogous to find() and findIndex() but search from the end of an array instead of the beginning.
Array
TypedArray
findLast()
fileLastIndex()
find()
findIndex()
The SDES key exchange mechanism for WebRTC has been declared a MUST NOT in the relevant IETF standards since 2013. The SDES specification has been declared historic by the IETF. Its usage in Chrome has declined significantly over the recent year. Consequently it is removed as of Chrome 97.
WebSQL in third-party contexts is now removed. The Web SQL Database standard was first proposed in April 2009 and abandoned in November 2010. Gecko never implemented this feature and WebKit deprecated it in 2019. The W3C encourages Web Storage and Indexed Database for those needing alternatives.
The Session Description Protocol (SDP) used to establish a session in WebRTC has been implemented with two different dialects in Chromium: Unified Plan and Plan B. Plan B is not cross-browser compatible and is hereby removed.
The big day is finally here. Today, at Chrome Dev Summit 2021 we shared some of the highlights of what we've been working on — the latest product updates, vision for the web's future and examples of best-in-class web experiences. Over the past year, we've also had a lot of feedback that you want to spend more time learning from and working with the Chrome team and other industry experts. I'm excited to share with you that we've opened up a lot of spaces for 1:1 office hours, workshops and learning lounges to give you more opportunity to connect with the Chrome team.
It's been a busy year for us all and with the continued shift of people moving more of their lives online, it has been more important than ever for us to continue investing in Web Compat, and we've been amazed to see the improvements in compatibility across the board that is helping to make it easier for you to build sites that work across all browsers for everyone who uses the web.
We've also got a number of important updates to core topics that are important to every developer:
This post is an overview of the latest updates from this year's Chrome Dev Summit keynote.
The Privacy Sandbox continues to be a cornerstone of our ongoing efforts to collaboratively build privacy-preserving technologies for a healthy web. Our development timeline, which we'll update monthly, shares when developers and advertisers can expect these technologies to be ready for testing and scaled adoption. This timeline reflects three developmental phases for Privacy Sandbox proposals:
Dozens of ideas for privacy-preserving technologies have been proposed by Chrome and others, for public discussion in forums such as the W3C and GitHub . For example, more than 100 organizations are helping to refine FLEDGE, a proposal for privacy-preserving remarketing.
Success at this stage depends on developers engaging in hands-on testing then sharing their learnings publicly. Yahoo! JAPAN's analysis of the Attribution Reporting API and Criteo's machine learning competition for evaluating privacy concepts are examples we're grateful for.
This kind of feedback is critical to getting solutions right. For instance, we're currently improving FLoC — a proposal for anonymized interest groups — with insights from companies such as CafeMedia.
Some Privacy Sandbox proposals are already live, such as User-Agent Client Hints which are meant to replace the User-Agent (UA) string. We'll start to gradually reduce the granularity of information in the UA string in April 2022. We know implementing these changes take time, so companies will have the option to use the UA string as is through March 2023 via an origin trial.
With Project Fugu, we've been introducing APIs that elevate web apps so they can do anything native apps can. We've also been inspired by brands building more immersive web experiences with Progressive Web Apps (PWAs) and modern APIs.
Take Adobe, a brand we've been partnering with for more than three years. Photoshop, Creative Cloud Spaces, and Creative Cloud Canvas are now in Public Beta and available in browsers—with more flagship apps to follow. This means creatives can view work, share feedback, and make basic edits without having to download or launch native apps.
PWAs have given online video and web conferencing platforms an upgrade too. TikTok found a way to reach video lovers across all devices while YouTube Premium gives people the ability to watch videos offline on laptops and hybrid devices.
Meet drastically improved the audio and video quality in their PWA, and Kapwing focused on making it easy for users to edit videos collaboratively, anytime, anywhere. Zoom replaced their Chrome App with a PWA, and saw 16.9 million new users join web meetings, an increase of more than seven million users year over year.
Developers who want to learn more, or get started with Progressive Web Apps can check out our new Learn PWA course on web.dev. Three modules were launched today, with many more coming.
Measuring site performance is a key part of navigating browsers as they evolve, which is where Core Web Vitals come in. Compared to a year ago, 20% more page visits in Chrome and 60% of the total visits in Chrome fully meet the recommended Core Web Vitals thresholds.
Content management systems, website builders, e-commerce platforms, and JavaScript frameworks have helped push the Web Vitals initiative forward. As we shared in our Core Web Vitals Technology Report, sites built on many of these platforms are hitting Core Web Vitals out of the park:
While this kind of progress is exciting, optimizing for Core Web Vitals can still be challenging. That's why we've been improving our tools to help developers better monitor, measure, and understand site performance. Some of these changes include:
We're also experimenting with two new performance metrics: overall input responsiveness and scrolling and animation smoothness. We'd love to get your feedback, so take a spin through at web.dev/responsiveness and web.dev/smoothness.
We've got developers and designers covered with tons of changes coming down the pipeline for UI styling and DevTools, including updates to responsive design. Developers can now customize user experiences in a component-driven architecture model, and we're calling this The New Responsive:
With the new container queries spec—available for testing behind a flag in Chrome Canary—developers can access a parent element's width to make styling decisions for its children, nest container queries, and create named queries for easier access and organization.
This is a huge shift for component-based development, so we've been providing new DevTools for debugging, styling, and visualizing CSS layouts. To make creating interfaces even easier, we also launched a collection of off-the-shelf UI patterns.
Developers who want to learn more can dive into free resources such as Learn Responsive Design on web.dev—a collaboration with Clearleft's Jeremy Keith—and six new modules in our Learn CSS course. There are also a few exciting CSS APIs in their first public working drafts, including:
One feature we're really excited to build on is Dark Mode, especially because we found indications that dark themes use 11% less battery power than light themes for OLED screens. Stay tuned for a machine-learning-aided, auto-dark algorithm feature in an upcoming version of Chrome.
Part of what makes the web so special is that it's an open, decentralized ecosystem. We encourage everyone to make the most of this by getting involved in shaping the web's future in places such as:
We can't wait to see what the web looks like by next year's summit. Until then, check out our library of learning resources on the Chrome Dev Summit site and the Chrome Developers YouTube channel, and sign up for the web.dev newsletter.