Красочная сборка Opera 12.50

Работа над новым стабильным релизом не прекращается и на этой неделе мы рады представить вам сборку Opera 12.50 с целым букетом новых красочных возможностей и улучшений. Как обычно, мы выбрали из них самые интересные для разработчиков и спешим поделиться.

API контекстных меню для расширений

Новые API для расширений? Конечно! На этот раз, это полезный метод для добавления пунктов в контекстное меню (то, что вызывается по правому клику). Это может быть полезно для какого-нибудь взаимодействия со страницей или её содержимым.

API предлагает точный контроль над срабатыванием контекстного меню, к примеру, только для ссылок или только в пределах определённого домена. Также вы можете добавить вложенные меню и контролировать происходящее при клике на пункт меню, имея доступ к адресу ссылки или к тексту, который в данный момент выбран пользователем.

В общем, этот API идеально подходит для разработчиков, всегда хотевших активировать свои расширения иначе, чем через кнопку на панели. Поэтому пробуйте и читайте подробности в свежей документации по API контекстных меню.

Полноэкранный API

Полноэкранный API представляет собой простой набор JavaScript-методов (таких как element.requestFullscreen() и document.exitFullscreen()) и новых псевдоклассов, вроде :fullscreen, которые позволяют страницам и, что ещё интереснее, даже отдельным элементам, вроде видео или игры на Canvas, выходить в полноэкранный режим.

В качестве самого простого демо, мы собрали простой видео-плеер с HTML-контролами и добавили к нему новые полноэкранные возможности: HTML5-видео — клёвые контролы для видео с помощью JavaScript, включая поддержку полноэкранного API. Обратите внимание, что в этой демке в полноэкранный режим выходит не только само видео, но и HTML-контролы, которые мы сделали сами.

Но как водится, с новым вечно-живым-HTML5-стандартом никогда нельзя быть уверенным в том, что спецификация не изменилась с тех пор, как ты что-то внедрил. Так и случилось: в этой сборке была внедрена версия полноэкранного API от 7 февраля 2012 года, тогда как стандарт частично изменился и последняя редакция датируется июлем 2012 года.

<ol reversed> из HTML5

Очень милая фича из вечно-живого-HTML5-стандарта <ol reversed> добавилась в этой сборке. В спецификации сказано, что «…Атрибут reversed булев. Его наличие указывает, что список убывает (…, 3, 2, 1). При его отсутствии, список возрастает (1, 2, 3, …)»

Кстати, если вы скомбинируете атрибут reversed с атрибутом start (который был крайне несправедливо запрещён в HTML 4, но полностью восстановлен в своих правах в HTML5), вы можете получить список, пункты которого следуют от нуля и ниже. Если же вы используете не десятичные маркеры списка (например, римские цифры), то нумерация списка станет десятичной после достижения единицы. В спецификации говорится:

Числа, меньшие или равные нулю, должны всегда использовать десятичную систему, вне зависимости от указанного типа.

Для браузеров, которые не поддерживают атрибут reversed, есть очень интересный и семантически верный полифил Луиса Лазариса.

Поддержке SPDY

Ах, как же быстро они растут… Только месяц назад мы выпустили сборку Opera Labs с поддержкой SPDY, как эта фича уже пробралась в основную ветку и готова к появлению в финальном релизе.

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

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

Вложенные конструкции @media

В качестве первого шага по внедрению спецификации CSS 3 Conditional Rules, в этой сборке мы представляем поддержку вложенных конструкций @media. Вместо составления длинных повторяющихся списков возможностей:

@media only screen and (orientation: portrait) and (min-width: 480px) {
    …
}
@media only screen and (orientation: portrait) and (min-width: 600px) {
    …
}
@media only screen and (orientation: portrait) and (min-width: 768px) {
    …
}

…вы теперь можете просто вложить @media друг в друга для более чистого, удобного и понятного кода:

@media only screen {
    @media (orientation: portrait) {
        @media (min-width:480px) {
            …
        }
        @media (min-width: 600px) {
            …
        }
        @media (min-width: 768px) {
            …
        }
    }
}

Поддержка изображения с профилями ICC

Кроме самих данных картинки, многие форматы (JPG, PNG, TIFF и другие) позволяют внедрять цветовые профили. Эти ICC-профили сообщают программам, как исходные данные изображения должны быть интерпретированы с учётом текущего цветового профиля, для более точного отображения. Большинство изображений в сети не содержат цветовых профилей, поэтому браузеры отображают из как есть, без какой-либо цветокоррекции. Тем не менее, энтузиасты и перфекционисты от фотографии будут рады узнать, что при наличии цветовых профилей в их изображениях, Opera покажет их именно так, как было задумано автором.

Подробнее про ICC-профили можно прочитать в этом прекрасном и доступном примере: Digital Image Color Spaces, но вот самый простой пример:

 

Если Брюс синий на обоеих картинках (а не тёплый и румяный на одной из них), значит ваш браузер не поддерживает ICC-профили.

Обе картинки полностью идентичны с точки зрения исходных данных изображения. Они были созданы с использованием чрезмерно искажённого цветового смещения, чтобы проиллюстрировать описанный принцип. Но первая фотография содержит цветовой ICC-профиль, сообщающий необходимую коррекцию, тогда как вторая фотография этого профиля не содержит. Поэтому в браузерах, которые не поддерживают цветовые профили, обе картинки будут показаны без какой-либо цветокоррекции (с синим искажением), а понятливые браузеры поймут и исправят первую картинку, согласно внедрённому цветовому профилю.