Opera 26 released

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

rebeccapurple

Thanks to a Chromium patch by Opera, the new CSS color rebeccapurple (equivalent to #639) is now supported. A demo is available.

The Beacon API

The Beacon API makes it possible to asynchronously transfer small blocks of data from the browser to a web server. It can be used e.g. to send analytics or diagnostics info without blocking document navigation.

Here’s a simple example that transmits some data to the server when the page is closed, without delaying the page’s unload or affecting the performance of the next navigation:

window.addEventListener('unload', function() {
	navigator.sendBeacon(url, data);
});

CSS image-rendering: pixelated

The image-rendering CSS property provides a hint to the browser about what aspects of an image are most important to preserve when the image is scaled, to aid the browser in the choice of an appropriate scaling algorithm. When specified on an element, it applies to all images given in properties for the element, such as background images, list-style images, or the content of replaced elements when they represent an image that must be scaled.

The image-rendering: pixelated declaration indicates that such images should be scaled so that the image appears to be simply composed of very large pixels, e.g. using the nearest-neighbor interpolation algorithm. Here’s a demo of that effect in action.

(Interestingly, Chrome 39 on OS X doesn’t seem to support this yet, although it uses the same Chromium milestone version as Opera 26. Opera 26 for Android doesn’t support this feature yet, either.)

ES6 Generators

Generators are special functions that can be paused, exited, and later re-entered, with their context (variable bindings) saved across re-entrances. The use of generators can lead to greatly simplified asynchronous coding patterns and fewer callback functions. For an in-depth explanation with code examples, see Jake Archibald’s write-up.

Web Animation Playback Control

Chromium 36 and Opera 23 introduced support for element.animate() as seen in the Web Animations specification. Chromium 39 and Opera 26 now support the animation playback control features as described in the same spec. Among other things, this makes it possible to programmatically pause, play, or reverse animations. This interactive demo should give you an idea of its possibilities.

64-bit release on OS X

Opera for Mac is now a 64-bit browser. This offers many benefits for speed, stability and security.

The flip side of this change is that the 32-bit Silverlight plug-in for Mac no longer works, which obviously affects Silverlight-based applications, such as Netflix. At the moment, a 64-bit version of the Silverlight plugin is not available.

Other than Silverlight, Netflix also supports video using Encrypted Media Extensions (EME). However, given that Opera doesn’t support EME, this option unfortunately does not work either.

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.