New in Chrome 69

Pete LePage

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 lets 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!

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

CSS Scroll Snap

View demo | Source

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)

mobile phone with display cutout — Browsers add some extra margin on a mobile device with display cutout to prevent content from being covered by the cutout.

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. Or dive in deeper and check out the spec.

And more!

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

conical gradient

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.

Easter eggs

Did you find all of the easter eggs in the video?

A special thanks to all the people who have helped to make the 28 episodes of New in Chrome happen. Every single one of these people are awesome!

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

Want to see how far New in Chrome has come since our first episode? Check out this fun 30 second progression video that charts our history from our first video to today!

And of course, thank you for watching and providing your comments and feedback! I read all of them, and take your suggestions to heart. These videos have gotten better because of you!

Thanks for watching!

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.

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