 It's been 10 years since Chrome was first released, a lot has changed since then, but our goal of providing a great solid platform for building modern web applications hasn't. In Chrome 69, there's support for CSS scroll snapping, support for notches, support for web logs, and a few new CSS4 features. I'm Pete LaPage. Let's dive in and see what's new for developers on what's new in Chrome 69. CSS scroll snap allows you to create smooth, slick scrolling 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 a line center to each image. Then, as the user scrolls through the carousel, each image will be smoothly scrolled into the perfect position. CSS scroll snapping works well even when snap targets have different sizes or when they're larger than the scroller. Check out the updates post for more details and some samples that you could try. There are an increasing number of mobile devices being released with a display cutout, sometimes called notch. To deal with the notch, browsers add a little bit of extra margin to your page so that the content isn't obscured. 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. You can then use the safe area inset CSS environment variables to layout your content. It's important to test this well. Remember, you're telling the browser that it's okay if some of your content gets hidden behind the display cutout. And don't forget to test this both in portrait and landscape mode. There's a great post on the WebKit blog about designing for iPhone X or check out the explainer or spec for more details. All of these are linked in the description. The WebLocks 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. 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 primer on using WebLocks and includes a more in-depth explanation with lots of examples linked in the description below. 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 Varue has a great page with examples and a polyfill that you can use for other browsers until it's available there. There's a new toggle attribute method on elements that toggles the existence of an attribute similar to class list.toggle. JavaScript arrays are getting two new methods, flat and flat map. They return a new array with all the sub-array elements smushed into it. And off-screen canvas moves the work off the main thread into a worker, helping to eliminate performance bottlenecks. All the details, including docs and specs, are in the updates post linked in the description. And be sure to click the subscribe button and you'll get an email notification whenever we launch a new video. Happy 10th birthday, Chrome. I'm Pete LaPage. Here's to the future and an even more capable web. Ooh, cake! See you next time. You still watching? This is good and gay. Sorry guys, this is good. I hope there's more. See ya!