opera

И ещё раз к теме быстродействия JavaScript. Jeff Atwood произвёл ряд JavaScript-тестов на разных браузерах. В результате получилась любопытнейшая картинка. Расшифровка тестов:

• 3d — тест на основе библиотеки работы с 3D, написанной на JavaScript (испытывается —
• быстродействие массивов и чисел с плавающей точкой)
• access — массивы, свойства объектов, доступ к переменным
• bitops — битовые операции на целых числах
• controlflow — циклы, рекурсия, условия
• crypto — криптоалгоритмы (AES, MD5, SHA1)
• date — производительность при работе с объектом «Date»
• math — различные математические операции
• regpexp — регулярные выражения
• string — работа со строками

Хуже все справился IE7, но, если не принимать во внимание операции для работы со строками, он обгонит FireFox, который сейчас занимает предпоследнее место. В комментариях есть тестирование FireFox 3 b2, вцелом он справляется на 23% лучше, чем вторая версия, но на некоторых тестах проигрывает.

Как известно, единственный формат анимированных картинок, который был доступен в вебе до недавнего времени — Animated GIF. Его недостатки общеизвестны — поддерживается только 256 цветов, нет полупрозрачности (альфа-канала). На смену GIF, теоритически, должен прийти более совершенный PNG, с выходом Internet Explorer 7, который стал поддерживать альфа-канал почти так же хорошо, как его младшие братья, ситуация всё улучшается, но…

В PNG, увы, нет анимации. Три новых формата, которые пока знакомы редкому веб-мастеру — APNG, MNG и SVG позволяют, в какой-то степени, исправить это досадное упущение.

MNG (Multiple-image Network Graphics) в данный момент поддерживается без плагинов в Konqueror и Netscape 6 и выше. Формат похож на PNG, но использует больше типов данных. Фрейм, используемый в анимации, может сохраняться в форматах PNG или JNG (JPEG Network Graphics, по сути — JPEG с прозрачностью).

APNG (Animated PNG) — формат расширяющий PNG и совместимый сверху вниз. Если ваш браузер не поддерживает APNG, вы увидите просто статичную картинку. В настоящее время формат поддерживают Opera 9.50 и далёкий пока от релиза FireFox 3. Картинка выше этого абзаца — тест, поддерживает ли ваш браузер APNG. Если вы видите «Your browser does support Animated PNG», значит поддержка есть.

SVG (Scalable Vector Graphics) — относительно молодой векторный формат, который поддерживают достаточно много браузеров: Opera с восьмой версии, Safari 3 и выше, FireFox с версии 1.5, а так же все браузеры на движке Gecko, начиная с версии 1.8. Это XML формат, который для меньшего размера можно сжать алгоритмом GZip (формат SVGZ). Обычно, анимацию в SVG делают при помощи внедрённого туда EMCAScript, сменяя кадры из картинок в любом другом формате. Не совсем то, но поддерживается почти любым современным браузером, хотя в стандарте SVG есть собственные методы анимации, по этой теме можно почитать статью на несложном английском «Advanced SVG Animation Techniques».

Благодаря БлоGноту узнал об официальном открытии сервиса «Я.ру», походил по ссылкам и обратил внимание, что в Opera 9.50 некоторые ссылки как-то интересно подсвечиваются. До того интересно, что я было подумал, что «оперовцы» реализовали CSS-фильтры из Internet Explorer. Оказывается, нет, это работает CSS3-свойство text-shadow (позволяет добавлять к тексту тень), которое на данный момент поддерживается браузерами Safari (и его кузенами), Konqueror, iCab и теперь ещё «Оперой».

Интересно, что тени (text-shadow) можно накладывать на текст по нескольку раз, что даёт интересные визуальные эффекты, например тот, который вы увидите ниже, если ваш веб-браузер поддерживает text-shadow:

Многократные тени — впечатляющая штука

Как обычно, идея позаимствована из Internet Explrorer, там есть фильтр «drop shadow», который занимается тем же самым.

<div style="cursor:hand;height:160px; padding:10px; font:bold 13pt Verdana;
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, 
        Color='gray', Positive='true')">
Текст с тенью
</div>

Причём, фильтр можно наложить несколько раз (добившись эффекта множественной тени), если окружить текст несколькими тегами и наложить на каждый тег по фильтру.

Давайте я вам всю мощь «Оперы» (последней) покажу? А то тут некоторые товарищи user.js для обнаружения «трафки™» начали придумывать. Тем не менее, JavaScript тут не нужен, хватит и CSS. Ведь у «Оперы», наряду с пользовательскими JavaScript, есть и пользовательские CSS. Так что, просто подключаем к «Опере» следующий код и следим за индикатором в левом верхнем углу экрана (рассказывать как подключать я не буду и другим не советую — пусть это будет фильтром).

a[href*="blogowar.ru/soldier"]  img[src*="blogowar.ru/herbs"]
{
        position: fixed; top: 4px; left: 4px; z-index:5000;
        background-image: url(http://blogowar.ru/favicon.ico);
        background-position: 50%;
        background-repeat: no-repeat;
        background-color: #eee;
        display: block;
        width: 25px; height: 25px;
}

Последний экспериментальный билд «Оперы» (ни в коем случае не устанавливайте его поверх вашей рабочей версии — эта версия основана на одной из альфа-версий Opera 9.50) поддерживает новый тег VIDEO, который входит в предварительную версию стандарта HTML5. Пока в качестве формата видео для этого тега выбран бесплатный Ogg Theora (кстати, недавно я писал о веб-камере, где всё ПО пишется под лицензией GNU, там используется тот же формат). Так же этом билде «Оперы» есть возможность использовать тег VIDEO внутри SVG.

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

Самое простое использование тега VIDEO — указание в атрибуте SRC видеофайла, который он должен проиграть и атрибута controls, который указывает должен ли браузер показывать кнопки управления воспроизведением (или разработчик будет управлять видео через соответствующие JavaScript-методы — play, pause, stop). В статье на сайте разработчиков есть несколько примеров.

Стандартные элементы управления (на рисунке) меня совершенно не впечатлили, я бы их использовать не стал, впрочем, дизайн ещё может измениться, да и всегда есть возможность сделать свои кнопки через JavaScript. Больше всего меня поразили методы внедрения видео в SVG — на сайте есть очень несложные в реализации примеры отражения шарика, движущегося внутри видео, в поверхности, наложения на видео фильтров (в примерах — trace edges, grayscale) и клиппинга.

P.S. На домашней странице Chris Double есть ссылки на FireFox3.0alpha9, собранный с поддержкой тега VIDEO.

Лично для меня событие недели — появление Opera 9.0 Technology Preview 1. Помимо поддержки XSLT, появления аналога настроек FireFox, только сделанных для человека, а не робота, поддержки Canvas, некоторых селекторов CSS3 и прочего, несомненный интерес представляет поддержка стандарта WebForms 2 — обратносовместимого расширения HTML для разработки различных интерфесов ввода. В частности, картинка на скриншоте делается одним-единственным тегом:

<input type="datetime" step="120" name="start">

и это далеко не самая впечататляющая демострация — просмотрите стандарт, хотя бы по диагонали. Жаль, что это всё удасться использовать не ранее чем лет через пять, прежде всего из-за абсолютного главенства Internet Explorer, уверен, что Gecko/Safari подтянутся, а вот от Microsoft такой резвости ожидать не приходится.