 Now CSS supports nasty rules. The algorithm to set the initial focus on dialogue elements was updated. No opt fetch handlers on server's workers are skipped from now on to make navigations faster. And there's plenty more. I'm Adriana Jara. Let's dive in and see what's known for developers in Chrome 112. One of our favorite CSS preprocessor features is now built into the language. Nesting style rules. Before nesting, every selector needed to be explicitly declared separately from one another. This leads to repetition, stylesheet bulk, and a scatter-authoring experience. With nesting, selectors can be continued and related style rules can be grouped within. Nesting helps developers by reducing the need to repeat selectors while also collocating style rules for related elements. It can also help styles match the HTML they target. If the top component in the example in the screen was removed from the project, you could delete the entire group instead of searching files for related selector instances. Nesting can help with organization, reducing file size, and refactoring. Check the link in the description for tips to make the most of CSS nesting. The dialog HTML element is the standardized way to represent a dialog box or other interactive component such as a dismissable alert or as a window that needs to be displayed on top of all other content in a web page. This HTML element is the recommended way to create such content because its features were built to provide better and more consistent usability and accessibility. One of those features is handling which element gets focused when the dialog is opened. In this version, the algorithm that selects that element was updated. From now on, the dialog focusing steps look at keyboard focusable elements instead of any focusable element. The dialog itself gets focused if it has the autofocus attribute set. And the dialog element itself gets focused as a fallback instead of focus being reset to the body element. Check out the post in the description for more information on the dialog element. Studying from Chrome 112, the service workers start and the listener dispatch from the navigation critical path will be omitted. If a user agent identifies that all the service workers fetched listeners are no-ops. This feature makes the navigation of those pages faster. Having the fetch handler was one of the PWA requirements for a web app to be installable. We suspect that might be the reason some sites have essentially an empty fetch handler. However, to start a service worker and execute a no-op listener only brings overhead without any of the benefits that could be implemented with the right service worker, like caching or offline capabilities. So Chrome will be skipping them to improve navigation. As part of this change, Chrome will show console warnings if all the service workers fetched listeners are no-ops and encourage developers to remove those fetched listeners. Check out the link in the description for more details. And of course there is plenty more. The setter for document.domain is now deprecated. There is an origin trial for the X requested with header deprecation in WebView. The recorder in DevTools can now record with pierced selectors. 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 charges and more, like the latest on Privacy Sandbox. Yo soy Adriana Jara. As soon as Chrome 113 is released, I'll be back in our usual location to tell you what's doing Chrome.