 Adapt your color scheme with the new light-dark function, diagnose responsiveness in your site with the long animation frames API, avoid service worker startup performance costs with the service worker static route in API, and there's plenty more. I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 123. The light-dark function in CSS lets you easily adapt a color scheme to a user's preference for light or dark mode. Use the light-dark function to specify two different color values within a single CSS property. The browser will automatically choose the appropriate color based on the element's computer color scheme value. For example, with the CSS on the screen, if the user selected a light theme, the element will have a line background. If the user selected a dark theme, the element will have a green background. Visit the article in the description for more CSS updates. The long animation frames API is available to help you find the causes for main thread congestion, which is often the cause for bad IMP. IMP stands for Interaction to Next Paint, a core web vital that measures a website's responsiveness. The new API is an update to the long tasks API to provide a better understanding of the slow user interface updates. The Long Animation Frames API is an option to measure blocking work. It measures tasks together with the following rendering update and adds information such as long-running scripts, rendering time, and time spent in forced layout and style. Collecting and analyzing this information allows you to identify and troubleshoot performance bottlenecks. You can try capturing long frames with the code on the screen. Visit the article in the description to get the code sample and more information about IMP and the Long Animation Frames API. Using service workers, you can make websites work offline and create catching strategies that can provide a performance boost. However, there can be a performance cost when a page is loaded for the first time in a while and the controlling service worker isn't currently running. Since all fetches need to happen through the service worker, the browser has to wait for the service worker to start up and run to know what content to load. With the service worker static routing API, at install time, you can declare paths to always be served from the network. When a control URL is later loaded, the browser can start fetching resources from those paths before the service worker has finished starting. This removes the service worker from the URLs that you know you don't need a service worker. You can see a code sample on the screen and check out the article in the description for more tips to improve performance using the service worker static routing API. And of course, there's plenty more. You can offer customized pages based on where the user navigated from with the navigation activation interface. Check out support for ZStandard as a content coding. It helps load pages faster, use less bandwidth, and more. The picture-in-picture value for displayed mode allows you to write specific CSS rules that only apply when the web app is shown in picture-in-picture mode. 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, the CSS podcast, and more. Just a day on ahead. And as soon as Chrome 124 is released, I'll be right here to tell you what's new in Chrome.