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-image
s, 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.
SameSite
cookie attribute
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.