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.