What’s new in Chromium 50 and Opera 37

Opera 37 (based on Chromium 50) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog. Here’s what it means for web developers.

ES6: RegExp Unicode flag

ES6 specifies the u flag which enables more Unicode-friendly features and behavior in regular expressions. For example, it allows using astral symbols in character class ranges:

// Match any symbol from U+1F4A9 PILE OF POO to U+1F4AB DIZZY SYMBOL.
const regex = /[💩-💫]/u; // Or, `/[\u{1F4A9}-\u{1F4AB}]/u`.
console.log(
	regex.test('💨'), // false
	regex.test('💩'), // true
	regex.test('💪'), // true
	regex.test('💫'), // true
	regex.test('💬')  // false
);

For more information on the effects of the u flag, see “Unicode-aware regular expressions in ECMAScript 6”.

ES6: more well-known symbols

Five more ECMAScript well-known symbols have been implemented:

These last four symbols act as hooks for RegExp subclasses to change the semantics of matching. By overriding MyRegExpSubclass.prototype[Symbol.match] etc. developers can change how the subclass behaves with respect to String.prototype.match and similar methods.

Bold emoji on OS X

Previously, emoji with font-weight: bold applied to them failed to render in Chromium on OS X. This is now fixed. 🙌🎉

The preload link relation makes it possible to define custom loading logic without suffering the performance penalty that script-based resource loaders incur. It can be combined with the as attribute to signal to the browser what kind of resource is being preloaded. This enables various optimizations that <link rel="prefetch"> or preload’s predecessor <link rel="subresource"> don’t offer. See Yoav Weiss’ excellent article for more information.

CSS column-fill

When using multi-column layouts, the CSS column-fill property indicates whether columns should be balanced or not. If they are balanced, each column gets similar amounts of content inside. If they are not balanced, each column is filled to the height of the multicol container, until all the content is displayed. The spec contains some examples with visualizations.

Canvas updates

<canvas> element instances now support the toBlob() method alongside the toDataURL() method. toBlob() is typically more efficient than toDataURL, as it enables you to work with the encoded binary data directly rather than with a Base64-encoded string.

The global createImageBitmap() method decodes an image in the background and returns an ImageBitmap which you can draw onto a <canvas> in the same way you would an <img> element, another canvas, or a video. See Paul Lewis’ write-up for more details.

DOMTokenList validation

It’s now possible to programmatically detect support of values for HTML attributes that are backed by DOMTokenList instances in JavaScript. Currently, those HTML attributes are the following:

To test a value, just use .supports(value) on the DOMTokenList instance. For more information, check out the Google Developers blog post.

FormData updates

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using XMLHttpRequest or fetch. Previously, FormData objects had a single append() method, and were thus write-only. The spec has now added has(), get(), getAll(), delete(), set(), entries(), keys(), values(), forEach() and Symbol.iterator() methods to allow inspection, iteration, and modification. Check out the demo.

HTMLMediaElement.prototype.play() returns a promise

The play method on <video> or <audio> element instances now returns a promise. If playback succeeds, the promise is fulfilled, and if playback fails, the promise is rejected along with an error message explaining the failure. For more details, check out Jeff Posnick’s blog post or view the demo.

Presentation API updates

Support for the statechange event on PresentationConnection instances has been removed since it’s no longer part of the spec. On the other hand, the message, connect, close, and terminate event are now implemented.

Web Animations API updates

This release introduces the following Web Animations API changes to improve interoperability with other browsers and to improve spec compliance:

  • Animation.prototype.id
  • cancel events
  • Deprecation of dashed names as keys in keyframes (to be removed in the next release)
  • State change for the pause() method

For details, see Alex Danilo’s write-up about these features.

Web Audio API updates

Automations for the BiquadFilter node now run at a-rate (updated every frame) instead of at k-rate (updated every rendering quantum of 128 frames). This change matches the spec.

Push Notifications on Opera for Android

Opera for Android now supports push notifications.

Sequential focus navigation starting point

The sequential focus navigation starting point is how the HTML spec defines where browsers should start to search for focusable areas when pressing Tab or Shift+Tab while there is no focused area. This is now implemented according to the spec.

X25519 for TLS

Chromium 50 brings support for X25519, the Diffie-Hellman primitive over Curve25519, to TLS. When compared to P-256, the most commonly used curve in TLS today, it admits simpler, faster implementations that are more naturally resistant to side-channels. Servers may negotiate X25519 for ECDH instead of existing curves.

Deprecated or removed features

The Geolocation API no longer works on insecure origins. Use HTTPS instead.

The use of the application cache API on insecure origins has been deprecated and will be removed in a future release. Use HTTPS and service workers instead.

Support for the insecure TLS fallback mechanism has been removed. This does not remove support for older versions of TLS — it just prevents attackers from downgrading the connection to use outdated, insecure ciphers. If your server is affected by this change, it does not implement TLS correctly. Consider upgrading to TLS 1.2 — all ciphers in prior versions have known problems.

The SVG zoom event was never fully implemented in Chromium, causing false positives in feature detection scripts. It has now been deprecated and its removal is planned for Chromium 52 / Opera 39.

Support for the non-standard -webkit-background-composite CSS property has been removed.

The WebRTC RTCPeerConnection instance methods createOffer() and createAnswer() now require an error handler as well as a success handler. Previously it was possible to call these methods with only a success handler. This non-standard behavior has been deprecated.

Support for <link rel="subresource"> has been removed. It never worked as intended, and no other browser engines implemented it. Use the preconnect, prefetch, preload, or prerender link relations instead, or use a service worker in combination with the Cache API for more fine-grained control.

The non-standard KeyboardEvent.prototype.keyLocation alias has been removed. To disambiguate between keys that are on multiple places on a keyboard, like numbers and Enter, use KeyboardEvent.prototype.location instead.

Support for document.defaultCharset has been removed.

Object.observe() has been removed from the ECMAScript spec and is now no longer supported in Chromium. Use the Proxy API to observe objects instead.

The SVGElement instance properties offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight has been removed. They are now only supported on HTMLElements, matching the spec. If you need similar functionality for SVG elements, use getBoundingClientRect() instead.

The XMLHttpRequestProgressEvent interface has been removed, together with the position and totalSize properties. Use the ProgressEvent interface with the loaded and total properties instead.

The Google Developers blog has more details on some of these feature removals/deprecations.

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.