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.

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.

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.

22 July 2014 by Mathias Bynens in Blog