Cropped Chrome logo on the left, version number on the right.

New in Chrome 69

Published on Updated on

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 #

Warning

This post refers to CSS Scroll Snap, which is the current standard, not to be confused with CSS Scroll Snap Points, which has been deprecated and is no longer on the standards track.

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);
}

Remember: It's important to test this well; you're telling the browser it's OK if some content gets hidden behind the display cutout. And don't forget to test in both portrait and landscape modes.

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
Tim Malieckal
Rick Murphy
Derek Bass
Kiran Puri
Nilesh Bell-Gorsia
Lee Carruthers
Philip Maniaci
Chris Turiello
Andrew Barker
Alex Crowe
Izzy Cosentino
Norm Magnuson
Loren Borja
Michelle Ortega
Varun Bajaj
Ted Maroney
Andrew Bender
Andrew Naugle
Michelle Michelson
Todd Rawiszer
Anthony Mcgowen
Victoria Canty
Alexander Koht
Jarrod Kloiber
Andre Szyszkowski
Kelsey Allen
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.

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.