Opera 28 released

Opera 28 (based on Chromium 41) for Mac, Windows, 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.

Element.prototype.closest(selector)

The DOM standard defines the closest method for elements. It accepts a single selector argument, and returns the closest ancestor of the current element (or the current element itself) that matches that selector. If there isn’t such an ancestor, it returns null.

See MDN for more info and examples.

CSS any-pointer and any-hover media queries

CSS media queries now support any-pointer and any-hover, which function similarly to pointer and hover but can be triggered by any input device, not only the primary one.

@media (any-pointer: none) {
	/* This device lacks a pointing device. */
}
@media (any-pointer: coarse) {
	/* This device includes a pointing device of limited accuracy. */
}
@media (any-pointer: fine) {
	/* This device includes an accurate pointing device. */
}
@media (any-hover: none) {
	/* This device lacks a pointing system, or if there is one,
		 it can’t hover. */
}
@media (any-hover: on-demand) {
	/* The device has a pointing system that can hover, but it
		 requires a significant action on the user’s part. For example,
		 some devices can’t normally hover, but will activate hover on
		 a “long press”. */
}
@media (any-hover: hover) {
	/* The device has a pointing system that can easily hover over
		 parts of the page. */
}

A demo is available.

Web Audio suspend/resume & StereoPannerNode

The Web Audio API now allows developers to temporarily suspend an AudioContext when it’s not in use and resume it later. This can be used to improve power consumption, as shown on this demo page.

The StereoPannerNode interface is also supported now, enabling left-right panning of an incoming audio stream while maintaining equal power.

ES6 lexical declarations (let and const)

ES6 let and const declarations are now supported in strict mode. let or const defines a variable limited in scope to the block, statement or expression in which it is used. This differs from the var keyword, which hoists variables to the top of their containing function. Here’s a simple example:

for (const symbol of string) {
	// Note: `symbol` only exists within this block.
	console.log(symbol);
}
// Unlike with `var`, symbol` didn’t leak outside of the block:
console.log(symbol); // ReferenceError: `symbol` is not defined

For more info on what const and let are meant to be used for, see “ES6 const is not about immutability”.

ES6 binary and octal numeric literals

ES6 introduces two new types of numeric literals. Octal literals are prefixed with 0o or 0O and followed by octal digits from 0 to 7; binary literals begin with 0b or 0B followed by binary digits from 0 or 1. Here are some examples:

const bitmask = 0b11110000;
const chmod = 0o644;

ES6 template literals

Opera now supports ES6 template literals (commonly referred to as “template strings”).

Template literals provide syntactic sugar for multiline strings, string formatting, and for concatenating strings, variables, and the results of function calls.

const firstName = 'Leonard';
const lastName = 'Nimoy';
const message = `Hello ${firstName} ${lastName}!`;

Template literals go hand in hand with tagged templates, which are useful for context-aware HTML escaping to prevent XSS attacks or when internationalizing a site.

const safeHtml = htmlEscape`<a href="${url}">${text}</a>`;
const str = String.raw`This is a text
	with multiple lines.
	Escapes are not interpreted, so
	e.g. \n is not a newline.`;

For more information and examples, see Template strings: embedded DSLs in ECMAScript 6.

ES6 string methods

The following ES6 string methods are now supported:

  • String.raw (see the section on template literals & tagged templates)
  • String.prototype.repeat (polyfill)
  • String.prototype.startsWith (polyfill)
  • String.prototype.endsWith (polyfill)
  • String.prototype.includes (polyfill)
  • String.prototype.codePointAt (polyfill)
  • String.fromCodePoint (polyfill)

JavaScript performance improvements

Chromium 41 now implements script streaming (which optimizes the parsing of JavaScript files). The next version of Opera (and Chrome) will also support code caching (which avoids recompiling cached code on every visit). See “New JavaScript techniques for rapid page loads” for more information.

Socket name change

Those of you using the remote debugging feature in Opera for Android might be interested to learn that the DevTools socket name has changed from opera_devtools_remote to com.opera.browser.devtools (or com.opera.browser.beta.devtools in the beta). The socket name is also spelled out on the opera://debug page in the mobile client.

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.