 Three new CSS features make it easy to add smooth entry and exit animations. Use array grouping to compute higher order data sets. DevTools makes local overrides easier. And there's plenty more. I'm Adriana Jara. Let's dive in and see what super developers in Chrome 117. With three new CSS features, you can easily add entry and exit animations. And smoothly animate to and from the top layer dismissable elements such as dialogues and popovers. The first feature is transition behavior. Unlike when animating discrete properties with keyframes, to transition discrete properties like display, you'll need to use the allow discrete value for transition behavior. Then the starting style rule is used to animate entry effects from display none and into the top layer. Use starting style to apply a style that the browser can look up before the element is open on the page. Finally, to fade out a popover or dialogue from the top layer, add the overlay property to your list of transitions. Include overlay in the transition or animation to animate overlay along with the rest of the features and ensure it stays in the top layer when animating. This will look much smoother. Check out the link in the description for more details to use these features for improving your user experience with motion. In programming, array grouping is an extremely common operation. Seen most often when we use sequence group by clause and map reduce programming, which is better thought of as map group reduce. The ability to combine data into groups allows developers to compute higher order data sets, like the average age of a cohort or daily LCP values for a web page. Array grouping enables these scenarios by adding the object.groupby and map.groupby static methods. Groupby calls a provided callback function once for each element in an iterable. The callback function should return a string or symbol that indicates the group of the associated element. In the example on the screen, we have an array of products and we use the group by method to get them grouped by their type. Check out the article in the description for the array grouping documentation. With local overrides, you can keep the changes you make in DevTools across page loads. You can also override HTTP response headers. This feature is now streamlined. Now, from the network panel, you can easily mug response headers and web content of remote resources without access to them. To override web content, open the network panel, right-click a request, and select Overwrite Content. If you have local override set up, but disable, DevTools enables them. If you haven't set them up yet, DevTools prompts you in the action bar at the top. Once the overrides are set up, DevTools then takes you to sources, overrides, editor to let you override web content. Check out the article in the description for more tips on local overrides and other DevTools updates. And of course, there is plenty more. The much-anticipated subgrid value for grid template columns and grid template rows is now implemented in Chrome. Yay! There is a web SQL deprecation trial and a developer trial for the onload event deprecation. And the not-resort-reasons API for BF cache that I mentioned in the last video should be launching this version. 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 updates on the Privacy Sandbox. Yo soy Adriana Jara. And as soon as Chrome 118 is released, I'll be right here to tell you what's new in Chrome.