New in Chrome 93

Pete LePage

Here's what you need to know:

You can now load CSS style sheets with import statements, just like JavaScript modules.
Installed PWAs can register as URL handlers, making it possible for users to jump straight into your PWA.
The Multi-Screen Window Placement API has been updated based on your feedback, and starts a second origin trial.
The PWA Summit is coming up October 6-7.
And there's plenty more.

I'm Pete LePage, working, and shooting from home, let's dive in and see what's new for developers in Chrome 93.

CSS Module Scripts

You can now load CSS style sheets with import statements, just like JavaScript modules. The style sheets can then be applied to the document or shadow roots in the same manner as constructable stylesheets.

The new CSS Module Scripts feature is great for custom elements. And unlike other ways of applying CSS from JavaScript, there is no need to create elements, or mess with JavaScript strings of CSS text.

To use it, import the style sheet with assert {type: 'css'}, then apply it to the document or shadowRoot by calling adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

But beware, if you leave off the assert - the file will be treated as JavaScript, and won't work!

Check out Using CSS Module Scripts to import stylesheets on web.dev for complete details.

Multi-Screen Window Placement API

For some apps, opening new windows and putting them in specific places or specific displays is an important feature. For example, when using Slides to present, I want the slides to appear full screen on the primary display, and my speaker notes to appear on the other display.

The Multi-Screen Window Placement API makes it possible to enumerate the displays connected to the users machine, and place windows on specific screens. This is its second origin trial, and we've made a number of changes based on your feedback.

You can quickly check if there's more than one screen connected to the device:

const isExtended = window.screen.isExtended;
// returns true/false

But, the key functionality is in window.getScreens(), which provides all the details about the attached displays.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

For example, you can determine the primary screen, then use requestFullscreen() to display an element on that screen.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

And it provides a way to listen for changes, for example if a new display is plugged in, or removed.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Check out Tom's article Managing several displays with the Multi-Screen Window Placement API on web.dev for a deeper dive.

Shortened release cycle

In March, we announced our plans to shorten the release cycle and ship a new version of Chrome every four weeks.

That time has arrived, and we'll ship Chrome 94 on September 21st. You can find planned release dates for each version on the Chrome Calendar.

New PWA features

If you're building a Progressive Web App, there are two new origin trials worth checking out.

URL handlers for PWAs

If you have a PWA installed, and you click on a link to that PWA, you probably want it to open in the PWA, not a browser tab.

By specifying url_handlers in your web app manifest, and adding a web-app-origin-association file to your .well-known/ directory, you can tell the browser that if a user clicks a link to your PWA, it should open within the installed PWA.

Example url_handlers in the manifest.json file:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Example web-app-origin-association file:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

And with a little extra verification, you can even have your PWA handle links from other origins you own.

All the details about the origin trial are in PWAs as URL Handlers on web.dev.

Window controls overlay

Window controls overlay extends the client area to cover the entire window, including the title bar, and the window control buttons, like the close, maximize, and minimize buttons.

You can use this feature to make your installed PWA look more like other installed apps.

For more information about the origin trial, check out Customize the window controls overlay of your PWA's title bar.

PWA Summit

The PWA Summit is coming up in October. It's a a free, online conference focused on helping everyone succeed with Progressive Web Apps. The PWA Summit is a collaboration between folks from a handful of different companies involved in the creation of PWA technologies: Google, Intel, Microsoft, and Samsung.

There are a ton of great talks and content. You can learn more and register at PWASummit.org.

And more!

Of course there's plenty more.

Flexbox and flexbox items have added support for the alignment keywords: start, end, self-start, self-end, left, and right.
The async clipboard API now supports SVG files.
And, the media attribute will be honored when setting meta theme-color, so you can specify different theme colors for light and dark modes.

<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">