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

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

    Opera Mobile 12.1


    This update of Opera Mobile 12.1 mainly concerns the engine; do not look for interface changes yet.

    Opera has always been known as the fastest browser, so after the introduction of support for the SPDY protocol in beta 12.10 for the desktop, it would be logical to bring this technology to where it is even more important - to mobile. Therefore, in this release, Opera Mobile receives SPDY support for sites that support it .

    Of the other innovations that previously appeared on the desktop, the new Opera Mobile has added support for WebSockets API, and not just appeared, but finally turned on by default! It was not we so angry who turned it off earlier, we waited for the security problems to be solved - and now everything should be in order. Moreover, a whole bunch of new products have moved from the desktop version to the mobile one: contenteditable and designMode , Drag and Drop , the Clipboard API , Page Visibility API and CSS animations .

    And most important: 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 or, as it is popularly called, Flexbox 100% - without prefixes . In particular, Opera Mobile is the first mobile browser in the stable version that does this.

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

    In addition to implementing 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 substring “U;” and a pointer to the system language. Here, for example, UA for Opera Mobile 12.1, launched on 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, have removed the substring, how will I now determine the language?” And it will be wrong. The UA string has never been a reliable and correct place to define a locale. To do this, it is much better to use the header Accept-Languagethat the browser sends. And it’s not only we who are so smart, IE, Firefox, Chrome and Safari made the same changes in UA. Everything to make it more convenient for you.

    And if you really like to determine which phone your site is working with, we have one more novelty: a header Device-Stock-UAthat contains the UA built-in to the browser system. Using 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 embedded browser UA also contains device information, down 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 render only the necessary content and, for example, optimize the graphics in a special way. But, frankly, we do not really urge to engage in such sniffing of UA or digging in the huge model range of all existing phones. If only because it is not as reliable as it seems. But if you are sure what you are doing, then the title Device-Stock-UAwill come in handy.

    Another change that you are unlikely to notice as a developer, but which will improve the compatibility of Opera Mobile with many Western sites, is an improved built-in disguise for other browsers. Of course, by default, Opera Mobile honestly presents itself as a serious Norwegian browser. But there are sites that manage to give us only a code that completely breaks the entire site. Amazon can be taken as an example: its mobile version is good only until it meets the mention of Opera Mobile and then it becomes impossible to remove the product from the basket. But if you disguise yourself as mobile Chrome, then everything becomes in order. Here 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-gradientand radial-gradient, @keyframeand animation, and of course a group of properties flexbox. For CSS-animations and Flexbox we support only the properties themselves, but for the transition, transform, linear-gradientand radial-gradientwe have some time also will support a version with -o-prefixes for better compatibility.

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

    Of course, the changes will affect not only CSS, but also the corresponding APIs in JavaScript, so this oTransitionEndwill turn intotransitionend, lowercase, as per specification. To make it easier for you to remember, you can turn to this table for help:
    Property-o--webkit-without prefix
    linear gradientyes old syntaxyes old syntaxYes
    repeating-linear-gradientnotnotYes
    radial gradientnotnotYes
    repeating-radial-gradientnotnotYes
    animationnotnotYes
    transformyes (undesirable)YesYes
    transitionyes (undesirable)YesYes
    border-radiusdoes not existYesYes
    background-sizenotYesYes
    box-shadowdoes not existYesYes
    Flexbox propertiesdoes not existyes old syntaxYes
    For linear gradients, the marking “old syntax” means that the type keywords should be used in indicating the direction of the gradient bottom left, while according to the specification for the same result you need to write to top right- this option is supported for gradients without a prefix.

    For Flexbox, the “old syntax” refers to old properties box-flexthat are deprecated and simple to write flex. “Unwanted” means that it’s better for you not to use them, because in future versions of Opera we will drop them.

    @supports


    And finally: beta Opera 12.10 now supports true conditional CSS, which allows you to write styles super compatible. Imagine how such constructions will simplify the work with browsers that either support or 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, you can use the full 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 method window.supportsCSS.

    Also popular now: