📃 December 2022 release notes

Newly available

The following features are newly available:

Small, large, and dynamic viewport units: The sv*, lv*, and dv* CSS viewport units are relative to the smallest, largest, and current (dynamic) viewport size. They are used to size elements in relation to the viewport's dimensions.
OES_draw_buffers_indexed WebGL extension: The OES_draw_buffers_indexed extension for WebGL 2.0 contexts allows you to control blending on a per-color basis when writing to multiple color buffers simultaneously.

The following features are now available in Edge:

content-visibility: The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed.
Origin private file system: The navigator.storage.getDirectory() method returns a FileSystemDirectoryHandle that is restricted to a specific origin and invisible to the user's actual file system for faster file-based applications, such as SQLite databases.

The following features are now available in Firefox:

Import maps: A <script type="importmap"> HTML element provides an import map as a JSON string. An import map controls how the browser should resolve module specifiers when importing JavaScript modules.
sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS): The sin(), cos(), tan(), asin(), acos(), atan(), and atan2() CSS functions compute various trigonometric functions.
Web MIDI: The Web MIDI API enables selecting MIDI input and output devices and sending and receiving MIDI messages.

The following features are now available in Firefox for Android:

Import maps: A <script type="importmap"> HTML element provides an import map as a JSON string. An import map controls how the browser should resolve module specifiers when importing JavaScript modules.
sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS): The sin(), cos(), tan(), asin(), acos(), atan(), and atan2() CSS functions compute various trigonometric functions.

The following features are now available in Safari:

color-mix(): The color-mix() function mixes two colors in a given color space and by a given amount. Commonly, lighter or darker variations of a color are created by mixing with white or black.
Gradient interpolation: Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, linear-gradient(to right in oklch longer hue, red, red); calculates in the oklch color space, with the hue going all the way around the hue circle from red back to red.

The following features are now available in Safari on iOS:

color-mix(): The color-mix() function mixes two colors in a given color space and by a given amount. Commonly, lighter or darker variations of a color are created by mixing with white or black.
Gradient interpolation: Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, linear-gradient(to right in oklch longer hue, red, red); calculates in the oklch color space, with the hue going all the way around the hue circle from red back to red.