New in Chrome 69

It’s been ten years since Chrome was first released. A lot has changed since then, but our goal of building a solid foundation for modern web applications hasn’t!

In Chrome 69, we've added support for:

• CSS Scroll Snap allows you to create smooth, slick, scroll experiences.
• Display cutouts let's you use the full area of the screen, including any space behind the display cutout, sometimes called a notch.
• The Web Locks API allows you to asynchronously acquire a lock, hold it while work is performed, then release it.

And there’s plenty more!

I’m Pete LePage. Let’s dive in and see what’s new for developers in Chrome 69!

Note: Want the full list of changes? Check out the Chromium source repository change list.

CSS Scroll Snap

CSS Scroll Snap allows you to create smooth, slick, scroll experiences, by declaring scroll snap positions that tell the browser where to stop after each scrolling operation. This is super helpful for image carousels, or paginated sections where you want the user to scroll to a specific point.

For an image carousel, I’d add scroll-snap-type: x mandatory; to the scroll container, and scroll-snap-align: center; to each image. Then, as the user scrolls through the carousel, each image will be smoothly scrolled into the perfect position.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

CSS Scroll Snapping works well, even when the snap targets have different sizes or when they are larger than the scroller! Check out the post Well-Controlled Scrolling with CSS Scroll Snap for more details and samples you can try!

Display cutouts (aka notches)

There are an increasing number of mobile devices being released with a display cutout, sometimes called a notch. To deal with that, browsers add a little bit of extra margin to your page so the content isn’t obscured by the notch.

But what if you want to use that space?

With CSS environment variables and the viewport-fit meta tag, now you can. For example, to tell the browser to expand into the display cutout area, set the viewport-fit property, in the viewport meta tag to cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

You can then use the safe-area-inset-* CSS environment variables to layout your content.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

There’s a great post on the WebKit blog about Designing Websites for iPhone X, or check out the explainer for more details.

Web Locks API

The Web Locks API allows you to asynchronously acquire a lock, hold it while work is performed, then release it. While the lock is held, no other script in the origin can acquire the same lock, helping to coordinate the usage of shared resources.

For example, if a web app running in multiple tabs wants to ensure that only one tab is syncing to the network, the sync code would attempt to acquire a lock named network_sync_lock.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

The first tab to acquire the lock will sync the data to the network. If another tab tries to acquire the same lock, it’ll be queued. Once the lock has been released, the next queued request will be granted the lock, and execute.

MDN has a great Web Locks primer and includes a more in-depth explanation and lots of examples.

And more!

These are just a few of the changes in Chrome 69 for developers, of course, there’s plenty more.

• From the CSS4 spec, you can now create color transitions around the circumference of a circle, using conic gradients. Lea Verou has a CSS conic-gradient() polyfill that you can use, and the page includes a whole bunch of really cool community submitted samples.
• There’s a new toggleAttribute() method on elements that toggles the existence of an attribute, similar to classList.toggle().
• JavaScript arrays are getting two new methods: flat() and flatMap(). They return a new array with all sub-array elements smooshed into it.
• And OffscreenCanvas moves work off the main thread in to a worker, helping to eliminate performance bottlenecks.

New in Chrome Bloopers

We put together a fun little blooper reel for you to enjoy! After watching it, I've learned a few things:

• When I trip over my words, I make some weird noises.
• I make faces and stick my tongue out.
• I wiggle, a lot.

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 as soon as Chrome 70 is released, I’ll be right here to tell you -- what’s new in Chrome!

Feedback