Opera 23 released

Opera 23 (based on Chromium 36) 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.

WOFF2 web fonts

Contrary to other web font formats, the new WOFF 2.0 Web Font compression format is optimized for file size, memory usage, and decompression speed.

To start enjoying these performance benefits, convert your existing web font to WOFF2, make sure your server is configured correctly, and add a single line to the @font-face declaration rule set, like so:

@font-face {
	font-family: MyAwesomeFont;
	src: url('MyAwesomeFont.eot');
	src: url('MyAwesomeFont.eot?#iefix') format('embedded-opentype'),
		/* Ready? Here comes the new part: */
		url('MyAwesomeFont.woff2') format('woff2'),
		/* That’s it! */
		url('MyAwesomeFont.woff') format('woff'),
		url('MyAwesomeFont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

CSS touch-action

The touch-action CSS property is part of the Pointer Events specification. Its value determines whether touch input may trigger default browser behavior such as zooming or panning. For example, to disable all default touch behaviors on a particular element, you can now use:

.foo {
	touch-action: none;
}

CSS will-change

The will-change CSS property can be used to signal that a particular CSS property’s value, or an element’s content, is likely to change, so that the browser can optimize for these changes ahead of time. See Sara Soueidan’s article on will-change for more information.

Unprefixed CSS Transforms

Opera previously supported the -webkit-prefixed versions of the transform, transform-style, perspective, perspective-origin, and backface-visibility CSS properties. We now support the standardized and unprefixed names for these.

element.animate()

The Web Animations specification introduces a model that explains the execution of CSS Animations, CSS Transitions, and SVG Animations, and exposes a JavaScript API to give scripts similar capabilities. Opera and Chrome now support the element.animate() method as defined by this standard. Here’s a simple example:

// Animate the background of the <body> element
// from white to black in 2 seconds.
document.body.animate(
	[
		{ 'background': 'white' },
		{ 'background': 'black' }
	],
	2000
);

For more, check out the element.animate() demo and its source code.

Support for the rest of the Web Animations API will be added in future releases.

Observing JavaScript objects with Object.observe()

Object.observe() makes it possible to easily observe changes to a given JavaScript object. Here’s a basic example:

var object = {};
// Start observing changes to the object.
Object.observe(object, function(changes) {
	changes.forEach(function(change, index) {
		console.log(change.name, change.type, change.object[change.name]);
	});
});
// Make some changes to the object.
object.first = 'John';
object.last = 'Smith';
delete object.first;

This functionality enables performant data binding implementations, which is good news for MVC libraries.

To cancel observation, Object.unobserve(object, callback) can be used. When dealing with arrays instead of objects, it’s easier to stick to Array.observe(array, callback) and Array.unobserve(array, callback). There’s Object.deliverChangeRecords(callback) and Object.getNotifier(object), too. See the Object.observe tutorial on HTML5 Rocks for more info.

ES6 WeakMap

WeakMaps are collections of key/value pairs in which the keys are objects and the values can be arbitrary values (as opposed to regular objects, where keys can only be string values). Here’s a simple example:

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

ES6 WeakSet

The new global WeakSet object lets you store weakly held objects (and only objects) in a collection. Here’s an example:

var map = new WeakSet();
var person1 = { 'name': 'John Smith' };
var person2 = { 'name': 'Pocahontas' };
// Add the `person1` object to the WeakSet.
map.add(person1);
// Later, we can check if the WeakSet contains any object:
map.has(person1); // true
map.has(person2); // false
// To remove an object from the set:
map.delete(person1);
map.has(person1); // false
// To remove all objects from the set:
map.clear();

HTML Imports

HTML Imports are a way to include and reuse HTML documents in other HTML documents. This feature falls under the Web Components umbrella. To learn more about HTML Imports, check out the tutorial on HTML5 Rocks.

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.