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:
Array.from
Array.of
Array.prototype.copyWithin
Array.prototype.fill
Array.prototype.find
Array.prototype.findIndex
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 ofMediaStreamTracks.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.