Opera Developer News

Today we had not one, but two product releases: Opera Mini 6.1 (for Android, Blackberry, J2ME and Symbian) and Opera Mobile 11.1 (for Android and Symbian). You can get them directly from m.opera.com.

While Opera Mini 6.1 is primarily a security and stability release, Opera Mobile 11.1 has been updated to use the Opera Presto 2.8 rendering engine. This boosts the browser's capabilities with a whole host of new HTML5 and CSS 3 features – many of which only just made their official desktop debut in the Opera 11.50 release two days ago.

Multi-column layout

The CSS Multi-column Layout Module specification allows designers to finally create complex, print-like multi-column layouts without having to abuse table markup. See our introduction to CSS3 Multi-column layouts and check out the slightly modified newspaper-style multi-column layout.

<time> element

You can now see the <time> element and its associated DOM scripting possibilities in action, even on your mobile device, with the mighty date robot demo.

Session history and navigation

The HTML5 session history and navigation API allows for new ways to programmatically control and manipulate the browser's session history, save a web application's state, and handle user interactions (without breaking things like the back button). Of course, there's a recent article introducing the HTML5 History API, complete with a nifty file browsing app example.

dataset and data-* attributes

Rather than overloading className or adding invalid attributes to their markup, developers can now use a standardised and easy way to embed custom non-visible data with the data-* attributes in HTML5. We've recently published an introduction to datasets that shows you how.

W3C File API

The W3C File API allows web applications to open, read and manipulate data inside local files – all completely client-side. Opera Mobile 11.1, like Opera 11.50 on desktop, currently has partial support for this API. See our article on The W3C File API for more details and examples.

classList API

A lot of interactive, JavaScript-driven visual effects rely on adding, removing, toggling and checking different classes to change the styling of an element. Up to now, this involved string manipulations of the element's className attribute. classList is a new object, added to all nodes in the DOM, that provides all associated class names as a DOMTokenList, which includes handy native methods that make these common operations a breeze.

WebP

WebP is a new image format from Google, using the same VP8 codec as the WebM video format. On average, WebP images are more than 30% smaller than JPEG files with only a minor reduction in quality, making them ideal for use in mobile devices. Beyond being able to display WebP images, Opera Mobile 11.1 will now also use this new image format internally with Opera Turbo – making it even faster on slow connections.

Linear gradients

We now have initial support for CSS3 linear gradients. As in our desktop version, there's no support yet for radial gradients. See Vadim's Apple button menu example, part of our CSS3 linear gradients article.

Default zoom on high-DPI devices

By default, Opera Mobile used to apply a zoom factor of 160% on devices with high-DPI screens. In combination with

<meta name="viewport" content="width=device-width">

on a 480px wide screen (on VGA, WVGA, XVGA devices), 160% zoom resulted in a viewport width of 480px / 1.6 = 300px. However, many mobile-optimised sites – despite using device-width in their viewport definition – still seem to assume a width of 320px (the default iPhone width) in their layouts. This resulted in an annoying 20px horizontal scroll. In Opera Mobile 11.1 we've changed the default zoom on high-DPI devices to 150%, which gives us increased compatibility with these badly coded sites.

Figure 2: The mobile version of Flickr with a zoom of 160%, showing the unsightly horizontal scrollbars, and now with 150%, fitting perfectly.

For further details, see An introduction to meta viewport and @viewport, which has been updated to reflect this tweaked behavior.

...and much more

We've only cherry-picked some of the new features in this release. For an overview of how the new Opera Mobile 11.1 stacks up in comparison to its previous version, have a look at the overview of web specifications support in Opera products and the detailed web specifications support in Opera Presto 2.8. Enjoy!