Новинки Opera Mobile 12.1 и беты Opera 12.10 (Flexbox!)

Вчера мы выпустили два новых релиза: стабильную версию Opera Mobile 12.1 для Андроида и новую сборку беты Opera 12.10 для десктопа. Список изменений для разработчиков оказался настолько интересным, что мы не смогли удержаться, чтобы не рассказать о них подробнее.

Opera Mobile 12.1

Это обновление Opera Mobile 12.1 в основном касается движка, интерфейсных изменений пока не ищите.

Opera всегда была известна, как самый быстрый браузер, поэтому после появления поддержки протокола SPDY в бетах 12.10 для десктопа, логично было бы принести эту технологию туда, где это важно ещё больше — на мобильные. Поэтому в этом релизе Opera Mobile получает поддержку SPDY для сайтов, которые его поддерживают.

Из других новинок, прежде появившихся на десктопе, в новой Opera Mobile появилась поддержка WebSockets API, и не просто появилась, а наконец включена по умолчанию! Это не мы такие злые выключали её раньше, мы ждали когда решатся проблемы с безопасностью — и теперь всё должно быть в порядке. Более того, из десктопной версии в мобильную переехал целая куча новинок: contenteditable и designMode, Drag and Drop, the Clipboard API, Page Visibility API и CSS-анимации.

И самое важное: Flexbox!

Финальная версия Opera Mobile 12.1 и бета Opera 12.10 для десктопа поддерживают самую последнюю версию спецификации CSS Flexible Box Layout или, как её называют в народе, Flexbox на 100% — причём без префиксов. В частности, Opera Mobile — это первый мобильный браузер в стабильной версии, который делает это.

Если вы прежде уже интересовались старой версией Flexbox или даже ни разу не пробовали, то вам будет полезно прочитать введение в Flexbox на Dev.Opera.

Кроме того, что мы реализовали последнюю версию спецификации, мы добавили совместимость с кодом, который полагался на старую версию с -webkit-префиксами. Подробнее об этом читайте ниже.

Изменения в строке UA

Как и десктопная версия, Opera Mobile теперь не содержит лишнего мусора в строке UA, в частности подстроки «U;» и указателя на язык системы. Вот, к примеру, UA для Opera Mobile 12.1, запущенной на HTC One S:

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

Кто-то опять скажет: «злые вы, убрали подстроку, как я теперь язык буду определять?» И будет неправ. Строка UA никогда не была надёжным и правильным местом для определения локали. Для этого гораздо лучше использовать заголовок Accept-Language, который отправляет браузер. И это не только мы такие умные, те же изменения в UA проделали IE, Firefox, Chrome и Safari. Всё, чтобы вам было удобнее.

И если уж вам так нравится определять с каким именно телефоном работает ваш сайт, у нас ещё одна новинка: заголовок Device-Stock-UA, который содержит UA встроенного в систему браузера. На примере того же HTC, этот заголовок будет выглядеть вот так:

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

Как вы видите, UA встроенного браузера содержит также информацию об устростве, вплоть до модели. Поэтому вы сможете использовать эту информацию для тонкой оптимизации ваших сайтов и приложений на основе баз данных, вроде WURFL или DeviceAtlas, чтобы отдавать только необходимое содержимое и, например, особенным образом оптимизировать графику. Но, честно говоря, мы не слишком-то призываем заниматься таким вынюхиванием UA или копанием в огромном модельном ряде всех существующих телефонов. Хотя бы потому, что это не так надёжно, как кажется. Но если вы уверены в том, что делаете, то заголовок Device-Stock-UA вам пригодится.

Ещё одно изменение, которое вы вряд ли заметите, как разработчик, но которое позволит повысить совместимость Opera Mobile со многими западными сайтами — это улучшенная встроенная маскировка под другие браузеры. Конечно же, по умолчанию Opera Mobile честно представляется как серьёзный норвежский браузер. Но бывают сайты, которые умудряются отдать только нам такой код, который напрочь ломает весь сайт. В качестве примера можно привести Amazon: его мобильная версия хороша только до тех пор, пока не встречает упоминание Opera Mobile и тогда становится невозможно удалить товар из корзины. Но если замаскироваться под мобильный Chrome, то всё становится в порядке. Вот на такие ухищрения нам приходится идти, чтобы у пользователей не было проблем.

Совместимость CSS

Opera Mobile 12.1 теперь поддерживает кучу CSS-свойств без префиксов: transition, transform, linear-gradient и radial-gradient, @keyframe и animation и конечно же группу свойств flexbox. Для CSS-анимаций и Flexbox мы поддерживаем только сами свойства, а вот для transition, transform, linear-gradient и radial-gradient мы некоторое время так же будем поддерживать версии с -o-префиксами для лучшей совместимости.

В этом релизе Opera Mobile так же поддерживает новый набор -webkit-свойств для лучшей совместимости с кодом, написанным глупыми веб-разработчиками только для браузеров на движке WebKit и без упоминания безпрефиксных свойств.

Конечно же, изменения коснутся не только CSS, но и соответствующих API в JavaScript, так это oTransitionEnd превратится в transitionend, строчными, как по спецификации. Чтобы вам было проще запомнить, можете обращаться за помощью к этой таблице:

Свойство	-o-	-webkit-	без префикса
linear-gradient	да, старый синтаксис	да, старый синтаксис	да
repeating-linear-gradient	нет	нет	да
radial-gradient	нет	нет	да
repeating-radial-gradient	нет	нет	да
animation	нет	нет	да
transform	да (нежелательно)	да	да
transition	да (нежелательно)	да	да
border-radius	не существует	да	да
background-size	нет	да	да
box-shadow	не существует	да	да
Flexbox-свойства	не существует	да, старый синтаксис	да

Для линейных градиентов пометка «старый синтаксис» значит, что в указании направления градиента должны использоваться ключевые слова вида bottom left, тогда как по спецификации для того же результата нужно писать to top right — именно этот вариант поддерживается для градиентов без префикса.

Для Flexbox «старый синтаксис» относится к старым свойствам box-flex, которые устарели и писать нужно просто flex. «Нежелательно» — значит, что лучше вам их не использовать, ведь в будущих версиях Opera мы их отбросим.

@supports

И напоследок: бета Opera 12.10 теперь поддерживает настоящий условный CSS, который позволит писать стили суперсовместимо. Представьте себе, насколько такие конструкции упростят работу с браузерами, которые то поддерживают, то не поддерживают:

@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%; }
	}

Причём в условных конструкциях можно использовать всю мощь операторов, знакомых вам по медиавыражениям. Вся эта красота называется CSS Conditional Rules и дополнительно имеет JavaScript API для работы с теми же условиями из скриптов с помощью метода window.supportsCSS.