New in Chrome 90

Pete LePage

Here's what you need to know:

• There's a new value for the CSS overflow property.
• The Feature Policy API has been renamed to Permissions Policy.
• And there's a new way to implement and use Shadow DOM directly in HTML.
• I owned several jackets almost exactly like this in the 1990s.
• And, there's plenty more.

I'm Pete LePage, and I've got the 411 for developers in Chrome 90, doin' it 1990's style!

Prevent overflow with overflow: clip

CSS is all that and a bag of chips! But, I think every web developer has seen and experienced something that overflows awkwardly at some point. There's a great post on CSS Tricks about different ways to handle the overflow, for example, using overflow: hidden, or auto.

In the CSS Overflow Spec, there's a new clip property that works similarly to hidden.

.overflow-clip {
  overflow: clip;
}

Using overflow: clip makes it possible for you to prevent any type of scrolling for the box, including programmatic scrolling. That means the box is not considered a scroll container; it does not start a new formatting context. If you need it, you can apply clipping to a single axis via overflow-x and overflow-y.

Oh, and FYI - there's also overflow-clip-margin, which allows you to expand the clip border. This is useful for cases where there is ink overflow that should be visible.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

See overflow: clip in action at https://petele-css-is-awesome.glitch.me/

Feature Policy is now Permissions Policy

Back in Chrome 74, we introduced the Feature Policy API, which allows you to selectively enable, disable, and modify the behavior of certain APIs and web features in the browser. These policies are a contract between you and the browser. They inform the browser about what your intent is.

If your code, or any of the third party libraries you use violate your preselected rules, the browser overrides the behavior with better UX or just says, "talk to the hand," blocking the API altogether.

Starting in Chrome 90, the Feature Policy API will be renamed Permissions Policy, and the HTTP header has been renamed along with it. At the same time, the community has settled on a new syntax, based on Structured Field Values for HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

If you're interested in how to use this on your site, check out Introduction to Feature Policy.

Declarative Shadow DOM

Shadow DOM, part of the Web Components standard, provides a way to scope CSS styles to a specific DOM subtree and isolate that subtree from the rest of the document. Until now, the only way to use Shadow DOM was to construct a shadow root using JavaScript.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

This works fine for client-side rendering, but not so well in server side rendering where there is no built in way to express Shadow Roots in the server generated HTML. But, starting in Chrome 90, with the Declarative Shadow DOM, you're good to go. You can create shadow roots using only HTML.

A Declarative Shadow Root is a <template> element with a shadowroot attribute. It's detected by the HTML parser and immediately applied as the shadow root of its parent element.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Loading the pure HTML markup results in this DOM tree:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

This gives us the benefits of Shadow DOM's encapsulation and slot projection in static HTML. No JavaScript is needed to produce the entire tree, including the Shadow Root.

Check out Declarative Shadow DOM on web.dev for more details.

And more

And of course there's plenty more.

To help improve privacy, and even loading speeds for users visiting sites that support HTTPS, Chrome's address bar will use https:// by default. And if you haven't set up an automatic redirect from HTTP to HTTPS, now would be a great time to do that.

And an AV1 encoder is shipping in Chrome desktop that is specifically optimized for video conferencing with WebRTC integration.

Further reading

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

• What's new in Chrome DevTools (90)
• Chrome 90 deprecations & removals
• ChromeStatus.com updates for Chrome 90
• What's new in JavaScript in Chrome 90
• 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.

I'm Pete LePage, and as soon as Chrome 91 is released, I'll be right here to tell you what's new in Chrome!

A special shout out

I had a lot of fun shooting this 1990s themed episode of New in Chrome. Huge thanks to Sean Meehan for the idea and for bringing together the amazing folks who helped open the time warp to 1990.

And of course, Loren Borja, Lee Carruthers, and Lukas Holcek who work on all of my New in Chrome videos and make me look way better than I actually am. THANK YOU!