Обновление серверов Opera Mini: Flexbox, ES5, HTML5-парсер



    Мы обновили сервера Opera Mini до новой версии нашего движка Presto. Это значит, что раскладки на Flexbox и единицы измерения rem будут работать, как вы и ожидали.

    Как вы уже наверняка знаете, Opera Mini отрисовывает страницы на серверах Opera, и они потом в сильно сжатом формате отправляются обратно в клиенты на устройствах. Это значит, что все пользователи сразу же увидят страницы, отрисованные обновлёнными серверами Mini — им не понадобится обновлять программы. Автоматическое обновление для 260 миллионов пользователей всего за одни выходные. Ого.

    Что нового


    HTML5-парсер

    Сервера Mini теперь используют Ragnarök, нашу собственную реализацию алгоритма для HTML5-парсера. Этот алгоритм — как HTML-ниндзя: очень мощный, но всегда действует незаметно. Когда мы впервые внедрили его в Opera для компьютеров, то обнаружили, что 20% проблем с совместимостью сайтов исчезли. Так что это, казалось бы, незаметное улучшение должно повысить совместимость сайтов.

    Новые типы полей из HTML5

    Наши сервера теперь поддерживают типы полей из HTML5 (tel, date, number и т.д.) Мы планируем обновить сами клиенты позднее, чтобы эти поля заработали в поддерживаемых ОС. До тех пор они будут подменяться на <input type="text">, как этого и требует спецификация.

    CSS Flexbox

    Flexbox (или CSS Flexible Box Model, если официально) — это новый способ создания гибких раскладок в браузере, достаточно отзывчивый, чтобы страницы хорошо адаптировались даже без медиавыражений. Блоки растягиваются или сжимаются, чтобы занять свободное место, делят пространство поровну, создавая раскладки-сетки для произвольных ширин. Блоки с содержимым можно визуально менять местами, не трогая исходный HTML-код — например, навигацию слева от содержимого на большом экране (в исходном коде находящуюся до него) можно переместить после содержимого на узких экранах.

    Подробнее:



    Единицы измерения rem

    Единица измерения rem равна рассчитанному значению font-size корневого элемента. Если вы используете эту единицу в вашем коде, то изменение font-size для элемента <html> изменит все остальные свойства, выраженные в rem.

    ECMAScript 5

    Следующие свойства теперь поддерживаются:



    Это делает нашу поддержку ES5 полной.

    Что же работает в Opera Mini?


    До сих пор на кластерах Opera Mini работала версия Opera Presto, аналогичная версии Opera 11 для компьютеров. Теперь она обновлена до версии, аналогичной Opera 12 для компьютеров, с некоторыми отключёнными возможностями, главным образом, связанными с архитектурными особенностями, например:

    • API только для JavaScript не работают в Opera Mini из-за её архитектуры. Другие части JavaScript, однако, работают. Читайте подобнее об Opera Mini и JavaScript.
    • Некоторые CSS-возможности отключены: например, скруглённые уголки (border-radius) и градиенты выключены потому, что после отрисовки на сервере их придётся отправлять в растровом виде на клиент, что вместо сжатия в итоге увеличит изначальный объём страницы.
    • Веб-шрифты тоже не подгружаются, вместо этого используются системные шрифты устройства. Это происходит потому, что многие устройства не позволяют устанавливать другие шрифты; системные шрифты заведомо лучше оптимизированы для конкретного устройства и выглядят лучше, а также веб-шрифты могут быть довольно большими, что замедляет отрисовку.
    • CSS- и SVG-анимации не работают, вместо них отображается только первый кадр.


    Стоит иметь в виду


    • Если вы используете CSS-градиенты в качестве фона для текста или кнопок, установите подходящее значение для background-color, которое достаточно хорошо контрастирует с текстом, чтобы его можно было прочитать без этого градиента.
    • Не полагайтесь на иконочные шрифты, поскольку веб-шрифты не подгружаются. Используйте вместо этого SVG, этот формат можно сделать адаптивным, см. доклад о том, как медиавыражения позволяют оптимизировать SVG-иконки для нескольких размеров.
    • Если вы полагаетесь на какую-то базу данных IP-адресов для определения местоположения пользователя, обратите внимание, что тот IP-адрес, который вы найдёте в заголовках, принадлежит нашим прокси для сжатия. Оригинальный IP-адрес пользователя передаётся в заголовке X-Forwarded-For.
    • Задайте себе вопрос «Должны ли все сайты выглядеть одинаково во всех браузерах?» и не забывайте, что причина, по которой пользователь пришёл на ваш сайт — это его содержимое.


    Тестирование


    Мы протестировали всё очень внимательно, но если вам захочется посмотреть, как выглядят ваши страницы, для этого есть несколько способов.

    Загрузите Opera Mini

    Конечно же, вы можете установить Opera Mini прямо на ваше устройство. Направьте вашего карманного друга на m.opera.com и загрузите Opera Mini для Android, iOS, Windows Phone или даже для самой простой мобилки — Opera Mini работает на более чем 3000 разных устройств.

    Если вы используете версию для iOS, то не забудьте переключить её в режим Mini, чтобы направить трафик через сервера Opera Mini. Нажмите на красную «O» и выберите «Opera Mini». Opera Mini для iOS также сжимает видео. Читайте подробнее об Opera Mini для iOS.

    Тестирование на компьютере

    Для разработки и тестирования может быть полезно установить Opera Mini на ваш компьютер. Для этого вам понадобится Java и MicroEmulator, в котором вы сможете запустить экземпляр Opera Mini для J2ME-телефонов. В руководстве «Installing Opera Mini on Your Computer» есть вся нужная информация.

    Вы также можете установить Opera Mini на Chromebook. Нет, вы не ослышались.

    Тестирование локальных сайтов с ngrok



    Многие разработчики используют ngrok для того чтобы безопасно открывать локальные сервера в глобальную сеть. Как говорит сайт: «ngrok создаёт туннель из публичного интернета subdomain.ngrok.com до порта на вашем локальном компьютере. Вы можете поделиться этой ссылкой с кем угодно, чтобы он мог посмотреть на вашу работу — не нужно никакого деплоя». Вы просто направляете Opera Mini на subdomain.ngrok.com, чтобы протестировать ваш сайт. Код ngrok открыт, проект предлагает и платный сервис.

    В завершение


    После месяцев планирования и тестирования мы бесконечно рады поделиться магией ES5, HTML5-парсера, Flexbox и торжеством единицы rem с более чем четвертью миллиарда пользователей. Тем временем, мы продолжаем работать над тем, чтобы сделать Opera Mini быстрее и доступнее ещё большему числу пользователей — чтобы убедиться в том, что доступ в интернет есть у каждого.
    Opera
    Браузер Opera — больше возможностей в интернете
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 22

      0
      Presto все еще живой, радует.
      Планируется ли перевод серверов на Chromium/Firefox?
      Возможно ли это с точки зрения архитектуры, или Chromium/Firefox слишком не гибок для этого?
        +1
        Планов переводить текущую архитектуру на другие движки нет — пробовали, не очень эффективно. Presto для такой модели очень быстрой отрисовки малыми ресурсами подходит лучше.
          +2
          Может тогда выпустите Opera lite на Presto? Раз уж поддерживаете его? :)
          Или какие планы на Presto «12.17»+?
            –3
            Мы не поддерживаем Presto, мы просто прикрутили то, что уже есть к особенностям архитектуры Opera Mini. Но старый движко не пропадает просто так — мы думаем о том, чтобы применить некоторые технологические идеи из Presto для Blink.
              +1
              Да, все бы отдал, чтобы обновили Opera Classic, т.к. на Android 5 не запускается больше.
              pepelsbey не могли бы вы прояснить возможности этого?
                0
                Спросил: скорее всего, нет. Классическая Opera Mobile, как и Opera 12, закончили свою историю, мы сосредоточились на новых версиях.
                  +1
                  Это понятно, но если вы всё-таки перекомпилируете под пятый андроид, то получите слова благодарности от тысяч пользователей :)
                    0
                    А есть планы продать или отдать на сторону поддержку Opera 12 (Presto) с возможностью дальнейшей продажи? :)
              0
              А что насчёт Webkit? Он заметно похудел, когда из него костыли для Хромога выкинули, и при этом более-менее поспевает за гигантами. Всё равно ведь придётся куда-то валить рано или поздно, раз Presto не развивается.
                0
                Мне казалось, что это Blink избавился от кучи костылей, похудел и ускорился, когда отделился от WebKit — это и была причиной форкнуться. В любом случае — вряд ли, Blink развивается быстрее и подходит нам лучше.
              0
              Так они сервера Оперы Мини перевели условно с Оперы 11 на Оперу 12. Т.е. ничего нового не прикручивали к Престо, а лишь сделали очень поздний апдейт.
              А уже сейчас Опера 12 многие сайты отображает не очень корректно. Хотя, скорей всего, в этом виноваты разработчики сайта, но пользователю от этого не сильно легче.
              0
              > тот IP-адрес, который вы найдёте в заголовках, принадлежит нашим прокси для сжатия
              я думаю стоит добавить ссылку на официальный список адресов ваших прокси серверов
                0
                Официального публичного списка IP-адресов у нас нет. Но если вам очень нужно, вы можете написать мне pepelsbey@opera.com
                  0
                  еще было бы неплохо отправлять X-Real-IP вместе с X-Forwarded-For, который может содержать все промежуточные прокси-сервера
                    0
                    Какую задачу это решит?
                      0
                      Это решит задачу, которую решает X-Forwarded-For лучше, чем решает X-Forwarded-For
                        0
                        Чем лучше? Расскажи уже, зачем мне из тебя вытаскивать по слову за комментарий.
                  0
                  Пожалуйста, добавьте возможность сменить тему на темную (как в версии 5+ для J2ME и в Опере Классик для Андроид), очень плохо выглядит, когда содержимое страницы сливается с элементами управления (относится так же к Опере Мини Бета 8 и Опере для Андроид)
                    +1
                    хочется иметь возможность менять user-agent, некоторые сайты не нравиться в мобильной версии
                      0
                      Поддерживаю. Бесит нереально, когда сайты принудительно включают мобильную версию или вообще перенаправляют фиг знает куда вместо того, чтобы просто отобразить запрошенный URL. На андроид есть Opera Classic, где это настраивается, а в опере мини не хватает.
                      0
                      rbc нормально заработал наконец-то
                        0
                        Зато на ЛОРе постинг сломался. Больше вчера-сегодня не ходил особо никуда, но уверен — много где возможность работы с сайтом изменилась, и не всегда в лучшую сторону. Да даже здесь глючки: запостил только что комментарий — а под ссылкой «Редактировать» только первые две буквы подчёркнуты.

                      Only users with full accounts can post comments. Log in, please.