- 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!
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.
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!