Google Chrome What's New - 100+

[rogerxu]

https://developer.chrome.com/100/

[rogerxu]

Chrome 100

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

Features

Chrome Has a New Icon

No More Data Saver Mode

Chrome for Android, iPhone, and iPad has included a data-saving “Lite Mode” feature for a long time. Google will begin shutting down the servers that were responsible for taking the brunt of all the data compression for you.

One-Click Tab Muting

Dev Features

New in Chrome 100 - Chrome Developers

Reduced User-Agent string

Speaking of the user agent, Chrome 100 will be the last version to support an unreduced User-Agent string by default. This is part of a strategy to replace use of the User-Agent string, with the new User-Agent Client Hints API.

Multi-screen window placement API

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

You can quickly check if there's more than one screen connected to the device with window.screen.isExtended.

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

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

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

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

try {
  const screens = await window.getScreenDetails();
  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, the resolution changes, and so on.

const screens = await window.getScreenDetails();
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 100) - Chrome Developers

View and edit @supports at rules in the Styles pane

You can now view and edit the CSS @supports at-rules in the Styles pane. These changes make it easier to experiment with the at-rules in real time.

Preview class/function properties on hover

You can now hover over a class or function in the Sources panel during debugging to preview its properties.

Partially presented frames in the Performance panel

Performance recording now displays a new frame category "Partially presented frames" in the Frames timeline.

The new "Partially presented frames" aims to indicate more intuitively that although some content is not presented timely in the frame, but the issue is not so severe as to block visual updates altogether.

[rogerxu]

Chrome 101

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

Features

Saving Tab Groups

Dev Features

New in Chrome 101 - Chrome Developers

hwb() color notation

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

Priority Hints

Priority Hints give you a way to hint to the browser which order resources should be downloaded in, by using the fetchpriority attribute. This accepts values of "high", "low", and "auto".

<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

DevTools

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

Import and export recorded user flows as a JSON file

You can now view and edit the CSS @supports at-rules in the Styles pane. These changes make it easier to experiment with the at-rules in real time.

View cascade layers in the Styles pane

Support for the hwb() color function

You can now view and edit HWB color format in DevTools.

[rogerxu]

Chrome 102

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

Features

Reorder Tabs With a Keyboard Shortcut

To move a tab, press Ctrl+Shift and Page Up or Page Down depending on which direction you want to move the current tab.

Web Apps Can Open Files

Better Navigation For Web Apps

The Navigation API makes it possible to more smoothly transition between pages without the entire page reloading.

Better Presentation Controls

Dev Features

New in Chrome 102 - Chrome Developers

File Handling API

The File Handling API allows installed PWAs to register with the OS as a file handler.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

The inert property

The inert property is a global HTML attribute that tells the browser to ignore user input events for an element, including focus events, and events from assistive technologies.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Navigation API

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

DevTools

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

Preview feature: New Performance insights panel

New shortcuts to emulate light and dark themes

[rogerxu]

Chrome 103

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

Features

Blocking Notification Prompts With Machine Learning

Dev Features

New in Chrome 103 - Chrome Developers

HTTP 103 status code - early hints

Most modern browsers start pre-fetching pages before you even click or tap a link. The 103 Early Hints simply make this process a tiny bit faster, and on the internet, a tiny bit faster matters.

Local Fonts Access API

The new Local Font Access API gives web applications the ability to enumerate the local fonts on the user's device, and provides access to the font table data.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

List the fonts installed on the users device.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Timeouts with AbortSignal.timeout()

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

DevTools

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

Capture double-click and right-click events in the Recorder panel

The Recorder panel can now capture double-click and right-click events.

• Double-click is captured as type: doubleClick.
• Right-click event is captured as type: click but with the button property is set to secondary. The button value of a normal mouse click is primary.

New timespan and snapshot mode in the Lighthouse panel

The Lighthouse panel now supports 3 modes of user flow measurement:

• Navigation reports analyze a single page load. Navigation is the most common report type. All Lighthouse reports before the current version are navigation reports.
• Timespans reports analyze an arbitrary time period, typically containing user interactions.
• Snapshots reports analyze the page in a particular state, typically after the user has interacted with it.

Picking a color outside of the browser

DevTools now supports picking a color outside of the browser. Previously, you could only pick a color within the browser.

[rogerxu]

Chrome 104

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

Features

Experimenting to Speed Up Page Loading

Google is testing an experiment called “LazyEmbeds” that will lazy-load some embedded content automatically, without the page asking for it.

Dev Features

New in Chrome 104 - Chrome Developers

Region Capture for Web Apps

Chrome now has the ability to crop self-captured video tracks. The feature is called “Region Capture,” and it lets you choose which part of the screen you want to record or share.

getDisplayMedia() makes it possible to create a video stream from the current tab. But, there are times when you don’t want the entire tab, only a small portion of it.

With Region Capture, a web app can define the specific area of the screen it wants to share. For example, Google Slides could allow you to stay in the standard editing view, and share the current slide.

To use it, select the element to share, then create a new CropTarget based on that element. Next, start screen sharing by calling getDisplayMedia(). That prompts the user for permission to share their screen. Then, call track.cropTo() and pass the cropTarget created earlier.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

Easier media queries with level 4 syntax and evaluation

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Shared Element Transitions

Shared Element Transitions allows you to provide smooth transitions, regardless of whether the transitions are cross-document (for example in a multi-page app), or intra-document (for example in a single page app).

DevTools

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

Restart frame during debugging

You can re-run the preceding code when paused somewhere in a function.

Slow replay options in the Recorder panel

You can now replay user flows at a slower speed — slow, very slow, and extremely slow.

Group files by Authored / Deployed in the Sources panel

Enable the new Group files by Authored / Deployed option to organize your files in the Sources panel.

With this checkbox, you can group files into 2 categories for quicker file search:

• Authored. Similar to the source files you view in your IDE. DevTools generates these files based on sourcemaps (provided by your build tools).
• Deployed. The actual files that the browser reads. Usually these files are minified.

New User Timings track in the Performance insights panel

Visualize performance.measure() marks in your recording with the new User Timings track in the Performance insights panel.

Reveal assigned slot of an element

Slotted elements in the Elements panel have a new slot badge. When debugging layout issues, use this feature to identify the element which affects the node's layout quicker.

Simulate hardware concurrency for Performance recordings

The new Hardware concurrency setting in the Performance panel allows developers to configure the value reported by navigator.hardwareConcurrency.

Preview non-color value when autocompleting CSS variables

When autocompleting CSS variables, DevTools now populates the non-color variable with a meaningful value so that you can preview what kind of change the value will have on the node.

[rogerxu]

Chrome 105

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

Features

Windows Controls for Web Apps

Windows 11-Style Window Tiling on Chrome OS

Dev Features

New in Chrome 105 - Chrome Developers

Container queries

Similar to a @media query, except it evaluates against the size of a container instead of the size of the viewport.

To use container queries, you need to set containment on a parent element. To create a container query, set container-type on the card container. Setting container-type to inline-size queries the inline-direction size of the parent.

.card-container {
  container-type: inline-size;
}

Now, we can use that container to apply styles to any of its children using @container.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

In this case, when the container is less than 400px, it switches to a single column layout.

The :has() CSS property

We can take this a step further with the CSS :has() pseudo-class. It allows you to check if a parent element contains children with specific parameters.

For example, you can use figure:has(figcaption) to style a figure element that contains a caption.

figure:has(figcaption) {
  /* this figure has a figcaption */
}

Sanitizer API

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

Deprecating Web SQL for non-secure contexts

This deprecation will currently only affect sites that use Web SQL via http://. It will not affect sites that use Web SQL via https://.

DevTools

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

Step-by-step replay in the Recorder

You can now set a breakpoint and replay a user flow step by step in the Recorder panel.

Support mouse over event in the Recorder panel

The Recorder now supports adding a mouse over (hover) step manually in a recording.

Add a step manually to hover over the selector before clicking the menu item.

Largest Contentful Paint (LCP) in the Performance insights panel

Identify flashes of text (FOIT, FOUT) as potential root causes for layout shifts

Protocol handlers in the Manifest pane

You can now use DevTools to test the URL protocol handler registration for Progressive Web Apps (PWA).

Navigate to the Protocol Handlers section via the Application > Manifest pane. You can view and test all the available protocols here.

Top layer badge in the Elements panel

The <dialog> element has recently become stable across browsers. When you open a dialog, it is put into a top layer. Top level content renders on top of all the other content.

To help visualize the top layer elements, DevTools adds a top layer container (#top-layer) to the DOM tree. It resides after the closing </html> tag.

Support live edit during debugging

You can now edit the top-most function on the stack without restarting the debugger.

View and edit @scope at rules in the Styles pane

[rogerxu]

Chrome 106

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

Features

Translate Highlighted Text

Desktop Chrome Gets the RSS Reader

Dev Features

New in Chrome 106 - Chrome Developers

New Intl APIs

formatRange()

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

Pop-up API

The popup attribute, automatically brings the element to the site's top layer and provides easy controls to toggle visibility.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

New CSS features

ic

.container {
  max-width: 8ic;
}

grid-template-columns, grid-template-rows

DevTools

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

Group files by Authored / Deployed in the Sources panel

Enable the Group files by Authored / Deployed setting to view your original source code (Authored) first and navigate to them quicker.

Improved stack traces

Linked stack traces for asynchronous operations

Behind the scenes, DevTools introduced a new “Async Stack Tagging” feature.

Automatically ignore known third-party scripts

Behind the scenes, DevTools ignores third-party scripts based on the new x_google_ignoreList property in sourcemaps. Frameworks and bundlers need to supply this information.

Optionally, if you prefer to always view full stack traces, you can disable the setting via Settings > Ignore list > Automatically add known third-party scripts to ignore list.

Improved call stack during debugging

With the Automatically add known third-party scripts to ignore list setting, the call stack now shows only frames that are relevant to your code.

To view all frames, enable Show ignore-listed frames.

Hiding ignore-listed sources in the Sources panel

Enable hide ignore-listed sources to hide irrelevant files in the Navigation pane.

Hiding ignore-listed files in the Command Menu

With the hide ignore-listed sources setting, you can find your file quicker with the Command Menu.

New Interactions track in the Performance panel

Use the new Interactions track in the Performance panel to visualize interactions and track down potential responsiveness issues.

[rogerxu]

Chrome 107

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

Dev Features

New in Chrome 107 - Chrome Developers

New properties in Screen Capture API

The DisplayMediaStreamConstraints added the selfBrowserSurface property.

The DisplayMediaStreamConstraints added the surfaceSwitching property.

The MediaTrackConstraintSet added the displaySurface property.

Identify render blocking resources

The Performance API includes the renderBlockingStatus property which provides a direct signal from the browser that identifies the resources that prevent your page from displaying, until they are downloaded.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking = res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

PendingBeacon API origin trial

A beacon is a bundle of data sent to a backend server, without expecting a particular response.

Applications often want to send these beacons at the end of a user's visit, but there's no good time for that "send" call to be made. This API delegates the sending to the browser itself, so it can support beacons on page unload or on page hide, without the developer having to implement send calls at exactly the right times.

DevTools

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

Customize keyboard shortcuts in DevTools

Settings > Shortcuts

Highlight C/C++ objects in the Memory Inspector

Support full initiator information for HAR import

Full Initiator information is available now for HAR import.

Start DOM search after pressing Enter

You can now disable the Search as you type setting to always start DOM search after pressing Enter.

Go to Settings > Preferences, disable Search as you type. With this change, the search will start only after you press Enter.

Display start and end icons for align-content CSS flexbox properties

In the Styles pane, edit the align-content properties in a CSS class with display: flex or display: inline-flex. The start and end show in the auto-complete dropdown with icons.

[rogerxu]

Chrome 108

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

Features

Energy Saver Mode for Desktop and Chrome OS

Resizing Options for Virtual Keyboards

Dev Features

New in Chrome 108 - Chrome Developers

New viewport size units

Variable fonts now supported in COLRv1

his release also includes the font-tech() and font-format() condition extensions to CSS @supports .

FileSystemSyncAccessHandle methods are now synchronous

There is a good reason for the change, it makes FileSystemSyncAccessHandle match the synchronous, POSIX-like file API that Wasm-based applications expect; making the API more ergonomic while bringing substantial performance gains.

DevTools

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

Hints for inactive CSS properties

DevTools now identifies CSS styles that are valid but have no visible effect. In the Styles pane, DevTools fades out the inactive properties. Hover over the icon next to it to understand why the rule has no visible effect.

Auto-detect XPath and text selectors in the Recorder panel

The Recorder panel now supports XPath and text selectors.

Step through comma-separated expressions

You can now step through comma-separated expressions during debugging. This improves the debuggability of minified code.

Improved Ignore list setting

Go to Settings > Ignore List. DevTools improves the design to help you configure the rules to ignore a single script or pattern of scripts.

[rogerxu]

Chrome 109

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

Features

Better Screen Sharing in Video Calls

The new “Conditional Focus” feature allows web apps to control whether the captured tab or window will be focused when capture starts, or whether the capturing page should remain in focus. It’s also getting the ability to suppress local audio playback, which should help when presenting in a room with other people talking.

Material You Theming for Desktop

Google’s Material You theming has been present in Chrome for Android for a while, but now it’s coming to Windows and macOS as well. This allows you to change the theme of Chrome simply by changing the background image on the New Tab page.

To enable this feature, enable the flag at chrome://flags/#customize-chrome-color-extraction . At the time of writing, the flag is present in Chrome 109, but only fully functional in the Canary channel.

Dropping Support for Windows 7 and 8/8.1

In October, Google announced that support for Windows 7 and Windows 8/8.1 would be dropped in Chrome 110. That means Chrome 109 is the last version that supports pre-Windows 10 versions. Chrome 110 is scheduled for release on February 7th, 2023. Older versions of Chrome will still work on Windows 7/8/8.1, but won’t receive updates.

Dev Features

New in Chrome 109 - Chrome Developers

OPFS on Android

The Origin Private File System (OPFS) is part of the File System Access API, it is a storage endpoint private to the origin of the page.

With the File System Access API on OPFS, sites can access their per-origin, private file system and are able to perform file operations via FileSystemSyncAccessHandle which provides improved performance.

New in CSS

The lh CSS unit is equal to the computed value of the line-height property on the element on which it is used. This allows a textarea to be given a height that is the same as the number of lines of expected text.

For the descriptors: font-weight, font-style, and font-stretch inside the @font-face rule. auto is now the initial value.

To provide better control over web typography, the hyphenate-limit-chars property specifies the minimum number of characters in a hyphenated word.

MathML Core support

MathML is a language for describing mathematical notation in a way that can be included in HTML and SVG. It is rendered in a CSS-compatible way with OpenType MATH and exposed via platform accessibility APIs.

MathML styling is enabled by CSS features including those dedicated to math layout. Some examples are the math-depth, math-shift and math-style properties, and the math value for the display property and more.

DevTools

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

Recorder: Copy as options for steps, in-page replay, step’s context menu

Show actual function names in performance’s recordings

The Performance panel now shows the actual function names and their sources in the trace if there’s a sourcemap.

New keyboard shortcuts in the Console & Sources panel

You can switch between tabs in the Sources panel using: On MacOS, fn + ⌘ + ↑ and ↓. On Windows and Linux, ⌃ + PgUp or PgDn.

Moreover, you can navigate the autocomplete suggestions with ⌃ + N and ⌃ + P on MacOS, similar to Emacs. For example, you can type window. in the Console and use these shortcuts to navigate.

Improved JavaScript debugging

new.target

new.target is a meta-property that lets you detect whether a function or constructor was called using the new operator.

WeakRef

A WeakRef object lets you hold a weak reference to another object, without preventing that object from getting garbage-collected. DevTools now shows an inline preview for the value and evaluates the weak reference directly in the console during debugging.