New in Chrome 57

Pete LePage

  • Chrome 57 adds support for display: grid - the new CSS Grid Layout specification.
  • You can now customize and respond to user input on the lock screen and notifications using the new Media Session API.
  • And there are plenty more!

I'm Pete LePage, let's dive in and see what's new for developers in Chrome 57!

CSS grid layout

Flexbox is a powerful layout tool. It makes many complex layouts possible, but it can only do layout in one dimension. Chrome 57 adds support for display: grid - the new CSS Grid Layout specification, adding a powerful new tool for creating two-dimensional grid-based layout systems, optimized for responsive user interface design.

Elements within the grid can span multiple columns or rows. Regions in a CSS grid can also be named, making layout code easier to understand.

Surma has an Updates post about it, and when you're ready to dive in deeper, check out Rachel Andrew's site: GridByExample.com.

Media Session API

One of the missing features from web media applications has been the ability to deeply integrate with the core media experience on mobile devices. In Chrome for Android, you can now customize the lock screen and notifications with media content using the new Media Session API.

By providing metadata to the browser about the content being played, you can create rich lock screen messaging that includes information such as title, artist, album name, and artwork. You can also listen for and respond to user actions taken on the notification itself, such as seeking or skipping.

If you want to get started quickly, Francois has a great Updates post, or check out the official Chrome media sessions samples repo on GitHub.

And more!

And there's lots more!

  • There are some improvements to the Payment Request API.
  • You can specify the color of the text input cursor with the caret-color property.
  • Visual effects such as line color and style can be specified with new text-decoration properties.
  • The Fetch API Response class now supports the .redirected attribute to help avoid untrustworthy responses and reduce the risk of open redirectors.
  • All -webkit- prefixed IndexedDB global aliases have been removed, after their deprecation in M38.
  • And one of my favorites — new padStart and padEnd formatting methods that simplify string padding when aligning console output or printing numbers with a fixed number of digits.

These are just a few of the changes in Chrome 57 for developers.

Shout out to Igalia

Finally, a big shout out to the engineers and team at Igalia for their awesome work on Blink. They were instrumental on landing the new CSS Grid and caret-color features.

Stay up to date

If you want to stay up to date with Chrome and know what's coming, be sure to subscribe to our channel, or follow @ChromiumDev on Twitter. And be sure to check out the videos from the Chrome Dev Summit for a deeper dive into some of the awesome things the Chrome team is working on.

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