Opera Mobile 11.1 — New Features and Additions
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.
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!