Source: Chrome 71 Beta: relative time formats and more from Chromium

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 71 on ChromeStatus.com. Chrome 71 is beta as of October 25, 2018.

International Relative Time Format

When writing (and speaking), phrases such as ‘yesterday’ or ‘in three months’ are common. Yet such phrases are not part of built-in date and time APIs. To fill this need, libraries provide utility functions to provide localized versions of such phrases. The downside to this approach is that using these functions on the web requires downloading lists of customary words or phrases for each supported language. This increases a library’s bundle size and download time.

Chrome 71 introduces Intl.RelativeTimeFormat(), which shifts the burden to the JavaScript engine. A few examples show how this works.

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

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

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

This new API has a number of capabilities beyond what is shown here including such things as retrieving information for multiple languages, dealing with parts of a date or time individually (in other words, formatToParts()), and more. Read our article for details.

Other features in this release

Add FullscreenOptions

The Element.requestFullscreen() method can now be customized on Android using an optional options parameter. Its navigationUI parameter allows you to choose between making the navigation bar visible versus a completely immersive mode where no user agent controls are shown until a gesture is performed. Possible values are "auto", "show", and "hide". This value expresses an application preference, with "auto" meaning no preference. The UI may overrule this vale in any case.

Add ‘persistent-storage’ property to the Permission API

The "persistent-storage" property is a new permission for the Permission API. The permission state can already be queried with navigator.storage.persisted(), with this change navigator.permissions.query({name:"persistent-storage"}) can be used as well.

Async touchpad pinch zoom events

Async touchpad pinch zoom events are for improving the page pinch zoom performance. Currently, the touchpad pinch zoom exposes a control wheel event that allows JS to cancel it. With this change, if the user doesn’t make a pinch action on the touchpad, effectively canceling the control wheel event, then following control wheel events are not cancelable. But JavaScript does not know which ctrl wheel is the first one in the sequence, so if you want to cancel pinch zoom, you need to cancel all of them.

COLR/CPAL font support

Chrome now supports COLR/CPAL fonts which are a type of OpenType color font composed of layers of vector outline glyphs and color palette information into the final colored glyph. With this change, Chrome supports three color font formats cross-platform, the other two being CBDT/CBLC and SBIX. Because they are vector based, COLR/CPAL fonts provide for faster downloads and require less storage. An example of a COLR/CPAL font is the Twemoji color font.

CSS gradient color stop double-position syntax

Support is added for the stop position syntax from the CSS Image Values and Replaced Content Module Level 4 spec. Currently, repeating colors require explicit positions. For example:

linear-gradient(45deg, black 25%, black 50%, white 50%, white 75%)

To simplify the definition of solid color bands, two positions may be specified instead. For example:

linear-gradient(45deg, black 25% 50%, white 50% 75%)

Implement ‘left’ and ‘right’ values for ‘text-underline-position’

Currently, in vertical flow for Chinese and Japanese, which side the underline appears on is not the same across browsers. To fix this, Chrome is adding support for 'left' and 'right' values of the 'text-underline-position' property. This property is part of the CSS3 Text Decoration spec which adds properties that implement new text decoration styling features such as lines, color, and style, including 'text-underline-position'.

JavaScript Modules: Credentials mode defaults to “same-origin”

The default credentials mode for module script requests is changing from "omit" to "same-origin", providing credentials to same-origin module script requests and their descendant scripts (static and dynamic imports). The current behavior can be surprising in that it’s misaligned with other high-level features like the Fetch API, and in the web platform’s current architecture, causes a second server connection. This is undesirable for developers looking to reduce latency.

TextEncoderStream and TextDecoderStream APIs

Text encoding and decoding supports streams to enable you to easily convert streams of binary data to text and vice-versa. An example of its usefulness is with readable streams. With a non-stream Response object, response.body.text() returns text. There is no equivalent for the ReadableStream returned by Response.Body, which can only return bytes. With the new API a streaming response body may be converted to text as so: Response.Body.pipeThrough(new TextDecoderStream()).

Unprefixed Fullscreen API

The Fullscreen API has features for entering, and exiting fullscreen mode as well as event handlers for monitoring such changes. A prefixed version of the API has been supported since Chrome 15. This update adds an unprefixed version of the API.

MediaElement and MediaStream nodes defined only for AudioContext

Chrome now only allows creation of MediaElementAudioSourceNode, MediaStreamAudioSourceNode, and MediaStreamAudioDestinationNode elements using an AudioContext. Previously these could be created using an OfflineAudioContext, but that does not comply with the spec. The behavior with an OfflineAudioContext is not well-defined and contrary to the real-time nature of the nodes themselves.

Interoperability improvements

Call capture event listeners in capturing phase at shadow hosts

To be interoperable with other browsers, Chrome now calls capture event listeners in the capturing phase at shadow hosts. Previously this was done in the bubbling phase on Chrome. A complete discussion may be read on the WHATWG repo on GitHub.

Improve :host, :host-context, and ::slotted specificity

Chrome now calculates the specificity for the :host() and :host-context() pseudo classes as well as for the arguments for ::slotted(). This brings it into compliance with the Shadow DOM v1 spec.
Shipping this will ensure interoperability between browsers since other browsers have or are about to ship this in their stable releases.

Deprecations and Removals

Chrome sometimes deprecates, removes, or changes features to increase interoperability with other browsers. This version of Chrome includes the following such changes.

Remove SpeechSynthesis.speak without user activation

The speechSynthesis.speak() method now fires an error if the document has not received user activation. This API is being abused by sites since it is one of the only remaining APIs which didn’t adhere to autoplay policies in Chrome.

Remove importScripts() of new scripts after service worker installation.

Previously, a service worker could use importScripts() to import any script at any time. After this change, a service worker can only use importScripts() in two cases:

• Before installation finishes (from the initial execution of the service worker until it reaches the `installed` state).
• After installation finishes, only for scripts that were already imported in the previous phase.

Remove prefixed versions of several APIs

Chrome has removed non-standard aliases for two widely supported standard interfaces.

• WebKitAnimationEvent – Use the AnimationEvent.
• WebKitTransitionEvent – Use the TransitionEvent.

Remove URL.createObjectURL for MediaStream

The URL.createObjectURL() method has been removed from the MediaStream interface. This method has been deprecated in 2013 and superseded by assigning streams to srcObject.

Remove document.origin

The document.origin property has been removed. This property was only ever implemented in Chromium and WebKit. It is redundant with self.origin which can be used in both window and worker contexts and has wider support.