Google Chrome What's New - 90+

[rogerxu]

Google Chrome version history - Wikipedia

[rogerxu]

Chrome 90

What’s New in Chrome 90, Available Now

AV1 Encoder Optimized for Video Calls

Chrome 90 on the desktop has support for the AV1 Encoder, which uses the WebRTC standard and is optimized for video calling.

HTTPS is Now Default

Chrome 90 will attempt to load websites over HTTPS by default.

Hide the Reading List Without a Flag

Give Chrome Windows Specific Names

Chrome 90 rolling out: AV1 encoder optimized for video calls, easily hide Reading List - 9to5Google

New in Chrome 90 - Chrome Developers

Prevent overflow with overflow:flip

.overflow-clip {
  overflow: clip;
}

Using overflow: clip makes it possible for you to prevent any type of scrolling for the box, including programmatic scrolling. That means the box is not considered a scroll container; it does not start a new formatting context, which gives it better performance than overflow: hidden.

Declarative Shadow DOM

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

What's New In DevTools (Chrome 90) - Chrome Developers

New CSS flexbox debugging tools

In addition, the Layout pane has a Flexbox section, display all the flexbox elements on the page.

[rogerxu]

Chrome 91

What’s New in Chrome 91, Available Now

Copy & Paste for Files

Previously, if you wanted to attach a file to an email, you’d have to drag it from the file explorer and drop it in the email tab. You can now simply Ctrl+C to copy and Ctrl+V to paste it.

Chrome for Android Can “Follow” Websites

A new option in the menu will allow you to “Follow” a website. Whenever that site published new content, it will show up in the new “Following” section on the New Tab page.

Chrome 91 rolling out: freeze Tab Groups, Android tablets load desktop sites - 9to5Google

Freeze Tab Groups

When Tab Groups are collapsed to take up less space, Chrome 91 will freeze those pages to free up system resources.

Android tablets load desktop site

Chrome on Android tablets now requests the desktop versions of sites rather than the mobile variant if the screen size is large enough. Smaller tablets will continue to request the phone version.

New in Chrome 91 - Chrome Developers

Suggested names for File System Access API

Pass a suggestedName property as part of the showSaveFilePicker options.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

The same goes for the default starting directory.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

Reading files from the clipboard

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Share credentials on affiliated sites

Host the assetlinks.json file in the .well-known folder for each domain.

```json [{ "relation": ["delegate_permission/common.get_login_creds"], "target": { "namespace": "web", "site": "https://www.example.com" } }, { "relation": ["delegate_permission/common.get_login_creds"], "target": { "namespace": "web", "site": "https://www.example.co.uk" } }] ```

What's New In DevTools (Chrome 91) - Chrome Developers

Visualize CSS scroll-snap

You can now toggle the scroll-snap badge in the Elements panel to inspect the CSS scroll-snap alignment.

New Memory inspector

Use the new Memory inspector to inspect an ArrayBuffer in JavaScript, as well as the Wasm memory.

New badge settings pane in the Elements panel

You can now selectively enable or disable badges via the Badge settings in the Elements panel.

Enhanced image preview with aspect ratio information

Image previews in the Elements panel now displays more information on the image - rendered size, rendered aspect ratio, intrinsic size, intrinsic aspect ratio, and file size.

New network conditions button with options to configure Content-Encodings

A new network conditions button is added in the Network panel. Click on it to open the Network conditions tab.

A new Accepted Content-Encodings option is added to the Network conditions tab.

Support hover preview with [] notation

[rogerxu]

Chrome 92

Chrome

What’s New in Chrome 92, Available Now (howtogeek.com)

New Chrome Action for Safety Checks

Web Apps Can Handle Files

It’s common to get asked which app you want to use to open a file on your Android device. Now, you’ll also see web apps as available options.

Memories: A New Way to See History

Memories is available under a flag (chrome://flags/#memories) on the desktop. Once it’s enabled, you can go to chrome://memories, and you’ll see a brand new UI for your history.

Web Feed

Instead of finding an RSS feed and adding it to your RSS reader of choice, you can simply “Follow” a website from Chrome, and new content will appear on the “New Tab” page under the “Following” tab.

Chrome 92 rolling out: Better permission, Sharing Hub, more - 9to5Google

DevTools

What's New In DevTools (Chrome 92) - Chrome Developers

CSS grid editor

Support for const redeclarations in the Console

Source order viewer

You can now view the order of source elements on screen for better accessibility inspection.

New shortcut to view frame details

View iframe details by right clicking on the iframe element in the Elements panel, and select Show frame details.

This takes you to a view of the iframe's details in the Application panel where you can examine document details, security & isolation status, permissions policy, and more to debug potential issues.

Enhanced CORS debugging support

Cross-origin resource sharing (CORS) errors are now surfaced in the Issues tab. There are various reasons causing CORS errors. Click to expand each issue to understand the potential causes and solutions.

Rename XHR label to Fetch/XHR in the Network panel

The XHR label is now renamed to Fetch/XHR. This change makes it clearer that this filter includes both XMLHttpRequest and Fetch API network requests.

[rogerxu]

Chrome 93

Features

What’s New in Chrome 93, Available Now (howtogeek.com)

Sync Two-Factor OTP Codes Across Devices

Google rolling out Chrome 93 on Mac, Windows, Android, iOS - 9to5Google

Dev Features

New in Chrome 93 - Chrome Developers

CSS Module Scripts

You can now load CSS style sheets with import statements, just like JavaScript modules.

Unlike other ways of applying CSS from JavaScript, there is no need to create elements, or mess with JavaScript strings of CSS text.

To use it, import the style sheet with assert {type: 'css'}, then apply it to the document or shadowRoot by calling adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

But beware, if you leave off the assert - the file will be treated as JavaScript, and won't work!

Multi-Screen Window Placement API

The Multi-Screen Window Placement API makes it possible to enumerate the displays connected to the users machine, and place windows on specific screens.

You can quickly check if there's more than one screen connected to the device:

const isExtended = window.screen.isExtended;
// returns true/false

But, the key functionality is in window.getScreens(), which provides all the details about the attached displays.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

For example, you can determine the primary screen, then use requestFullscreen() to display an element on that screen.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

And it provides a way to listen for changes, for example if a new display is plugged in, or removed.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

DevTools

What's New In DevTools (Chrome 93) - Chrome Developers

Editable CSS container queries in the Styles pane

You can now view and edit CSS container queries in the Styles pane.

Container queries provide a much more dynamic approach to responsive design. The @container at-rule works in a similar way to a media query with @media. However, instead of querying the viewport and user agent for information, @container queries the ancestor container that matches certain criteria.

Web bundle preview in the Network panel

Web bundle is a file format for encapsulating one or more HTTP resources in a single file. You can now preview the web bundle content in the Network panel.

Better string handling in the Console

New context menu in the Console allows you to copy any string in as content, JavaScript literal or JSON literal.

Pretty-printing JSON responses in the Network panel

You can now pretty print JSON responses in the Network panel.

Open a JSON response in the Network panel, click on the {} icon to pretty-print it.

[rogerxu]

Chrome 94

Features

What’s New in Chrome 94, Available Now (howtogeek.com)

Google Drive Files on the New Tab Page

The new card is called “From Your Google Drive” and it shows the three most recently opened documents and files.

Chrome 94 rolling out as first release in the new 4-week update cycle - 9to5Google

Dev Features

New in Chrome 94 - Chrome Developers

WebCodecs

The Web Codecs API makes it possible to use the media components and codecs that are already in the browser.

WebGPU

WebGPU is a new API that exposes modern graphics capabilities, specifically Direct3D 12, Metal, and Vulkan. You can think of it like WebGL, but it provides access to more advanced features of the GPU, and it also provides support for performing general computations on the GPU.

DevTools

What's New In DevTools (Chrome 94) - Chrome Developers

Use DevTools in your preferred language

Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language!

Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools.

New CSS container queries badge

A new container badge is added next to the container elements (the ancestor elements that match the criteria of @container at-rules). Click the badge to toggle the display of an overlay of the chosen container and all its querying descendants on the page.

New checkbox to invert the network filters

Use the new Invert checkbox to invert the filters in the Network panel.

[rogerxu]

Chrome 95

Features

What’s New in Chrome 95, Available Now (howtogeek.com)

Save Tab Groups

Dev Features

New in Chrome 95 - Chrome Developers

Routing with URLPattern

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

const url = '/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);

Picking colors with the Eye Dropper API

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();

User-agent reduction origin trial

DevTools

What's New In DevTools (Chrome 95) - Chrome Developers

New CSS length authoring tools

Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown.

Hover over the unit value, and your mouse pointer is changed to horizontal cursor. Drag horizontally to increase or decrease the value. To adjust the value by 10, hold the Shift key when dragging.

Hide issues in the Issues tab

In the Issues tab, hover over on an issue you would like to hide. Click on More options > Hide issues like this.

Improved the display of properties

DevTools improve the display of properties by:

• Always bold and sort own properties first in the Console, Sources panel and Properties pane.
• Flatten the properties display in the Properties pane.

Sort snippets in the Sources panel

The snippets in the Snippets pane under the Sources panel are now sorted alphabetically. Previously, it’s not sorted.

Improved UI for DevTools command menu

[rogerxu]

Chrome 96

Features

What’s New in Chrome 96, Available Now (howtogeek.com)

Faster Back and Forward Navigation

It’s using a new cache that [saves sites you recently visited](https://www.chromestatus.com/features/6279906713403392) on your computer. That way, when you go back or forward, they’ll be ready quicker. This will come at the cost of Chrome using even more RAM, but it may be worth it.

PNG Files Maintain Metadata

Chrome 96 fixes this behavior. PNG files you paste into Chrome will retain all the associated metadata.

Working on Dark Mode Per-Site

A new flag allows you to add exceptions for sites that you don’t want to display in dark mode.

Dev Features

New in Chrome 96 - Chrome Developers

Manifest id for PWAs

URL protocol handlers for PWAs

Add a protocol_handlers property to your web app manifest, specify the protocol you want to handle, and the url that should be opened when clicked.

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Priority hints (origin trial)

Priority Hints are an experimental feature, available as an origin trial starting in Chrome 96, and can help optimize the Core Web Vitals. The importance attribute allows you to specify the priority for resource types such as CSS, fonts, scripts, images, and iframes.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

DevTools

What's New In DevTools (Chrome 96) - Chrome Developers

Preview feature: New CSS Overview panel

Use the new CSS Overview panel to identify potential CSS improvements on your page. Open the CSS Overview panel, then click on Capture overview to generate a report of your page’s CSS.

Restored and improved CSS length edit and copy experience

The copy CSS and edit as text experience are restored for CSS properties with length.

Rendering tab updates

Emulate the CSS prefers-contrast media feature

The prefers-contrast media feature is used to detect if the user has requested more or less contrast in the page.

Emulate the Chrome’s Auto Dark Theme feature

Use DevTools to emulate auto dark theme to easily see how your page looks when Chrome’s Auto Dark Theme is enabled.

Copy declarations as JavaScript in the Styles pane

Two new options are added in the context menu for you to easily copy CSS rules as JavaScript properties. These shortcuts options are handy especially for developers who are working with [CSS-in-JS](https://developer.chrome.com/blog/css-in-js/#what-is-css-in-js) libraries.

In the Styles pane, right click on a CSS rule. You can select Copy declaration as JS to copy a single rule or Copy all declarations as JS to copy all rules.

New Payload tab in the Network panel

Use the new Payload tab in the Network panel when you inspect a network request with payload.

Improved the display of properties in the Properties pane

The Properties pane now shows only relevant properties instead of showing all properties of the instance. DOM prototypes and methods are now removed.

Console updates

Option to hide CORS errors in the Console

You can hide CORS errors in the Console.

In the Console, click on the Settings icon and uncheck the Show CORS errors in console checkbox.

Proper [Intl](https://tc39.es/ecma402/#intl-object) objects preview and evaluation in the Console

The Intl objects have proper preview now and are evaluated eagerly in the Console.

Consistent async stack traces

The Console now reports async stack traces for async functions to be consistent with other async tasks, and consistent with what's shown in the Call Stack..

[rogerxu]

Chrome 97

Features

What’s New in Chrome 97, Available Now (howtogeek.com)

Delete All Data Stored by a Website

You can now delete all the data stored by a website. This new setting can be found at Settings > Security and Privacy > Site Settings > View Permissions and Data Stored Across Sites.

Web Apps Are More Native-Looking

The one area that has kept web apps from truly looking like native apps is the top app bar. Chrome 97 allows web apps to utilize this space for elements such as search bars, navigation buttons, and colors.

Per-Site Zoom Comes to Mobile

For a while now, Chrome on the desktop has been able to remember your zoom settings for specific websites.

Better HDR Support for CSS

It allows web developers to enable HDR content without compromising the experience for those who don’t have HDR displays.

Dev Features

New in Chrome 97 - Chrome Developers

Web Transport

WebTransport is a new API offering low-latency, bidirectional, client-server messaging.

Script type feature detection

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

New array prototypes

Array and TypedArray now support the findLast() and findLastIndex() static methods.

DevTools

What's New In DevTools (Chrome 97) - Chrome Developers

Preview feature: New Recorder panel

Use the new Recorder panel to record, replay and measure user flows.

Refresh device list in Device Mode

Enabling the Device Toolbar, more modern devices are now added in the device list. Select a device to simulate its dimensions.

Autocomplete with Edit as HTML

The Edit as HTML UI now supports autocomplete and syntax highlights.

Improved code debugging experience

Column numbers are now included in the output error in the Console. Having easy access to the column number is essential for debugging especially with minified JavaScript.

Syncing DevTools settings across devices

Your DevTools settings are now synced across devices by default when you turn on Chrome profile sync. You can change the DevTools sync settings via Settings > Sync > Enable settings sync.

[rogerxu]

Chrome 98

Features

What’s New in Chrome 98, Available Now (howtogeek.com)

Privacy Guide

Privacy Guide is a tool that helps you check up on your browser privacy and security.

Available on desktop and mobile with the flag chrome://flags/#privacy-review , the Privacy Guide can be found in the “Security & Privacy” settings.

Take Screenshots in the Browser

Chrome 98 provides a built-in screenshot tool. However, it’s not stable yet, you’ll need to enable these two flags to use it:

• chrome://flags/#sharing-desktop-screenshots
• chrome://flags/#sharing-desktop-screenshots-edit

When you click the share icon in the address bar you’ll see a new “Screenshot” option. In addition, Chrome for Android is testing the ability to add emojis to screenshots. This can be found by enabling the flag chrome://flags/#lightweight-reactions-android . It adds a new “Add Emotion” button to the share menu.

Better Looking Web Apps Become Stable

Google was testing a more “native” looking top bar for web apps in Chrome 97 and it’s now stable in Chrome 98. The top bar better utilizes the space available for things like search bars. It takes up less space overall and just looks a little nicer.

Dev Features

New in Chrome 98 - Chrome Developers

COLRv1 font support

In Chrome 98, there’s now support for COLRv1, an evolution of the COLRv0 font format. It adds gradients, compositing and blending, and improved shape reuse for crisp and compact font files that compress well.

DevTools

What's New In DevTools (Chrome 98) - Chrome Developers

Preview feature: Full-page accessibility tree

In the Elements panel, open the Accessibility pane and select Enable full-page accessibility tree checkbox. Then, reload DevTools and you will see a new accessibility button in the Elements panel.

More precise changes in the Changes tab

The code changes in the Changes tab is pretty-printed automatically.

Set longer timeout for user flow recording

You can now adjust the Timeout settings in the Recorder for all steps or a specific step. This is useful especially for pages with slow network requests and lengthy animation.

Ensure your pages are cacheable with the Back/forward cache tab

The new Back/forward cache tab can help you test your pages to ensure they're optimized for bfcache, and identify any issues that may be preventing them from being eligible.

To test a particular page, navigate to it in Chrome and then in DevTools go to Application > Back-forward Cache. Next, click the Test back/forward cache button and DevTools will attempt to navigate away and back to determine whether the page could be restored from bfcache.

New Properties pane filter

If you want to focus on a specific property in the Properties pane, you can now type that property name or value in the new Filter textbox.

By default, properties whose value is null or undefined are not shown. Enable the Show all checkbox to view all properties.

Emulate the CSS forced-colors media feature

The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode (e.g. Windows High Contrast mode) where it enforces a user-chosen limited color palette on the page.

Open the Command Menu, run the Show Rendering command, and then set the Emulate CSS media feature forced-colors dropdown.

Show rulers on hover command

You can now open the Command Menu and run the Show rulers on hover command. The page rulers make it easier to measure the width and height of an element.

Support row-reverse and column-reverse in the Flexbox editor

The Flexbox editor added two new buttons to support row-reverse and column-reverse in flex-direction.

[rogerxu]

Chrome 99

Features

What’s New in Chrome 99, Available Now (howtogeek.com)

Chrome Gets Edge’s Download Shortcut

Web Apps Can Use System Date Picker

Dev Features

New in Chrome 99 - Chrome Developers

CSS Cascade Layers

CSS Cascade Layers and the CSS @layer rule provide more explicit control of your CSS files to prevent style-specificity conflicts.

They introduce a new layer to the CSS cascade. With layered styles, the precedence of a layer always beats the specificity of a selector.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

showPicker() for input elements

There's a new showPicker() method on HTML InputElements. It's the canonical way to show a browser picker, not only for date, but also time, color, and other <input> elements with pickers.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

DevTools

What's New In DevTools (Chrome 99) - Chrome Developers

Throttling WebSocket requests

Open the Network panel, click on a web socket request and open the Messages tab to observe the message transfers. Select Slow 3G to throttle the speed.

New Reporting API pane in the Application panel

The Reporting API is designed to help you monitor security violations of your page, deprecated API calls, and more.

Open a page which uses the Reporting API (e.g. demo page). In the Application panel, scroll down to the Background services section and select the Reporting API pane.

The Reports section shows you a list of reports generated on your page and their status. Click on it to view the report’s details.

The Endpoints section gives you an overview of all the endpoints configured in the Reporting-Endpoints header.

Support wait until element is visible/clickable in the Recorder panel

When replaying a user flow recording, the Recorder panel will now wait until the element is visible or clickable in the viewport or try to automatically scroll the element into the viewport before replaying the step.

Better console styling, formatting and filtering

Properly style log messages with ANSI escape code

You can now use the ANSI escape sequences to properly style console messages.

Properly support %s, %d, %i and %f format specifiers

The Console now properly performs the %s, %d, %i, and %f type conversions as specified in the Console Standard.

More intuitive console group filter

When filtering the console message, a console message is now shown if its message content matches the filter or the title of the group (or the ancestor group) matches the filter. Previously, the console group title would show despite the filter.

Debug Chrome extension with sourcemap files

You can now debug Chrome extension with sourcemap files.

Improved source folder tree in the Sources panel

The source folder tree in the Sources panel is now improved with less clutter in the folder structures and naming (e.g. “../”, “./”, etc).

Display worker source files in the Sources panel

Worker (e.g. web worker, service worker) source files with relative SourceURL are now displayed in the Source panel.