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. */
}
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.