New in Chrome 111

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.

Further reading

This covers only some key highlights. Check the links below for additional changes in Chrome 111.

Subscribe

To stay up to date, subscribe to the Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video.

I’m Adriana Jara, and as soon as Chrome 112 is released, I'll be right here to tell you what's new in Chrome!