Opera 30 released

Opera 30 (based on Chromium 43) for Mac, Windows, Linux and Android is out! To find out what’s new for users, see our Desktop and Mobile blogs. Here’s what it means for web developers.

Support for MSE with H.264

Opera now supports Media Source Extensions with H.264 using operating system-provided decoders. Previously, MSE was only supported with WebM. This change enables 60 FPS video in YouTube’s HTML5 player, for example.

The autocapitalize HTML attribute

Chrome and Opera for Android now support the non-standard autocapitalize HTML attribute for <input> and <textarea> elements, matching iOS Safari. This feature can be used to hint at how the browser should present the virtual keyboard to optimize text entry for the user. For example, you could indicate that a text box should automatically capitalize the first letter of every new sentence. A demo is available.

Upgrade Insecure Requests

Suppose you host a number of pages over HTTP that all have various images, stylesheets, scripts, etc., and you want to make these pages available over HTTPS. You now have to modify all documents to make sure they don’t attempt to load any resources over HTTP, which would trigger mixed content warnings and prevent those assets from loading. For sites with a lot of those documents, this quickly becomes a big hassle.

The new upgrade-insecure-requests Content Security Policy directive can now be used to transparently upgrade insecure resource requests to secure variants. This avoids the mixed content warnings without having to modify the HTML documents at all. For example, the following HTML would normally trigger mixed content warnings:

<link rel="stylesheet" href="http://example.com/some-stylesheet">
<img src="http://example.com/some-image" alt="Test">
<script src="http://example.com/some-script"></script>

When served with a CSP HTTP header that enables the upgrade-insecure-requests directive, the document would be interpreted as follows:

<link rel="stylesheet" href="https://example.com/some-stylesheet">
<img src="https://example.com/some-image" alt="Test">
<script src="https://example.com/some-script"></script>

JavaScript-powered copy/cut functionality

execCommand('copy') and execCommand('cut') are now allowed to modify the system clipboard in the context of a user gesture, matching the Clipboard API and events spec. This means you no longer need Flash-based hacks to add “copy to clipboard” functionality to your website! For more info, see “Cut and Copy Commands”.

Cache API globally available

The Cache API allows you to programmatically manage content caches for offline use and was previously only available in Service Worker contexts. As of Chromium 43 window.caches can be used to interact with the same cache from the context of a regular document. Here’s a demo.

Fetch API now supports streaming response bodies

Fetch API response objects now include the body property, which is a ReadableStream from the Streams Standard.

Note that in the future, response.body will be upgraded to a ReadableByteStream. This change should be backward-compatible since the ReadableByteStream API is a superset of ReadableStream.

This enables streaming response bodies and interacting with the data stream even before it completes. An impressive demo is available.

Permissions API

The Permissions API allows a web application to be aware of the status of a given permission: to know whether it is granted, denied, or if the user will be asked whether the permission should be granted. This API can be used to provide a better UI/UX based on what is going on. A demo is available.

DOM Attr interface changes

In the DOM4 spec, the Attr interface is no longer a subtype of Node. Chromium now matches the spec so that Attr instances do not have any child nodes anymore.

DOM properties moved to the prototype chain

Chromium now defines DOM properties on the prototype chain, matching the Web IDL spec. This change makes it possible to consistently and efficiently create getters/setters on every DOM object without having to define them on each individual instance. Read “DOM attributes now on the prototype” for more details.

Removal of overflowchanged event

The non-standard overflowchanged event has always been a WebKit/Blink-only feature. After being marked as deprecated for a while, it has now been removed from the Chromium engine altogether. Good riddance!

Web Audio API updates

The Web MIDI API enables web applications to enumerate and select MIDI input and output devices on the client system, and to send and receive MIDI messages. Try the demo if you have a MIDI input device connected to your computer.

In other Web Audio API news, an AudioContext can now be explicitly closed, thereby releasing any hardware resources associated with it. This gives developers more control, as previously they had to depend on garbage collection of the AudioContext to release hardware resources.

The copyFromChannel and copyToChannel methods are now supported on AudioBuffer instances.

Previously, AudioNode.disconnect() disconnected all existing connections from output(s) of the AudioNode. Now, it is possible to disconnect only a single signal path out of multiple connections to AudioNode input or AudioParam.

Unprefixed CSS animations

CSS animation properties such as animation and the @keyframes at-rule can now be used without the -webkit prefix. For compatibility with older content, the prefixed properties will continue to work, at least for the time being.

More extension APIs

Opera 30 for Desktop adds the sidebarAction API to extensions, enabling sidebar extensions.

For more information, see Shwetank’s blog post on sidebar extensions.

In addition to our official documentation, Daniel Aleksandersen has written his own guide to quickly making sidebar extensions. Using it, you can easily convert your (or others’) web apps to sidebar extensions. The guide links to a nice little template on GitHub. Tweak one file, add your own icons, zip it and ship it.

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.