New in Chrome 111

Adriana Jara

Here's what you need to know:

Create polished transitions in your single page app with the View Transitions API.
Bring colors to the next level with support for CSS Color Level 4.
Discover new tools in the style panel to make the most of new color functionality.
And there’s plenty more.

I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 111.

View Transitions API.

Creating smooth transitions on the web is a complex task. The View Transitions API is here to make the creation of polished transitions simpler by snapshotting views and allowing the DOM to change without any overlap between states.

Transitions created with the View Transition API. Try the demo site–Requires Chrome 111+.

The default view transition is a cross fade, the following snippet implements this experience.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

When .startViewTransition() is called, the API captures the current state of the page.

Once that's complete, the callback passed to .startViewTransition() is called. That's where the DOM is changed. Then, the API captures the new state of the page.

Note that the API is launched for Single-Page Apps (SPAs) but support for other models is being implemented too.

There are many details to this API, learn more in our article containing samples and details, or explore the View Transitions documentation on MDN.

CSS Color Level 4.

With CSS color level 4, CSS now supports high definition displays, specifying colors from HD gamuts while also offering color spaces with specializations.

In a nutshell it means 50% more colors to pick from! You thought 16 million colors sounded like a lot. I thought so too.

A series of images are shown transitioning between wide and narrow color gamuts, illustrating color vividness and its effects.
Try it for yourself

The implementation includes the color() function; it can be used for any color space that specifies colors with R, G, and B channels. color() takes a color space parameter first, then a series of channel values for RGB and optionally some alpha.

Here are some examples of using the color function with different color spaces.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Checkout this article for more documentation to take full advantage of high definition colors using CSS.

New color devtools.

Devtools has new features to support the css color level 4 specification.

The Styles pane now supports the 12 new color spaces and 7 new gamuts outlined in the spec. Here are examples of CSS color definitions with color(), lch(), oklab() and color-mix().

Examples of CSS color definitions.

When using color-mix(), which enables mixing a percentage of one color into another, you can view the final color output in the Computed pane color-mix result in the Computed pane.

Also the color picker supports all the new color spaces with more features. For example, click on the color swatch of color(display-p3 1 0 1). A gamut boundary line has also been added, distinguishing between the sRGB and display-p3 gamuts for a clearer understanding of your selected color's gamut. A gamut boundary line.

The color picker also supports converting colors between color formats.

Converting colors between color formats.

Checkout this post for more information on debugging color and other new features in devtools.

And more!

Of course there’s plenty more.

CSS added trigonometric functions, additional root font units and extended the n-th child pseudo selector.
The Document Picture in Picture API is in origin trial
previousslide and nextslide actions are now part of the Media Session API. Checkout the demo here.

New in Chrome 111

View Transitions API.

CSS Color Level 4.

New color devtools.

And more!

Further reading

Subscribe