Opera 34 released

Opera 34 (based on Chromium 47) 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.

Array.prototype.includes

ES2016 (previously known as “ES7”) features a new array method named includes that determines whether an array includes a given element.

// Good ol’ ES5:
var isIncluded = someArray.indexOf(element) != -1;
// Shiny new ES2016:
const isIncluded = someArray.includes(element);

Compared to the old-school indexOf approach, includes handles NaN more elegantly:

var array = [NaN];
array.indexOf(NaN) != -1;
// → false
array.includes(NaN);
// → true

includes is also available for typed arrays such as Int16Array or Float64Array.

ES6 rest parameters

The ES6 rest parameters syntax allows functions to have a variable number of arguments without using the arguments object. Unlike arguments, the rest argument is a proper array, meaning array methods can be called on it directly:

// ES5:
function sort() {
	var sortedArgs = [].sort.call(arguments);
	return sortedArgs;
}

sort('z', 'y', 'x', 'a', 'c', 'b');
// → 'a', 'b', 'c', 'x', 'y', 'z'

// ES6:
function sort(...args) {
	var sortedArgs = args.sort();
	return sortedArgs;
}

sort('z', 'y', 'x', 'a', 'c', 'b');
// → 'a', 'b', 'c', 'x', 'y', 'z'

The new navigator.mediaDevices API can be used to enumerate connected media devices and to retrieve their media streams. We recommend the following:

  • Use navigator.mediaDevices.enumerateDevices() instead of the non-standard MediaStreamTrack.getSources() which doesn’t support audio output devices.
  • Use navigator.mediaDevices.getUserMedia() instead of navigator.getUserMedia().

More info can be found on the Google Developers blog, and hey — here’s a demo.

MouseEvent.prototype.getModifierState

We now support the getModifierState method on MouseEvent instances. It returns information about which modifier keys were pressed at the time the event was fired. Previously, this method was only available on KeyboardEvent instances. This change matches the spec and makes these APIs more consistent. A demo is available.

requestIdleCallback

The new requestIdleCallback API allows scheduling a task to run when the browser is idle. This makes it possible to perform background work on the main event loop, without impacting latency-critical events such as animation and input response.

For more information, check out the excellent tutorial on the Google Developers blog.

InputDeviceCapabilities

The new InputDeviceCapabilities API provides details about the physical device responsible for generating an event. InputDeviceCapabilities.prototype.firesTouchEvents returns whether this device dispatches touch events. All types of UIEvent now have their own sourceCapabilities property which returns the InputDeviceCapabilities associated with the physical device responsible for them.

Fetch API: RequestInit.referrer

This feature allows requests captured by service workers to match the original referrer.

By default, a captured request gets the service worker’s referrer (i.e. the service worker’s script URL), but with this feature the request keeps the original referrer.

Updated default Fetch API request flags for service workers

The flags of request objects that are passed to the service worker’s Fetch Event handler for navigation requests have been changed. Previously, these were the defaults for mode, credentials, and redirect:

{
	'mode': 'no-cors',
	'credentials': 'same-origin'
	'redirect': 'follow'
}

The new defaults (matching the spec) are:

{
	'mode': 'same-origin',
	'credentials': 'include'
	'redirect': 'manual'
}

Cache API: matchAll

Cache.prototype.matchAll is now supported. It greatly simplifies bulk searching of the cache, and allows you to get multiple matches.

Removed features

The SVG 1.1 hasExtension() methods on SVGAnimationElement, SVGCursorElement, SVGGraphicsElement, SVGMaskElement, and SVGPatternElement have been removed in SVG 2. Now, they’re removed from Opera and Chrome as well. Don’t worry — these methods always returned false and were thus of no real use anyway.

The same goes for a few SVG 1.1 SVG element methods — they no longer exist in SVG 2. So long, pixelUnitToMillimeterX, pixelUnitToMillimeterY, screenPixelToMillimeterX, and screenPixelToMillimeterY, and thanks for all the pixels! (These properties didn’t do what their names suggested in the first place — all they did was return the constant 0.2645833194255829.)

Improved text selection

Chromium no longer highlights the gaps between content when painting selections.

The new, much cleaner, text selection behavior. A before/after comparison is available, too.

More extension APIs

Opera 34 adds support for the chrome.desktopCapture API, enabling extensions with screensharing capabilities.

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.