Opera 32 released

Opera 32 (based on Chromium 45) for Mac, Windows, and Linux and Android is out! To find out what’s new for users, see our Desktop and Mobile blogs. Here’s what it means for web developers.

ES6 arrow functions

Arrow functions enable a more succinct way of defining functions.

const numbers = [1, 2, 3];
// Let’s use the so-called fat arrow syntax:
const squares = numbers.map(x => x * x);
// This is equivalent to:
const squares = numbers.map(function(x) {
	return x * x;
});

They differ from regular function definitions in that their this and arguments objects, as well as the new super and new.target variables, are lexically bound.

Check out Axel Rauschmayer’s post on arrow functions for more information.

ES6 array and TypedArray additions

The following ES6 array features are now available:

Furthermore, TypedArray subclasses such as Int8Array and Float32Array now support existing array methods such as forEach and map, as well as the abovementioned new methods.

Object.assign()

The Object.assign() function copies the values of all enumerable own properties from one or more source objects to a target object. It returns the modified target object. This enables easily merging objects or cloning them shallowly.

const first = { 'name': 'Tony' };
const last = { 'lastName': 'Stark' };
const person = Object.assign(first, last);

console.log(person);
// → { 'name': 'Tony', 'lastName': 'Stark' };
// Note: `first` was modified too!
console.log(first);
// → { 'name': 'Tony', 'lastName': 'Stark' };

// To avoid mutating `first`, use this instead:
const person = Object.assign({}, first, last);

Touch.rotationAngle

The Touch Events specification defines a rotationAngle property for Touch instances. This value represents the rotation angle, in degrees, of the contact area ellipse defined by radiusX and radiusY.

Reduced mouse position updates

While scrolling via trackpad or mousewheel, we previously sent mouse position updates every 100 milliseconds. Each mouse position update includes updating :hover styles, and dispatching mousemove, mouseover, mouseenter, mouseleave, and mouseout events. On pages with heavy mouse handlers or :hover styles, this could cause significant amounts of scroll jank.

To counter this, we no longer send mouse position updates while scrolling. Instead, we trigger this behavior 100 milliseconds after scrolling ends.

Deprecated features

MediaStream API

The following MediaStream API features have been removed from the spec, and are now deprecated in Opera and Chrome:

  • MediaStream.prototype.label
  • MediaStream.prototype.ended
  • MediaStream.prototype.stop() (deprecated in favor of MediaStreamTracks.prototype.stop)

CSS / CSSOM

The CSSUnknownRule interface, which used to represent an unsupported at-rule, has been removed.

CSSKeyframesRule.insertRule() is deprecated in favor of CSSKeyframesRule.appendRule().

SMIL is now deprecated in favor of CSS Animations and Web Animations.

The motion-offset, motion-path, and motion-rotation CSS properties as defined in the CSS Motion Paths specification allow web pages to animate graphical objects along paths. Check out the demo.

DOM

DOM Attr instances (which represent attributes) now no longer have child nodes, matching the DOM spec.

The non-standard compareNode() and expand() methods on the Range interface have been removed.

document.charset is a non-standard IDL attribute supported by all engines except Gecko. There is a proposal to standardize it. In order to simplify standardization, document.charset has been made readonly, as a simple alias of document.characterSet.

Support for the filterRes attribute for <filter> elements has been removed in order to align with the spec.

Finally, at the Web Components F2F meeting in April 2015, it was decided that support for multiple shadow roots should be dropped from the spec. Chromium now logs a deprecation warning whenever an element hosts multiple shadow trees:

const div = document.createElement('div');
const shadowRoot1 = div.createShadowRoot();
const shadowRoot2 = div.createShadowRoot();
// Logs a deprecation warning.

Another result of that meeting is the deprecation of >>> / /deep/ and ::shadow pseudo-elements in dynamic profile. When a >>> combinator (the shadow-piercing descendant combinator formerly known as /deep/) is encountered in a selector, Chromium now replaces every element in the selector match list with every element reachable from the original element by traversing any number of child lists or shadow trees.

CSP2 self

In Content Security Policy Level 2, the 'self' source expression explicitly excludes the blob: and filesystem: schemes. If you wish to include content at those URLs in your pages, update your CSP directives to explicitly include those schemes.

CSSGroupingRule

The CSSOM CSSGroupingRule interface represents an at-rule that contains other rules nested inside itself. Per spec, CSSMediaRule and CSSPageRule inherit from CSSGroupingRule.

Service worker updates

Client.id

We now support the id property of a Client instance. Its value is a GUID allowing service workers to track client objects between termination and restart.

Client.postMessage and ServiceWorkerMessageEvent

Before Chromium 45, a Service Worker sending a message via Client.postMessage() resulted in a MessageEvent fired on the Client’s global scope (e.g. window). Since Chromium 45, the event is a ServiceWorkerMessageEvent fired on navigator.serviceWorker rather than window. Client.postMessage is now no longer considered to be an experimental feature.

ServiceWorkerContainer.getRegistrations()

The getRegistrations method on ServiceWorkerContainer instances returns all service worker registrations for the current origin.

ServiceWorkerRegistration.update()

The update() method on ServiceWorkerRegistration instances pings the server for an updated version of this service worker registration without consulting caches.

NotificationOptions.vibrate

The Notifications API spec defines a vibrate property on the NotificationOptions dictionary, which allows web developers to specify a vibration pattern for a notification.

Subresource Integrity

Subresource Integrity defines a mechanism by which user agents may verify that a fetched resource has been delivered without unexpected manipulation. In a nutshell, metadata inlined as HTML attributes allows the browser to determine whether the resource that was downloaded matches the resource the page’s author expected to download. Chromium now supports SI for <script> and <link rel="stylesheet"> elements.

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.