New in Chrome 71

Pete LePage

In Chrome 71, we've added support for:

And there's plenty more!

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

Change log

This covers only some of the key highlights, check the links below for additional changes in Chrome 71.

Display relative times with Intl.RelativeTimeFormat()

Twitter showing relative time for latest post

Many web apps use phrases like "yesterday", "in two days", or "an hour ago" to indicate when something happened - or is going to happen, instead of displaying the full date and time.

Displaying relative times has become so common that most of the common date/time libraries provide localized functions to handle this for us. In fact, almost every web app I build, Moment JS is one of the first libraries I add, expressly for this purpose.

Chrome 71 introduces Intl.RelativeTimeFormat(), which shifts the work to the JavaScript engine, and enables localized formatting of relative times. This gives us a small performance boost, and means we only need those libraries as a polyfill when a browser doesn't support the new APIs yet.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

Using it is simple, create a new instance and specify the locale, then just call format with the relative time. Check out Mathias' The Intl.RelativeTimeFormat API post for full details.

Specifying underline location for vertical text

Vertical text with inconsistent underlines

When Chinese or Japanese text is displayed in a vertical flow, browsers are inconsistent with where the underline is placed, it may be on the left, or on the right.

In Chrome 71, the text-underline-position property now accepts left or right as part of the CSS3 text decoration spec. The CSS3 text decoration spec adds several new properties that allow use to specify things like what kind of line to use, the style, color, and position.


.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

Speech synthesis requires user activation

We've all been surprised when we hit a site and it suddenly starts talking to us. Autoplay policies prevent sites from automatically playing playing audio, or video files with audio. Some sites have tried to get around this by using the speech synthesis API instead.

Starting in Chrome 71, the speech synthesis API now requires some kind of user activation on the page before it'll work. This brings it in line with other autoplay policies. If you try to use it before the user has interacted with the page, it will fire an error.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

There's nothing worse than going to a site and having it surprise you, and the co-workers sitting around you.

And more!

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

  • The Element.requestFullscreen() method can now be customized on Android and allows you to choose between making the navigation bar visible versus a completely immersive mode where no user agent controls are shown until a user gesture is performed.
  • The default credentials mode for module script requests, has changed from omit to same-origin.
  • And bringing Chrome inline with the Shadow DOM v1 spec, Chrome 71 now calculates the specificity for the :host() and :host-context() pseudo classes as well as for the arguments for ::slotted().

Chrome DevSummit Videos

If you didn't make it to Chrome Dev Summit, or maybe you did, but didn't see all the talks, check out the Chrome Dev Summit 2018 playlist on our YouTube channel.

Eva and Phil went into some neat techniques for using service workers in Building Faster, More Resilient Apps with Service Workers.

Mariko and Jake talked about how they build Squoosh in Complex JS-heavy Web Apps, Avoiding the Slow.

Katie and Houssein covered some great techniques to maximize the performance of your site in Speed Essentials: Key Techniques for Fast Websites.

Jake dropped the cake. And there are plenty of other great videos in the Chrome DevSummit 2018 playlist, so check them out.

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