Opera 25 released

Opera 25 (based on Chromium 38) for Mac and Windows is out! To find out what’s new for consumers, see our Desktop Team blog. Here’s what it means for web developers.

The <picture> HTML element

Yes, <picture> is now available in Opera (and Chrome) by default! This new HTML element can be wrapped around any good ol’ <img> element to enable art direction, different images types, high-DPI images, changing image sizes, and more. We recommend you read Yoav Weiss’s introduction to native responsive images, or look at Andreas Bovens’s list of responsive image use cases with documented code examples.

Screen Orientation API

The Screen Orientation API provides the ability to read the user’s screen orientation type and angle, to be informed when the screen orientation state changes, and be able to lock the screen orientation to a specific state. This functionality is available under the window.screen.orientation object.

Notifications API

Opera now supports the Notifications API, available under the window.Notification object. Even though the Chromium project has supported this feature for a long time, we wanted to get the UX right before shipping this in Opera.

The way Chromium deals with notifications makes it seem non-native to the operating system on most platforms. We wanted to make it feel native on all our supported platforms, and we worked on it to make it happen. As a result, Opera’s web notifications look and behave like native notifications. We believe this is a much better experience for users.

Opera add-ons can make use of this functionality through the chrome.notifications API. Note that because of our native OS integration, only simple notifications (similar to non-rich web notifications) are supported in Opera; rich chrome.notifications are not.

File constructor

The global File constructor can be used to programmatically generate file objects on the client side:

var html = '<!DOCTYPE html><title>Test</title><h1>Hello world!</h1>';
var file = new File([html], 'test.html', {
	'type': 'text/html'
});

Here’s a demo that generates files on the client side and offers download links for them.

TextEncoder/TextDecoder API

The WHATWG Encoding Living Standard defines TextEncoder and TextDecoder interfaces that make it easy to translate between raw bytes and native JavaScript strings, regardless of which of the many standard encodings you need to work with.

// Encode a string using UTF-8:
var encoder = new TextEncoder('utf-8');
var encoded = utf8encoder.encode('foo𝌆bar');
// → an ArrayBuffer containing the bytes for this string as per UTF-8
// → [0x66, 0x6F, 0x6F, 0xF0, 0x9D, 0x8C, 0x86, 0x62, 0x61, 0x72]

// Decode the UTF-8 bytes back into a string:
var decoder = new TextDecoder('utf-8');
decoder.decode(encoded);
// → 'foo𝌆bar'

For more information on this feature, see Easier ArrayBuffer ↔ string conversion with the Encoding API.

ES6 iterators and for-of

ECMAScript 6 introduces a new for-of construct, which iterates over iterable objects like arrays, array-like objects, strings, iterators, generators, maps, and sets.

var iterable = ['a', 'b', 'c'];
for (var item of iterable) {
	console.log(item);
}

My favorite example of this is iterating over all characters in a string. With for-of, supplementary Unicode symbols are automatically treated as a single unit, just like you’d expect. In ES5 you had to write a lot of boilerplate code to make that happen.

var string = 'foo𝌆bar';
for (var item of string) {
	console.log(item);
}
// → 'f', 'o', 'o', '𝌆', 'b', 'a', 'r'

Jake Archibald has put together a comprehensive iterators tutorial with more code examples.

ES6 Map

A Map object is a simple key/value map. Unlike regular objects in JavaScript, which store their keys as strings, Maps accept any value — both primitive values and objects — as keys and values. Here’s a simple example:

var map = new Map();
var person = { 'name': 'John Smith' };
// Store a value in the Map that is tied to this `person` object.
map.set(person, 'foo');
// Later, we can check if the Map contains a matching value:
map.has(person); // true
// That value can be retrieved based on the `person` object:
map.get(person); // 'foo'

// Iterate over the items in the Map using `for-of`.
for (var item of map) {
	console.log(
		item[0], // key
		item[1]  // value
	);
}

ES6 Set

A Set object is a collection of unique values. Sets accept values of any type — both primitive values and objects.

var set = new Set();
var person = { 'name': 'John Smith' };
// Store some values in the Set.
set.add(person);
set.add(42);
set.add(42); // Note: duplicates are ignored.
// Later, we can check if the Set contains a value:
set.has(42); // true
set.has(person); // true

// Iterate over the items in the Set using `for-of`.
for (var item of set) {
	console.log(item);
}

ES6 Symbols

A Symbol is a unique and immutable data type that allows properties to be added to existing objects without the possibility of interference with the existing properties, unintended visibility, or with other uncoordinated additions by any other code.

Here’s an example:

(function() {
	var symbol = Symbol();
	var object = {};
	object[symbol] = 42;
	console.log(object[symbol]); // 42
}());

Due to the use of Symbols, it’s impossible to extract the private value 42 from the object unless you have access to the symbol reference variable.

Object.getOwnPropertySymbols can be used to programmatically list the Symbol properties on a given object. Here’s an example that demonstrates that Array.prototype makes use of Symbols:

Object.getOwnPropertySymbols(Array.prototype);
// → [Symbol(Symbol.unscopables), Symbol(Symbol.iterator)]

ES6 unscopables

Unscopables allow properties to be hidden from with statement lookup rules. This makes it possible to add new properties to existing host objects, both in JavaScript and in the DOM, without breaking backwards compatibility.

ES6 math functions

ES6 defines lots of new mathematics-related functions, which we’re happy to support in this new release:

Various SVG improvements

SVG <text> elements got a nice performance boost.

Also, SVG <feBlend> elements now support the following additional blend modes (for use in <feBlend mode="…">):

  • color
  • color-burn
  • color-dodge
  • difference
  • exclusion
  • hard-light
  • hue
  • luminosity
  • overlay
  • saturation
  • soft-light

Removal of support for SVG web fonts

Only Presto (i.e. Opera ≤ 12) and WebKit-based browsers ever implemented support for SVG web fonts in @font-face. Nowadays WOFF and WOFF2 are a much better choice.

As of this release, SVG web fonts are no longer supported, except on Windows systems which use GDI-based font rendering instead of DirectWrite-based font rendering (i.e. Windows < 7). Note that although the feature still works on those systems for now, it is considered deprecated, and support will eventually be removed completely.

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.