New in Chrome 62

• Chrome 62 makes the network information API more useful by providing actual performance metrics instead of theoretical results.
• Support for OpenType variable fonts has landed.
• You can capture media streams from HTML Media elements.
• I’ve got a special reminder about an important change that’s landing in Chrome 62.

And there’s plenty more!

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

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

Network Quality Indicator

The Network Information API has been available in Chrome for a while, but it only provides theoretical network speeds given the user’s connection. Imagine you’re on WiFi, but connected to a cellular hotspot that only has 2G speeds? The API would report WiFi!

console.log(navigator.connection.type);
> wifi

In Chrome 62, the API has been expanded to provide actual network performance metrics from the client. Using these network quality signals, you can tailor content to the network. For example, on very slow connections, you could improve page load performance by serving a reduced version.

To simplify your application logic, the API returns the measured network performance in terms of how it would compare to a cellular connection. For example, connected to a super fast fiber connection, the API would report 4G.

console.log(navigator.connection.effectiveType);
> 4G

These signals will also be available as HTTP request headers and enabled via Client Hints. Checkout out the sample and have a look at the spec for a deeper dive.

OpenType Variable Fonts

Traditionally, one font contained only a single instance of a font family, for example one weight or one stretch. If you wanted regular, bold and italic, you’d need to include three separate fonts, increasing the weight of your page.

An OpenType variable font is the equivalent of multiple individual fonts that can be compactly packaged within a single font file. By adjusting the font-variation-settings CSS property, stretch, style, weight and more, can easily be adjusted, providing an infinite number of stylistic variations. Those three fonts can now be combined into a single, compact file.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

OpenType variable fonts gives us a powerful new tool to create responsive typography, and reduce our page weight. Check out Introducing OpenType Variable Fonts by John Hudson for more details.

Media capture from DOM elements

You can now live-capture content into a MediaStream directly from HTMLMediaElements like audio and video, with the Media Capture from DOM Elements API.

After invoking captureStream() on an HTML media element, the streamed content can be manipulated, processed, sent remotely or recorded. Imagine using web audio to create your own equalizer or vocoder. Or stream the content to a remote site using WebRTC. The possibilities are almost endless.

Not Secure labels for some HTTP pages

As we announced previously, starting in Chrome 62, when a user enters data on an HTTP page, Chrome will mark the page as "Not Secure" with a label in the address bar. This label will also be shown in Incognito Mode for all HTTP pages.

And more!

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

• The Payment Request API is now available on Chrome for iOS.
• You can start building experimental rich VR experiences with the WebVR origin trial.

Then subscribe to our YouTube channel, and you’ll get an email notification whenever we launch a new video, or add our RSS feed to your feed reader.

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