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

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

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

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

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

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

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

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

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

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

<ol reversed> из HTML5

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

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

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

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

Поддержке SPDY

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

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

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

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

В качестве первого шага по внедрению спецификации CSS 3 Conditional Rules ^[12], в этой сборке мы представляем поддержку вложенных конструкций @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 ^[13], но вот самый простой пример:

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

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

Автор: pepelsbey