New to the web platform in January

Discover some of the interesting features that have landed in stable and beta web browsers during January 2022.

Feb 1, 2022

Rachel Andrew

TwitterGitHubGlitchHomepage

Stable browser releases #

In January, Chrome 97 and Firefox 96 became stable.

Firefox 96 shipped the color function hwb(). This function expresses a color by hue, whiteness, and blackness.

Also in Firefox 96 is the CSS color-scheme property. This property gives you a way to indicate the color schemes an element can be rendered in. For example, to indicate that .widget can be rendered in the operating system's light or dark modes, use the following CSS.

.widget {
  color-scheme: light dark;
}

With color-scheme landing in Firefox, this means the property is available in Chrome, Firefox, and Safari.

Beta browser releases #

Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release.

The betas for January were Chrome 98, Firefox 97, and Safari 15.4 Beta 1.

Chrome 98 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.

Read more about this new font format in COLRv1 Color Gradient Vector Fonts in Chrome 98.

Also included is the structuredClone() method for making deep copies of objects, and the CSS media queries dynamic-range and video-dynamic-range. Find more features to test in the Chrome 98 Beta post.

Chrome 98 DevTools brings you a whole collection of new features including the new Full Accessibility Tree.

Firefox 97 Beta supports the cap and ic units for length, and also implements the scrollbar-gutter property.

There is a whole collection of good things included in Safari 15.4 Beta. Features include implementation of the ::backdrop pseudo-element, :focus-visible pseudo-class, the accent-color property, and CSS Containment with the contain property. This beta also includes the HTML <dialog> element, the lazy attribute on images to enable lazy-loading, plus support for Web App Manifest icons.

All of these beta features will land in stable browsers soon.

Hero image by ian dooley.