New Opera Mobile 12.1 and Opera 12.10 beta (Flexbox!)

Yesterday we released two new releases: a stable version of Opera Mobile 12.1 for Android and a new beta build of Opera 12.10 for the desktop . The list of changes for developers turned out to be so interesting that we could not resist not to tell more about them.

Opera Mobile 12.1

This Opera Mobile 12.1 update mainly concerns the engine, do not search for interface changes yet.

Opera has always been known as the fastest browser, so after the appearance of support for the SPDY protocol in beta 12.10 for the desktop, it would be logical to bring this technology to where it matters even more - to mobile. Therefore, in this release, Opera Mobile gets SPDY support for sites that support it .
')
Of the other new products that appeared before the desktop, the new Opera Mobile has added support for the WebSockets API , and not just appeared, but finally turned on by default! It’s not we who were so angry turned it off before, we waited for security problems to be resolved - and now everything should be in order. Moreover, a whole bunch of new products have moved from the desktop version to the mobile version: contenteditable and designMode , Drag and Drop , the Clipboard API , Page Visibility API and CSS animations .

And most importantly: Flexbox!

The final version of Opera Mobile 12.1 and beta Opera 12.10 for the desktop support the latest version of the CSS Specification Flexible Box Layout specification or, as it is popularly known, Flexbox is 100% free, without prefixes . In particular, Opera Mobile is the first mobile browser in a stable version that does this.

If you have previously been interested in the old version of Flexbox or have never even tried it, then it will be useful for you to read the introduction to the Flexbox on Dev.Opera .

Besides the fact that we implemented the latest version of the specification, we added compatibility with code that relied on the old version with -webkit-prefixes. Read more about this below.

UA line changes

Like the desktop version, Opera Mobile now does not contain unnecessary garbage in the UA string, in particular the substrings "U;" and a pointer to the system language. Here, for example, UA for Opera Mobile 12.1, running on the HTC One S:

Opera/9.80 (Android 4.0.4; Linux; Opera Mobi/ADR-1210081231) Presto/2.11.355 Version/12.10 

Someone will say again: “you are evil, you have removed the substring, how will I determine the language now?” And it will be wrong. The string UA has never been a reliable and correct place to determine locale. For this, it is much better to use the Accept-Language header that the browser sends. And it's not only we are so smart, the same changes in UA have been done by IE, Firefox, Chrome and Safari. Everything so that you feel more comfortable.

And if you really like to determine with which phone your website works, we have one more novelty: the Device-Stock-UA header, which contains the UA browser built into the system. On the example of the same HTC, this title will look like this:

 Mozilla/5.0 (Linux; U; Android 4.0.4; en-no; HTC One S Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 

As you can see, the UA of the embedded browser also contains information about the device, up to the model. Therefore, you can use this information to fine-tune your sites and applications based on databases, such as WURFL or DeviceAtlas, in order to deliver only the necessary content and, for example, optimize graphics in a special way. But, to be honest, we don’t urge too much to engage in such sniffing out of the UA or digging into the huge model range of all existing phones. If only because it is not as reliable as it seems. But if you are sure of what you are doing, then the Device-Stock-UA header is useful to you.

Another change that you will hardly notice as a developer, but which will increase the compatibility of Opera Mobile with many western sites, is an improved built-in masking for other browsers. Of course, by default Opera Mobile is honestly presented as a serious Norwegian browser. But there are sites that only manage to give us a code that completely breaks the entire site. As an example, you can take Amazon: its mobile version is good only as long as it does not meet the mention of Opera Mobile and then it becomes impossible to remove goods from the cart. But if you disguise as a mobile Chrome, then everything becomes in order. We have to go to such tricks so that users do not have problems.

CSS compatibility

Opera Mobile 12.1 now supports a bunch of CSS properties without prefixes: transition , transform , linear-gradient and radial-gradient , @keyframe and animation and of course the flexbox property flexbox . For CSS animations and Flexbox, we only support the properties themselves, but for transition , transform , linear-gradient and radial-gradient we will also support versions with -o-prefixes for a while for better compatibility.

In this release, Opera Mobile also supports the new set of webkit properties for better compatibility with code written by stupid web developers only for browsers on the WebKit engine and without mentioning non-prefix properties.

Of course, the changes will affect not only CSS, but also the corresponding APIs in JavaScript, so this oTransitionEnd will turn into a transitionend , lowercase, as per the specification. To make it easier for you to remember, you can ask for help from this table:

Property	-o-	-webkit-	without prefix
linear-gradient	yes old syntax	yes old syntax	Yes
repeating-linear-gradient	not	not	Yes
radial-gradient	not	not	Yes
repeating-radial-gradient	not	not	Yes
animation	not	not	Yes
transform	yes (undesirable)	Yes	Yes
transition	yes (undesirable)	Yes	Yes
border-radius	does not exist	Yes	Yes
background-size	not	Yes	Yes
box-shadow	does not exist	Yes	Yes
Flexbox properties	does not exist	yes old syntax	Yes

For linear gradients, the mark “old syntax” means that keywords like bottom left should be used in specifying the direction of the gradient, while the specification for the same result should be written to top right - this option is supported for gradients without a prefix.

For Flexbox, the “old syntax” refers to the old box-flex properties that are outdated and you just need to write flex . “Undesirable” means that you should not use them, because in future versions of Opera we will reject them.

@supports

And finally: Opera 12.10 beta now supports real conditional CSS, which allows you to write supercompatible styles. Imagine how much such constructions will simplify work with browsers that either support or do not support:

 @supports ( display: flexbox ) { body, #navigation, #content { display: flexbox; } #navigation { background: blue; color: white; } #article { background: white; color: black; } } @supports not ( display: flexbox ) { body { width: 100%; height: 100%; background: white; color: black; } #navigation { width: 25%; } #article { width: 75%; } } 

Moreover, in conditional constructions one can use all the power of operators familiar to you from media expressions. All this beauty is called CSS Conditional Rules and additionally has a JavaScript API for working with the same conditions from scripts using the window.supportsCSS method.