Software Update: Google Chrome 99.0.4844.51

Google has released version 99 of its Chrome web browser. Google Chrome is available for Windows, Linux and macOS. There are also versions for Android and iOS, but they follow a slightly different release schedule. In version 99, showPicker() has been added, which can be used to input things like date, time, and color. There is also a new download shortcut, handwriting recognition and the first steps have been taken to phase out Manifest v2, which has consequences for adblockers, among other things. Learn more about the changes made in this release, in addition to the usual bug and security fixescan be found below.

CSS Cascade Layers

CSS cascade layers (@layer rule and layered @import syntax) provide a structured way to organize and balance concerns within a single origin. Rules within a single cascade layer cascade together without interleaving with style rules outside the layer. This allows authors to achieve a certain cascade ordering for same-origin rules in a proper way.

Cascade layers allow authors to create layers to represent element defaults, third-party libraries, themes, components, overrides, etc.—and are able to re-order the cascade of layers in an explicit way. Without cascade layers, authors need to tweak, eg, selector specificity, @import or source ordering to achieve a certain cascade ordering, which is cumbersome and error-prone. For more information, see this†

New showPicker() Method on HTMLInputElement Objects

The new showPicker() method on HTMLInputElement allows web developers to programmatically show a browser picker for input elements (temporal, color, file, and those with suggestions like datalist or autofill).

Developers have been asking for years for a way to programmatically open a browser date picker. Without it, they’ve had to rely on custom widget libraries and CSS hacks for specific browsers.

This is currently possible in some browsers, for some controls, via the click() method. Unfortunately, that doesn’t work in all browsers, making the experience inconsistent across systems and users. Providing showPicker() gives developers a supported alternative to click(), and aligns Chromium’s click() behavior with the specification and other browsers in in the future. For more information, see Show a browser picker for date, time, color, and files†

Origin Trials

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†

New Origin Trials† Dark Mode Support for Web Apps

Web app manifests now support the color_scheme_dark field for specifying a different theme color and background color for dark mode. Currently in the web app manifest, only a single theme color and background color can be defined. This means there is no way for apps to specify a different color to use for dark mode.

Completed Origin Trials

The following features, previously in a Chrome origin trial, are now enabled by default.

Handwriting Recognition API

This API lets web applications use handwriting recognition services that are available on operating systems to recognize hand-written text in real time. This reduces the need for third-party integration by apps that use handwriting recognition. For more information, see Recognize your users’ handwriting†

Window Controls Overlay for Installed Desktop Web Apps

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 operating system apps. For more information, see Customize the window controls overlay of your PWA’s title bar†

Other Features in this Release Allow infinity, -infinity and NaN in CSS calc()

To improve conformance with the spec, the CSS calc() method now allows infinity and NaN using the ‘infinity’, ‘-infinity’, and ‘NaN’ keywords or expressions that can be evaluated as such, for example: ‘calc(1/0)’.

CSS Color Adjust: ‘only’ Keyword for color scheme

Note: This feature was erroneously listed as shipping in Chrome 98. It actually shipped in Chrome 99.

The only keyword, which has been re-added to the specification for color-scheme, is now supported in Chrome† It allows opting out of color scheme for single, specific elements. For example, this allows overriding of force darkening.

document.adoptedStyleSheets is Now Mutable

In compliance with the spec, the document.adoptedStyleSheets property is now mutable, meaning operations such as push() and pop() work on it. The previous implementation of adoptedStyleSheets was unwieldy. For example, to add a sheet, the entire array had to be re-assigned.

Improve Alignment with Spec for Exposing nextHopProtocol Across Origin Boundaries

the PerformanceResourceTiming interface exposes the nextHopProtocol property to describe the underlying connection type used to fetch a resource. To follow the spec, Chrome is removing an old special case where cross-origin requests exposed potentially sensitive information, putting users at risk.

New Canvas 2D Features

Chrome has added several new attributes to the CanvasRenderingContext2D interface to conform to specs:

• ContextLost and ContextRestored events
• “willReadFrequently” option for canvases where lots of readback is expected
• More CSS text modifier support
• A reset() method
• A roundRect draw primitive
• conic gradients
• Better support for SVG filters

For more information, see It’s always been you Canvas2D†

Unprefixed text-emphasis Properties

Chrome 99 introduces unprefixed versions of text emphasis CSS properties, specifically: “text-emphasis”, “text-emphasis-color”, “text-emphasis-position”, and “text-emphasis-style” CSS properties. These are unprefixed versions of “-webkit-text-emphasis”, “-webkit-text-emphasis-color”, “-webkit-text-emphasis-position”, and “-webkit-text-emphasis-style”.

Deprecations, and Removals

This version of Chrome introduces the deprecations and removals listed below. Visit ChromeStatus.com for lists of current deprecations and previous removals†

Remove Battery Status API on Insecure Origins

Battery Status API is no longer supported on secure origins, such as HTTP pages or HTTPS iframes embedded in HTTP pages. The Battery Status API allows web developers to access, among other things, a system’s battery charging level and whether it is being charged. It is a powerful feature that has been around for over a decade and, as such, was originally designed with different security constraints.

Remove font-family -webkit-standard

This version of Chrome removes support for the font-family value “-webkit-standard”† This value is merely an alias for the proprietary keyword “-webkit-body” and is only exposed because it’s inherited from WebKit. Removing this improves alignment with the CSS specifications and with Firefox.

Remove GamepadList

the navigator.getGamepads() method now returns an array or Gamepad objects instead of a GamepadList† GamepadList is no longer supported in Chrome. This brings Chrome in line with spec and with Gecko and Webkit. For information on Gamepads generally, see Play the Chrome dino game with your gamepad†

Update WebCodecs to Match Spec

Chrome has removed two items because of recent changes in the WebCodecs spec.

The EncodedVideoChunkOutputCallback() method takes an EncodedVideoChunkMetadata dictionary. Previously a member called temporalLayerId was located at EncodedVideoChunkMetadata.temporalLayerId. In conformance with the spec, it is now located at EncodedVideoChunkMetadata.SvcOutputMetadata.temporalLayerId.

The spec requires that the VideoFrame() constructor include a timestamp argument (VideoFrameInit.timestamp) for CanvasImageSource types that don’t implicitly have a timestamp (eg HTMLCanvasElement). Failing to include the timestamp should result in a TypeError, but Chrome previously defaulted the timestamp to zero. This seems helpful, but is problematic if you then send the VideoFrame to a VideoEncoder, where timestamps are used to guide bitrate control.