Friday, 21 October, 2016 UTC


Summary

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.
Input handling improvements
As usage of the mobile web grows, it is increasingly important for sites to react well to touch input. Historically, this meant handling MouseEvent and TouchEvent separately, which can be difficult to maintain. Chrome now enables unified input handling by dispatching PointerEvents. PointerEvents lead to more responsive pages, as they don’t block scrolling by default. To achieve the same performance with TouchEvent, pages can use passive event listeners.


Chrome also now supports two new ways to respond to input. The touch-action CSS property enables sites to react to gestures such as panning. For mouse buttons, the new auxclick input event type allows sites to manage the click behavior of non-primary buttons.   
Async and await functions
Asynchronous JavaScript can be difficult to reason about. Promises help avoid the nesting problem of callbacks, but Promise-based code can still be difficult to read when a site has large chains of asynchronous dependencies. Chrome now supports the async and await JavaScript keywords, allowing developers to write Promise-based JavaScript that can be as structured and readable as synchronous code.


Fetching a URL and logging the response using Promises:

function logFetch(url) {
 return fetch(url)
   .then(response => response.text())
   .then(text => {
     console.log(text);
   }).catch(err => {
     console.error('fetch failed', err);
   });
}


The same code using async and await:

async function logFetch(url) {
 try {
   const response = await fetch(url);
   console.log(await response.text());
 }
 catch (err) {
   console.log('fetch failed', err);
 }
}
CSS automatic hyphenation
Formatting text to fill available space can be a challenge across devices and screen sizes. Chrome now supports CSS automatic hyphenation, one of Chrome’s most frequently requested layout features, on Android and Mac. CSS hyphenation allows the browser to hyphenate words when line-wrapping, improving the visual consistency of text blocks. Hyphenation support will be extended to other platforms in future releases.

A paragraph rendered with and without automatic hyphenation
Other features in this release
  • The once event listener option enables callbacks to be invoked only once before removing the event listener.
  • Sites can now mark web storage as persistent, preventing Chrome from automatically clearing storage for that site.
  • Cross-origin iframes now require a user gesture to start audio playback using the Web Audio API on Android, matching the behavior of the <audio> and <video> elements.
  • The TLS stack now implements GREASE, a mechanism to help prevent problems with buggy TLS servers.
  • Developers can create a MediaStreamTrackEvent in an alternative way with its new JavaScript constructor.
  • RSA-PSS signature algorithms have been added to TLS to prepare for TLS 1.3.
  • To improve load times and prevent failed navigations, cross-origin and parser-blocking scripts injected using document.write() will no longer load over 2G connections.
  • AudioNode constructors of the form new AudioNode(context, options) are now available, making it simpler to manage audio from scripts.
  • When the media player is too narrow to show every button, an overflow menu will appear to provide the hidden functionality to users.
  • Chrome media controls will now display a download button when the playback is associated with a file that can be downloaded.
  • The Web Share API is available for experimentation as an origin trial.
Deprecations and interoperability improvements
  • BaseAudioContext will replace AudioContext in the Web Audio API to conform to spec.
  • CSS Clipping Path properties no longer require the webkit prefix.
  • The MediaStream constructor is now available without prefix alongside the existing webkitMediaStream.
  • Non-script MIME types will no longer trigger script execution.
  • <textarea maxlength=""> and <textarea minlength=""> have been updated to count each line break as one character, instead of two.
  • The webkit prefix has been removed from the imageSmoothingEnabled property of CanvasRenderingContext2D.

Posted by Dan Ehrenberg, Asynchronous Adventurer