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.
autocapitalize HTML attribute
Chrome and Opera for Android now support the non-standard
autocapitalize HTML attribute for
<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.
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>
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
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
This enables streaming response bodies and interacting with the data stream even before it completes. An impressive demo is available.
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.
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.
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.
copyToChannel methods are now supported on
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
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.
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.