Differences between Opera Mini 3 and 4

By Chris Mills

DEPRECATED: This article is deprecated, and a newer article with updated information is available at A developer’s look at Opera Mini 5. You should read this one if you want updated information on the latest version of Opera Mini.

Introduction

Opera Mini 3 was a highly successful mobile browser because of it's unique features, and also the unique way in which it uses a server farm to load up your pages for you and compress them before sending them to your device, meaning a faster, less costly experience that still gives you the full web on your phones, ever low powered ones. Opera Mini 4 builds on this with more great features and improved standards support, but what exactly are the differences?

In this article I provide a guide to the differences between the two versions. It is mainly geared towards developers wanting to make sure that their sites will still run on both versions, but I have also included a round up of the main new features the browser itself provides..

New features

This section lists the main new features introduced in Opera Mini 4, which will tempt users to make the upgrade.

Integration with Opera Link

Opera Mini is integrated with Opera Link, an exciting new service allowing you to keep all your bookmarks in sync between Opera Mini, Mobile, Desktop, and on games consoles.

Better navigation with virtual mouse and power scrolling

Opera Mini allows you to navigate around web pages much faster by using your joystick/stylus to move the virtual mouse around to select different page items (it snaps to nearby links etc.)

Keystrokes

While using Opera Mini 4 you can use various keyboard shortcuts to speed up using the interface, for example 1 will open up the context menu where you can reload the page, turn images off before you navigate to a new URL, and more.

View Pages in Landscape mode

If you want a widescreen view of the web, you can hit * # to rotate the screen through 90 degrees and browse in Landscape mode. This can also be changed to the default setting if you wish.

Optimized for Blackberry Users

Opera Mini 4 offers "native BlackBerry menus" designed to invoke the same user-interface Blackberry users are used to on their Blackberry devices, giving them a better experience.

Identification using the user agent string

Unsurprisingly, the user agent has changed between Opera Mini 3 and 4. The Opera Mini 3 UA string looked like this:

Opera/8.01 (J2ME/MIDP; Opera Mini/3.1.8295/1724; en; U; ssr)

Whereas the Opera Mini 4 string now looks like this:

Opera/9.5 (J2ME/MIDP; Opera Mini/4.0.xxxx/8; U; en)

You'll notice that it is based on the same core engine as Opera 9.5, whereas Opera Mini 3 was based on Opera 8.01.

Rendering Modes

Opera Mini 4 has two rendering modes:

  • Small screen rendering mode (mobile view) - the default on phones with screens less than 128 pixels in width, this mode reformats the page and then displays it in one small column, with no scrolling necessary. This is good for small screens, where all the scrolling would be potentially confusing and laborious, but it does mean losing a lot of formatting, such as CSS positioning
  • Desktop rendering - the default on phones with screens over 128 pixels in width, this mode displays the full page how it was originally intended, from a heavily zoomed out view. You can then select a position to zoom in to view the full-size content. When zoomed in, you can scroll around the page

Supported image formats

Opera Mini 3 and 4 basically support similar image formats, as both the core rendering engines they are based on have good image support, including PNG, JPEG, GIF (but not animated GIFs,) BMP, ICO, TGA and WBMP.

There are two different image settings available in Opera Mini - low quality, which reduces the image quality to save bandwidth, and high quality, which downloads the full image. The default is low, but the user can change this in the settings menu.

Standards support

At this point in the article, we've explored some of the new features Opera Mini 4 provides that weren't present in 3, and also looked at some of the technological differences. Now we turn our attention to web standards support, and how that differs between versions. It is inevitable that there are some differences, as 4 is based on a different core rendering engine to 3, but the differences will certainly be to your liking, I can promise that. For more on standards support in Opera Mini 4 and general development tips, see our article on Designing pages with Opera Mini 4 in mind.

HTML

Opera Mini 3 didn't support tables, underlining/strike-through/overlining, strong/emphasis, blockquotes, heading levels, del/abbr/acronym, lists, tables, and blink and marquee.

The good news is that Opera Mini 4 does support all of these (except blink and marquee!), for example h1 to h6 are displayed properly, and strong and em work as expected.

Tables work fine, even down to th producing headings, although tables containing more than about 2 columns won't look very good in mobile view.

The full complement of lists are supported - ordered, unordered, and definition.

CSS

CSS support is vastly improved in Opera Mini 4 over Opera Mini 3, again because of the change in rendering engine. Opera Mini 4 basically supports all the CSS that Opera 9.5 desktop (Kestrel) does, including CSS 3 features such as selectors, media queries and text-shadow (although text-shadow support is only partial - Mini 4 does not support blurred text shadows).

Opera Mini 4 also supports borders and background images.

Another big change with Opera Mini 4 is how it handles the handheld media type and media queries. This is discussed next.

Media types and media queries

Opera Mini 3 supports the handheld media type, as does 4, but 3 supports handheld by default, whereas 4 uses the screen stylesheet by default in desktop rendering mode, and allows users to switch to small screen rendering mode/mobile view to use the handheld stylesheet.

This decision was made because even though handheld is designed for mobile devices, it is rather restricting - Mini can handle most desktop web page content pretty well (although there are some scripting caveats, as mentioned below) so it is unfair to lumber it with low-fidelity handheld styling, when it could handle the main stylesheet. The styles used in the stylesheets are of course down to you as designers and developers, but a lot of web folk tend to offer a really low style experience in their handheld stylesheets. The way Opera Mini 4 does it gives users an immediate better-looking experience, while at the same time allowing them to choose the handheld styles or SSR if they wish.

Opera recommends media queries as a better way of tailoring styling to different devices, allowing iterative changes in style based on important factors such as browser window width. For example you could have one block of styles that will apply a good 2 column layout to all browsers, then a block of styles inside a media query that will reduce the heading sizes and change it to a single column layout if the browser window is less than 480 pixels wide - genius!

In the real world, using media types and queries does have issues due to browser support, and a combination of both is in fact needed to ensure reliable support in most browser. These issues are discussed further in our article on How to serve the right content to mobile browser.

JavaScript

The basic story in Mini 3 and 4 is that JavaScript is very limited on the client - background scripts will fail, there is limited support for DOM events, and very limited Ajax support. JavaScript executed on the server however will work fine. Mini 3's client-side JavaScript support was even more limited than the list you see below; fortunately Mini 4 has expanded it's support a bit.

The supported events are as follows (bear in mind that Event handlers using the 'this' keyword on elements other than form controls will fail, for example <a href="http://labs.opera.com" onclick='window.location = this.href'>):

  1. Loading: normal event processing is done for onLoad and onUnload.
  2. Forms:
    1. onSubmit
    2. onChange: this even works during filling out a form, not just on submitting the entire form. For example, if you have 2 form fields, "Select Country" and "Select State/Region," and the second one changes depending on the country you selected in the first one, Opera Mini will reload to display this change
    3. onClick on buttons (bear in mind that events will only be fired when the form is finally submitted, not while it's being edited in the client, therefore onFocus would not work)
  3. Clicks: onClick is implemented as a mouse motion to the coordinate being clicked (onMouseEnter, onMouseOver, onMouseLeave etc) followed by onMouseDown followed by onMouseUp and finally onClick.

All other events are ignored/not applicable, for example:

  1. key/mouse events (onMouseOver/-Out/-Down/-Up, onKeyDown/-KeyPress)
  2. focus events (onBlur, onFocus, as mentioned above)
The

document.write() function is also supported, and pop-ups are either blocked or replace the original document.

For more details of JavaScript support in Mini 4, see my JavaScript support in Opera Mini 4 article.

Summary

In this article we have covered the differences between Opera Mini 3 and Opera Mini 4, from a developer's point of view. This should be useful to anyone actively developing web content with mobile devices in mind, to see what issues there are to be aware of when making sure sites will work in both Opera Mini 3 and 4, and upgrading your knowledge.

Chris Mills is a web technologist, open standards evangelist and education agitator, currently working at Opera Software in the developer relations team. He spends most of his time writing articles about web standards for dev.opera.com and other publications (such as .net mag and A List Apart), giving talks at universities and industry conferences, and lobbying universities to improve their web education courses. He believes that education is the answer to everything, but in particular he is passionate about using education to improve the overall content quality, accessibility, usability and future-viability of the Web.

He is the creator of the Opera Web standards curriculum, contributor to the WaSP InterACT project, and coauthor of InterACT with web standards: A Holistic Approach to Web Design. In August 2011, he also accepted the position of co-chair of the newly-formed Web Education Community Group.

Outside work he is a heavy metal drummer, proud father of three and lover of good beer.


This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

Comments

The forum archive of this article is still available on My Opera.

No new comments accepted.