CSS Guidelines / Guidance

[A Former User]

A Former User last edited by

Good Day All,

I have recently been tasked with designing/building a site that needs to be functional on opera mini (Java/Symbian, Android, iOS) - Educational Site, meant for the African Continent.

My question:

Opera Mini High and Opera Mini Extreme have two very different CSS profiles, eg. High accepts padding and font-sizes, whereas Extreme does not.

Does anyone know of a list or resource that has more information about which HTML/CSS rules or versions Extreme and High Supports?

I have looked at the Presto Engine Spec Docs but can only conclude that they are applicable to "High" Compression Only.

So I'm on the hunt for the documentation for Extreme and what it supports, in terms of CSS and/or HTML

Any help would be greatly appreciated.

Regards
John

[A Former User]

A Former User @Guest last edited by

Just on a side note, I have run many tests on opera mini extreme using different sites (css3test/w3c) and the features show as supported but they are not rendered by the browser in extreme mode.

As far as I can tell

CSS Rule	Support In High	Support in Extreme
background-color	✓	✓
color	✓	✓
font-size	✓	✗
line-height	✓	✗

[mbaluta]

mbaluta last edited by

First of all we are really glad to help webdevelopers in making their sites work good in Opera Mini.

The main difference between High and Extreme mode is that High mode uses WebView component for displaying web pages, so standards support depends on Android and WebView version in such case. In Extreme mode pages are rendered using Presto engine on Opera Mini servers. The same servers are used for J2ME, Symbian and other Opera Mini clients - as a result rendering should be similar between such clients (although not exactly the same). You can learn more on "Opera Mini and JavaScript" article on dev.opera.com.

In general CSS support is really similar to what you have in Opera 12.16/12.18 so you can test your site first in old Opera desktop browser as it's probably much faster way to develop. There are some exceptions and differences:

• in most cases possible font-sizes are limited to some subset, I described it in detail in another topic, notably this subset differs between devices,
• line-height is disabled at the moment, though we consider enabling it in the future, so please don't make assumptions on this,
• padding should work fine,
• elements with position: fixed are rendered as they were with position: absolute - they don't stick in viewport when you scroll,
• no CSS transitions, limited transforms support,
• broken complex flexbox-based layouts, simple things may work,
• some other minor things.

Regarding tests you can perform at css3test or w3c sites: they show what the engine supports, but a lot of things are changed on transformation to OBML.

If you have any specific issues you can always post your page or example problem here and I can assist on possible solutions/workarounds.

[A Former User]

A Former User @mbaluta last edited by

@mbaluta Thank you for the detailed information, I have encountered some of the above information in my searches, but nothing as concise as this.

In addition to testing on 12.16 I'll dive into OBML and see how the compression / transcoding impacts the markup.

Thanks Again!

[A Former User]

A Former User last edited by

Just a quick question, I do understand the 2 data savings modes: High and Extreme
What exactly is "Automatic" mode and how does it work.
I was looking all over the net, but did not find any satisfactory answer.

Thank you.
If this was already solved, please send me the link.
Thankx, Martin

[mbaluta]

mbaluta last edited by

It just automatically chooses High or Extreme mode based on website, country, Android version and possibly other factors as well.