 Create Polish Transitions in your single-page app with the View Transitions API. Bring color to the next level with support for CSS Color Level 4. Discover new DevTools in the Style panel to make the most of the 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. Creating smooth transitions on the web is complicated, to say the least. The View Transitions API is here to make creating Polish transitions simpler by snapshotting views and allowing the DOM to change without any overlap between states. The default View Transition is across fade. In the screen, there is a snippet that implements this experience. When a Start View Transition is called, the API captures the current state of the page. Once that is complete, the callback passed to Start View Transition is called. That's where the DOM is changed. Then the API captures the new state of the page and transitions between the states with an animation. Note that the API is launched for single-page apps but support for other models is being implemented too. There are many details to this API, so check out the link in the description for samples and details to create your own custom transitions. With Color Level 4, CSS now supports high-definition displays, specifying colors from HD gamuts while also offering new color spaces. In a nutshell, it means 50% more colors to pick from. And you thought 16 million colors sounded like a lot. I thought so too. 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. Check out the link in the description for more documentation to take full advantage of high-definition colors using CSS. Leftools also added 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. With the updates, CSS Color Definitions with new functions like Color and Color Mix look like this. By the way, 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. The Color Picker supports all the new color spaces with more features. For example, when you click on an sRGB color swatch, a gamut boundary line appears, distinguishing between the sRGB and DisplayP3 gamuts for a clearer understanding of your selected color's gamut. Also, the Color Picker converts colors between color formats. Check out the link in the description for more information on debugging color and other new features in DevTools. And of course, there's plenty more. CSS added trigonometric functions, additional root font units, and extended the nth child pseudo selector. The Document Picture-in-Picture API is in origin trial. The previous slide and next slide actions are now part of the media session API. All the details, including links, docs, and specs, are in the post linked in the description. Hit the subscribe button now so that you don't miss the latest Chrome DevTools video, GUI challenges, and more. Like this video on improving your web apps install experience. Yo soy Adriana Jara, and as soon as Chrome 112 is released, I'll be right here to tell you what's new in Chrome.