New in Chrome 85

Chrome 85 is starting to roll out to stable now.

Here's what you need to know:

• You can improve rendering performance with content-visibility: auto.
• CSS properties can now be set… in CSS.
• You can now check if your Windows app or PWA is installed with getInstalledRelatedApps().
• App icon shortcuts work on Windows too (for real this time).
• An origin trial for fetch upload streaming has started.
• And more.

I’m Pete LePage, working and shooting from home, let’s dive in and see what’s new for developers in Chrome 85!

Content Visibility

Turning your HTML into something the user can see, requires the browser to go through a number of steps before it can even paint the first pixel. And it does it for the whole page, even for content that isn’t visible in the viewport.

Applying content-visibility: auto to an element, tells the browser that it can skip the rendering work for that element until it scrolls into the viewport, providing a faster initial render.

.my-class {
  content-visibility: auto;
}

To get the most impact out of content-visibility, apply it to parent sections with more complex layout algorithms, like flexbox, and grid, or that have children with contained layouts of their own.

By chunking content and adding content-visibility: auto;, this page went from a rendering time of 232ms to only 30ms.

Check out the content visibility to see how you can use it to improve your rendering performance.

@property and CSS variables

CSS variables, technically called custom properties, are awesome. With the Houdini CSS Properties and Values API, you can define a type and default fallback value for your custom properties. I previously covered them in New in Chrome 78, when we added support for defining them in JavaScript.

Starting in Chrome 85, you can also define and set CSS properties directly in your CSS. What I love about CSS Properties - is that it gives the property semantic meaning, fallback values, and even enables CSS testing.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una has a great post @property: giving superpowers to CSS variables that shows you how you can use them.

Get installed related apps

The getInstalledRelatedApps() API makes it possible for you to check if your app is installed, then, customize the user experience.

For example, show different content to the user on a landing page if your app is already installed. Centralize overlapping functionality in one app to prevent confusion. Or, if your native app is already installed, don’t promote the installation of your PWA.

When it first shipped in Chrome 80, it only worked for Android apps. Now, on Android, it can also check if your PWA is installed. And on Windows, it can check if your Windows UWP app is installed.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Check out my article Is your app installed? getInstalledRelatedApps() will tell you! on web.dev to see how it works, and how to sign your apps to prove they’re yours.

App Icon Shortcuts

In Chrome 84, we added support for App Icon Shortcuts. I accidentally said they were available everywhere, but they were only available on Android. Now, in Chrome 85, they’re available on Android and Windows, and in both Chrome and Edge.

"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

Check out the App Icon Shortcuts article on web.dev for complete details, and I’m sorry for the confusion I caused.

Origin Trial: Streaming requests with fetch()

Starting in Chrome 85, fetch upload streaming is available as an origin trial. It lets you start a fetch before the request body is ready. Previously, you could only start a request once you had the whole body ready to go. But now, you can start sending content, even while you're still generating it.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

For example, use it to warm up the server, or stream audio or video as it’s captured from the microphone or camera.

Jake has an in-depth look in Streaming requests with the fetch API on web.dev, and also covered it in the latest HTTP203 - Streaming requests with fetch video.

And more

Of course, there’s plenty more.

Promise.any returns a promise that is fulfilled by the first given promise to be fulfilled or rejected.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

Replacing all instances in a string is easier with .replaceAll(), no more regular expressions!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 adds decode support for AVIF, an image format encoded with AV1 and standardized by the Alliance for Open Media. AVIF offers significant compression gains vs. JPEG and WebP, with a recent Netflix study showing 50% savings vs. standard JPEG and > 60% savings on 4:4:4 content.

And AppCache removal has begun.

Further reading

This covers only some of the key highlights. Check the links below for additional changes in Chrome 85.

• What's new in Chrome DevTools (85)
• Chrome 85 deprecations & removals
• ChromeStatus.com updates for Chrome 85
• What's new in JavaScript in Chrome 85
• Chromium source repository change list

Subscribe

Want to stay up to date with our videos, then subscribe to our Chrome Developers YouTube channel, and you’ll get an email notification whenever we launch a new video, or add our RSS feed to your feed reader.

I’m Pete LePage, and I finally got a hair cut!

As soon as Chrome 86 is released, I’ll be right here to tell you -- what’s new in Chrome!

Feedback