Opera 31 released

Opera 31 (based on Chromium 44) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog. Here’s what it means for web developers.

CSS multi-column layout

Chromium now includes a brand new implementation of multi-column layout by Opera engineer Morten Stenshorne, solving historic issues with incorrect column balancing and interaction with compositing (hardware-accelerated layers). While it might have been possible to solve that in the old implementation, there was another big problem with the old implementation, code-wise: it needed a lot of hooks and special code in central layout code. The new implementation gives better support, and cleaner code that’s easier to maintain.

Note that for now, the -webkit- prefix is still required when using column layout-related styles.

A multi-column demo is available.

document.scrollingElement

Browsers disagree on whether html or body reflects the viewport for scrollTop et al. Some sites are using UA sniffing to decide which to use. Browsers want to align and use html (in standards mode), so sites that UA sniff need to be changed. To assist with this transition, Chromium now implements the document.scrollingElement API. Developers can now use that, falling back to a polyfill or whatever solution they were using previously.

See Simon’s write-up on fixing the scrollTop bug for more background.

ES6 computed property names

ES6 computed property names enable specifying properties in object literals whose names are the result of expressions rather than just hardcoded identifiers or strings.

const prefix = 'foo';

const object = {
	[prefix + 'bar']: 'Hello',
	[`${prefix}baz`]: 'world'
};

`${object.foobar} ${object.foobaz}!`;
// → 'Hello world!'

ES6 Unicode code point escapes

Unicode code point escapes such as \u{1F389} are now supported in string and template literals. This way, any symbol can be escaped using its Unicode code point.

Before ES6, JavaScript supported the so-called “Unicode escape sequences” of the form \uXXXX which only allowed up to 4 hexadecimal digits. Code points requiring more than four hexadecimal digits, (such as the immensely important party popper emoji), had to be represented using UCS-2/UTF-16 surrogate pairs.

// Let’s represent the U+1F389 PARTY POPPER Unicode symbol
// in a JavaScript string using escape sequences.

// In ES5, we’d have to calculate the surrogates manually,
// and use two separate escape sequences:
console.log('\uD83C\uDF89');
// '🎉'

// In ES6, we don’t have to calculate anything — we can
// simply use Unicode code point escapes:
console.log('\u{1F389}');
// '🎉'

Cache.prototype.add(request)

The add method on Cache instances is now supported. add takes a RequestInfo object, fetches it, and then adds the resulting response object to the cache.

Request.prototype.context

The read-only context property of the Request interface contains the context of the request (e.g. 'audio', 'image', 'iframe'). This indicates what sort of resource is being fetched.

The context of a request is only relevant in the ServiceWorker API. A service worker can make decisions based on whether the URL is for an image, or an embeddable object such as a <video>, <iframe>, etc.

Web Audio API updates

Matching a change in the Web Audio API specification, the buffer property of an AudioBufferSourceNode can no longer be set more than once. This protects developers from the lack of control over when the new source starts. Previously (as of Chromium 42 and Opera 29), if the buffer property is assigned to more than once, a deprecation message was logged to the DevTools console. Now, doing so throws an error.

The channel order of ChannelMergerNode is now static after instantiation, matching the latest spec. This change addresses various issues with the previous implementation.

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.