Update Opera Mini servers: Flexbox, ES5, HTML5 parser



    We upgraded the Opera Mini server to the new version of our Presto engine. This means Flexbox layouts and units remwill work as you would expect.

    As you probably already know, Opera Mini renders pages on Opera servers, and then they are sent in a highly compressed format back to clients on devices. This means that all users will immediately see the pages drawn by the updated Mini servers - they will not need to update the program. Automatic updates for 260 million users in just one weekend. Wow.

    What's new


    HTML5 parser

    Mini servers now use Ragnarök, our own implementation of the algorithm for the HTML5 parser . This algorithm is like an HTML ninja: very powerful, but always invisible. When we first implemented it in Opera for computers, we found that 20% of site compatibility problems disappeared. So this seemingly inconspicuous improvement should increase the compatibility of sites.

    New field types from HTML5

    Now our server support of the HTML5 field types ( tel, date, numberetc.) We plan to update the clients themselves later to these fields earned on supported operating systems. Until then, they will be replaced by , as required by the specification.

    CSS Flexbox

    Flexbox (or CSS Flexible Box Model , if officially) is a new way to create flexible layouts in the browser, responsive enough for pages to adapt well even without media expressions. Blocks are stretched or compressed to occupy free space, divide the space equally, creating layouts-grids for arbitrary widths. Blocks with content can be visually swapped without touching the HTML source code - for example, navigation to the left of the content on the large screen (located in the source code before it) can be moved after the content on narrow screens.

    More details:



    Units rem

    The unit remis equal to the calculated value of the font-sizeroot element. If you use this unit in your code, then a change font-sizefor an element will change all other properties expressed in rem.

    ECMAScript 5

    The following properties are now supported:



    This makes our ES5 support complete.

    What works in Opera Mini?


    Until now, Opera Mini clusters have been running Opera Presto, similar to Opera 11 for computers. Now it has been updated to a version similar to Opera 12 for computers, with some disabled features, mainly related to architectural features, for example:

    • JavaScript-only APIs do not work in Opera Mini due to its architecture. Other parts of JavaScript, however, work. Read more about Opera Mini and JavaScript .
    • Some CSS features are disabled: for example, rounded corners ( border-radius) and gradients are turned off because after rendering on the server they will have to be sent in raster form to the client, which instead of compression will eventually increase the original page size.
    • Web fonts are also not loaded, instead, the device’s system fonts are used. This is because many devices do not allow you to install other fonts; system fonts are obviously better optimized for a particular device and look better, and web fonts can be quite large, which slows down rendering.
    • CSS and SVG animations do not work; instead, only the first frame is displayed.


    Worth keeping in mind


    • If you use CSS gradients as the background for text or buttons, set a suitable value for background-colorwhich contrasts well enough with the text so that it can be read without this gradient.
    • Do not rely on icon fonts as web fonts are not loaded. Use SVG instead, this format can be made adaptive, see the report on how media expressions can optimize SVG icons for several sizes.
    • If you rely on some kind of database of IP addresses to determine the user's location, please note that the IP address you find in the headers belongs to our proxies for compression. The original IP address of the user is transmitted in the header X-Forwarded-For.
    • Ask yourself, “ Should all sites look the same in all browsers?” "And do not forget that the reason the user came to your site is its content.


    Testing


    We tested everything very carefully, but if you want to see how your pages look, there are several ways to do this.

    Download Opera Mini

    Of course, you can install Opera Mini directly on your device. Point your pocket friend to m.opera.com and download Opera Mini for Android, iOS, Windows Phone or even for the simplest mobile phone - Opera Mini works on more than 3,000 different devices.

    If you are using the iOS version, be sure to switch it to Mini mode to direct traffic through the Opera Mini server. Click on the red “O” and select “Opera Mini”. Opera Mini for iOS also compresses the video. Read more about Opera Mini for iOS .

    Computer testing

    For development and testing, it may be useful to install Opera Mini on your computer. To do this, you will need Java and MicroEmulator, in which you can run an instance of Opera Mini for J2ME phones. The Installing Opera Mini on Your Computer manual has all the information you need.

    You can also install Opera Mini on your Chromebook . No, you heard right.

    Testing local sites with ngrok



    Many developers use ngrok to safely open local servers to the global network. As the site says: “ngrok creates a tunnel from the public Internet subdomain.ngrok.comto the port on your local computer. You can share this link with anyone so that he can look at your work - no deployment is needed. ” You simply point Opera Mini on subdomain.ngrok.comto test your site. The ngrok code is open, the project also offers a paid service.

    In conclusion


    After months of planning and testing, we are infinitely happy to share the magic of ES5, the HTML5 parser, Flexbox, and the triumph of a unit remwith over a quarter billion users. In the meantime, we continue to work to make Opera Mini faster and more accessible to even more users - to make sure everyone has Internet access .

    Also popular now: