What’s new in Chromium 51 and Opera 38

Opera 38 (based on Chromium 51) 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 Symbol.hasInstance

Constructors can now implement their own Symbol.hasInstance method, which is used by instanceof to determine whether a constructor object recognizes an object as its instance.

ES6 subclassing using Symbol.species

The Symbol.species accessor property allows subclasses to override the default constructor for objects.

For example, Array.prototype.map constructs instances of the subclass as its return value, with the option to customize this by changing Symbol.species.

class MyArray extends Array {
	static get [Symbol.species]() {
		// Return the parent `Array` constructor.
		return Array;
	}
}
const foo = new MyArray(1, 2, 3);
console.log(foo instanceof MyArray); // true
console.log(foo instanceof Array);   // true
const mapped = foo.map(x => x * x);
console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array);   // true

ES6 RegExp subclassing

Previous versions of the JavaScript spec always used the original value of RegExp.prototype.exec in other methods such as String.prototype.replace — there was no way to override exec programmatically to change the core matching algorithm. In ES6 this is finally possible, which enables subclassing RegExp without having to duplicate any higher-level integration logic:

class MyRegExp extends RegExp {
	exec() {
		return ['Hello from MyRegExp!'];
	}
}

const re = new MyRegExp('foo');
'bar'.match(re);
// ['Hello from MyRegExp!']

ES6 Function.prototype.name

In ES6, the name property is sometimes set even on anonymous functions, based on the syntactic position of the function or class expression.

const foo = function() {};
const bar = () => {};
console.log(foo.name); // 'foo'
console.log(bar.name); // 'bar'

ES6 iterator closing

Iterators are now checked for a close method which is called if the loop terminates early. This can be used for clean-up duty after the iteration has finished.

ES6 Array.prototype.values

The values method for arrays returns an iterator over the contents of the array. This is similar to Map.prototype.values for maps or Set.prototype.values for sets.

Iterable array-like DOM interfaces

Any DOM interfaces containing indexed property getters and length properties now have a Symbol.iterator that makes them iterable. This means that things like NodeList, HTMLAllCollection, FileList, or MediaList can now be looped over by using forEach or for-of.

for (const element of document.querySelectorAll('p')) {
	element.textContent += ' Hurray!';
}

Passive event listeners

Passive event listeners are a new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners. Developers can annotate touch and wheel listeners with { passive: true } to indicate that they don’t invoke preventDefault to get a massive scroll performance boost.

For more information, read the explainer document or check out the demo.

KeyboardEvent.prototype.key

The key property on KeyboardEvent instances is now implemented. It returns the string value of the key (or keys) pressed by the user to generate the event. Check out the demo for key specifically or play around with the keyboard event viewer.

Intersection Observer API

The brand-new Intersection Observer API makes it easy to efficiently track when a given element in the DOM enters the visible viewport or leaves it. For more information, check out Surma’s write-up or the explainer document, or view a demo.

Presentation API

The Presentation API enables accessing external presentation-type displays and using them for presenting web content. A demo is available.

Service workers: ExtendableMessageEvent

ServiceWorker.prototype.postMessage() now results in an ExtendableMessageEvent fired on ServiceWorkerGlobalScope as a 'message' event. Before this change, postMessage() resulted in a MessageEvent fired on the global scope.

Calling the waitUntil(promise) method of an ExtendableMessageEvent instance extends its lifetime until promise is settled.

To experiment with this, view the service worker postMessage() demo.

Web Audio API: OfflineAudioContext.prototype.length

OfflineAudioContext instances now have a length that indicates the number of frames that the offline context will render.

WebRTC: promise-based RTCPeerConnection methods

The following RTCPeerConnection methods are now promise-based, matching the updated spec:

CSS border-image now follows the spec

Chrome and Opera now require a border style in order to paint border-images, matching the spec. If you’re affected by this change, add e.g. border-style: solid where border-image is used.

Percentage sizes of flex item children

According to the spec, certain flex items have definite sizes. If a child element of such a flex item uses percentage-based sizes, these are now handled correctly. A visual demo is available.

The cookie attribute formerly known as “First-Party-Only” or “First-Party” allows servers to mitigate the risk of CSRF and information leakage attacks by asserting that a particular cookie should only be sent with requests initiated from the same domain.

AES_256_GCM for TLS

To simplify server configuration and negotiate modern ciphers with more existing servers, Chrome and Opera now offer the AES_256_GCM cipher suite for TLS connections. See the intent to implement for details.

Deprecated and removed features

For security reasons, custom messages in onbeforeunload dialogs are no longer used.

DHE-based TLS ciphers are now deprecated and support for them will be removed at some point in the future. A warning message is logged to the DevTools console whenever such a cipher is used. Servers should upgrade to ECDHE ciphers instead.

Chromium 51 / Opera 38 no longer negotiates SPDY over HTTPS connections. Sites using it return to negotiating HTTP/1.1, unless they upgrade to HTTP/2. Use HTTP/2 instead.

A related feature removal is that of NPN, which was the TLS extension used to negotiate SPDY. During the standardization process, NPN was replaced with ALPN.

The non-standard results attribute for <input type=search> is now deprecated. In Chrome and Opera, it’s a purely cosmetic feature that adds a magnifier icon to the input field. In desktop Safari, it controls how many submitted queries are shown in a popup opened by clicking the magnifier icon.

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.