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, Map
s 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. Set
s 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 Symbol
s
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:
Math.acosh
Math.asinh
Math.atanh
Math.cbrt
Math.clz32
Math.cosh
Math.expm1
Math.fround
Math.hypot
Math.log10
Math.log1p
Math.log2
Math.sign
Math.sinh
Math.tanh
Math.trunc
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.