New in Chrome 123

Adriana Jara

Here's what you need to know:

Adapt your color-scheme with the new light-dark() function.
Diagnose responsiveness on your site with the Long Animation Frames API.
Avoid service worker start-up performance penalties with the Service Worker Static Routing API.
And there's plenty more.

I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 123.

`light-dark()` CSS function.

The light-dark() function in CSS lets you create colors that adapt 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 computed color-scheme value. For example, with the following CSS:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

If the user selected a light theme, the element will have a lime background.
If the user selected a dark theme, the element will have a green background.

Long Animation Frames API.

The Long Animation Frames API is available to help you find the causes for main-thread congestion which is often the cause for bad INP (Interaction to Next Paint)—a Core Web Vital that measures a website's responsiveness.

The new API is an enhanced version of the Long Tasks API, which provides a better understanding of slow user interface updates. The Long Animation Frames API lets you measure blocking work. It measures the 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, known as layout thrashing.

Collecting and analyzing this information lets you identify and troubleshoot performance bottlenecks. You can capture long frames with the following code.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Service worker Static Routing API.

Using service workers you can make websites work offline and create caching 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 running in that moment. 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 controlled 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 don't need a service worker.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

And more!

Of course there's plenty more.

You can offer customized pages based on where the user navigated from with the NavigationActivation interface.
Chrome now has support for Zstandard (zstd). This Content-Encoding helps load pages faster and use less bandwidth, and spend less time, CPU, and power on compression on servers, resulting in reduced server costs.
The notRestoredReasons API for bfcache is rolling out from Chrome 123. This allows site-owners to collect reasons in the field as to why the bfcache was unable to be used. Site owners can use this to improve usage of the bfcache which allows faster history navigations.
The picture-in-picture value for display-mode lets you write specific CSS rules that only apply when the web app is shown in picture-in-picture mode. For example:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

New in Chrome 123

light-dark() CSS function.

Long Animation Frames API.

Service worker Static Routing API.

And more!

Further reading

Subscribe

`light-dark()` CSS function.