opera

It appears that a considerable amount of browser sniffing scripts are not quite ready for this change to double digits, as they detect only the first digit of the user agent string: in such a scenario, Opera 10 is interpreted as Opera 1. This results in sites mistakenly identifying Opera 10 as an unsupported browser, thereby breaking server, as well as client-side scripts.

С Dev.Opera. Краткий перевод: значительная часть скриптов, определяющих версию браузера, не расчитана на версию в две цифры (OMG!), поэтому «Opera/10.00» превращается у них в «Opera/1»: они просто забирают первую цифру.

«Опера» в одно время пыталась притворяться Internet Explorer’ом — копировала его user-agent, эмулировала его свойства и так далее. В частности, в «Опере» есть document.all, как часть поддержки так называемых «коллекций», которые были разработаны и использовались в стародавние времена. Один из популярнейших методов определить «а не IE ли это» заключался в проверке существования document.all, иногда — исключения «Оперы»:

var isIE = document.all && self.opera

Впрочем, на Западе «Опера» не популярна, поэтому «Оперу» не исключают и считают её разновидностью IE.

Так вот, в последние годы «Опера» пытается открестится от своего «иешного» прошлого, например, где-то по дороге с 8-й версии в 9-ю user-agent перестал притворяться Internet Explorer’ом. А вот в 9-й версии (в 10-ке это тоже так) изменения начались, на мой взгляд, какие-то довольно печальные: ломают логику языка JavaScript.

В новых «Операх» конструкция alert(document.all ? 1 : 0) выдаст «0», тогда как alert(document.all) — «[object HTMLCollection]». Сделано понятно для чего: обратная совместимость не ломается, но проверка «не IE ли» теперь уже выдаёт false.

В конце 2008-го года в W3C появился черновик спецификации Geolocation API — технологии, позволяющей приложению в браузере узнать географические координаты компьютера на котором оно исполняется. Используется информация от GPS (если он есть), MAC-адресов окружающих WiFi и BT точек, сигналы RFID-меток, а так же информация с GSM/CDMA сот. В общем, что доступно.

В JavaScript это выглядит примерно так:

function showMap(position) {
      // Show a map centered at (position.coords.latitude, position.coords.longitude).
    }

    // One-shot position request.
    navigator.geolocation.getCurrentPosition(showMap);

Тем, кто видел Google Gears это уже знакомо. Причём, в момент, когда клиентское приложение в первый раз пытается получить координаты, браузер задаёт пользовалю вопрос, разрешает ли пользователь узнать приложению его координаты.

К чему это я всё вёл. Вчера появился специальный билд «Оперы», поддерживающий GeoIP. Что, правда, ничего не говорит о сроках внедрения технологии в стабильную версию. Например, тег VIDEO появился в эксперементальном билде аж в конце 2007-го, а специльный билд, проходящий ACID3, вышел в начале 2008-го. А первая публичная версия, которая будет проходить ACID3 и содержать тег VIDEO — Opera 10. Которая даже пока ещё не в стадии бета-тестирования.

Все как-то пропустили выход Opera Mobile 9.5TP с поддержкой Google Gears. Opera Mobile — единственный пока приличный браузер для Windows Mobile.

Google Gears — расширение, которое встраивает в браузер много интересного, например, Database API или Geolocation API (лучше почитать документацию, если вы ещё этого не делали). До этого момента Gears было доступно под все браузеры (включая IE), но не под «Оперу», так что это важный шаг.

Пока Microsoft идёт по пути Apple (Apple тоже наивно утверждала, что Safari быстрее всех), Opera балуется со сжатием данных. Ничего особо нового, но от этого технология хуже не становится: запрос идёт на прокси-сервер компании «Опера», а оттуда возвращается сжатый текстовый (CSS, JS, HTML) и бинарный (JPEG/PNG/GIF и даже Flash) контент.

На скриншоте, который я сделал, заметно, что JPEG (некоторые картинки в lossless-форматах так же преобразовываются в JPEG) пережимается очень сильно, причём опцию для отключения или корректировки такого поведения я не нашёл (в конфиге теперь добавились «Turbo Mode ID», «User Web Turbo Mode» и «Turbo Mode»).

Что, на мой взгляд, можно было бы улучшить: перепаковывать JPEG-картинки в JPEG-2000, а GIF пытаться преобразовать в PNG/APNG (проверяя, не уменьшается ли размер), так же вместо gzip-сжатия (подозреваю, что именно оно и было использовано) использовать что-то более эффективное (в сравнительной таблице архиваторов текста gzip на 169-м месте, bzip2 — на сотом). Ну и было бы нелишним дать пользователю больше возможностей для управления сжатием.

Естественно, интранет-сайты через прокси не проходят, не проходят через него и HTTPS-сайты по понятным причинам.

Из интересных решений — Flash не загружается до тех пор, пока на него не кликнешь.

Вышла Opera 10.0 alpha 1, из важных обновлений движка:

• полностью проходит тест ACID3
• новый движок регулярный выражений с улучшеной производительностью
• улучшена производительность CSS
• изменён вывод «голого» XML
• поддержка подгружаемых шрифтов (web fonts)
• поддержка RGBA и HSLA (цвет с указанием прозрачности)
• поддержа Selector API (который сейчас уже поддерживает Safari и IE8)
  Из других интересных особенностей: встроенная проверка орфографии, автообновление билдов.

Есть у меня такой любимый синтетический тест браузеров — запускать на своём древнем интерпретаторе языка Brainfuck вычисление числа Пи (программа есть на том же сайте).

Для интереса запустил его на браузерах, которые нашлись у меня на машине. Итог:

FireFox 3.1b1pre — 693 + JIT (410) = 1103 Opera 9.60 — 1141 + JIT (828) = 1969 Safari 3.1 — 1719 + JIT (547) = 2266 IE8 beta 2  — 2422 + JIT (843) = 3265 Chrome 0.2.149.30 — 7731 + JIT (950) = 8681

«1719 + JIT (547) = 2266» означает, что браузер проработал чуть больше двух секунд, из них полсекунды заняла внутренняя оптимизация кода на Brainfuck, которую делает мой интерпретатор, а 1.7 секунды выполнялся код на Brainfuck.

Как видно у Chrome не всё хорошо с JavaScript.

Вышел билд «Оперы» поддерживающий File I/O (файловый доступ из веб-приложения). Тег <video> и Canvas 3D, которые так же анонсировались, поддерживаются более ранними специальными билдами (в частности, <video> появился ещё восьмого ноября, год назад).

Тем не менее на «Хабре» какой-то ненаблюдательный товарищ анонсировал последние две технологии как нечто свежеобретённое, а про технологию File I/O написал буквально следующее:

Издревле повелось на Руси, что вэб-приложения имели очень ограниченный доступ к ресурсам дисковым компьютеров юзерских, что есть оправдано, с точки зрения безопасности. Это существенно ограничивало возможности Оперовских виджетов, которые и являются этими самыми вэб-приложениями. Но времена меняются, и с помощью системы File I/O теперь есть возможность безопасно работать с файлами на клиентском компе…

На Руси издревле имеется Scripting.FileSystemObject, доступный из IE, LiveConnect (позволяющий вызывать Java-методы доступа к файловой системы из JavaScript), встроенный в своё время в браузер от Netscape и XPCOM, встроенный в Mozilla (и в FireFox).

Три решения для доступа к файлам! Единственные, кто не имели интерфейсов для доступа к файловой системе — это «Опера» и «Сафари».

Итак, у нас, оказывается, есть надёжные CSS-фильтры для всех современных браузеров. О некоторых я уже писал, но перечислю все (стиль срабатывает только в указанном браузере):

<style type="text/css">
 /* только для Opera 9.50 и выше */
 noindex:-o-prefocus, tag { display: none; }

/* только для FireFox */
noindex:-moz-anylink, tag { display: none; }

/* только для FireFox /all/1623 */
@-moz-document url-prefix()
{
        tag { display: none }
}

/* только для Safari */
@media screen and (-webkit-min-device-pixel-ratio:0){
           tag { display: none }
}

xxx\:*, tag { display: none } /* только для IE */

</style>

Всё, надоело. Никто не использует VML и SVG? Почему все делают скруглённые углы только кучей картинок или через CSS3-свойства? В общем, представляю код, который работает для Opera 9.50 и выше (через SVG background), IE5.0 и выше (через VML), на FireFox 1.5, Safari3 и Konqueror (через свойства CSS3). Та-да:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- подключаем пространство имён VML для IE -->
<!--[if vml]>
    <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
    <style> v\:* { behavior: url(#default#VML); display: block; } </style>

<![endif]-->

<title>Скруглённые углы</title>

<style type="text/css">
    *    { padding: 0; margin: 0; }
    body { background: white; color: black; font: 12px Arial, sans-serif; }

    .rounded { margin: 100px auto; text-align: center; width: 50%; position: relative; padding: 10px; }

/*
Нижеприведённые background-image работает только в Opera 9.50 и представляет собой закодированный алгоритомом base64
код SVG-картинки:

<svg xmlns="http://www.w3.org/2000/svg">
<mask id="mask">
   <rect width="100%" height="100%" rx="10" ry="10" fill="white" stroke="black" stroke-width="2"/>
</mask>
<rect stroke="black" fill="white" stroke-width="4" mask="url(#mask)" width="100%" height="100%" rx="10" ry="10"/>
</svg>


В этой картинке подготавливается бакграунд со скруглёнными углами
*/
    noindex:-o-prefocus, .rounded-svg {
        background-image: url(data:image/svg+xml;base64,cюда нужно положить base64-кодированную картинку);
        border: none !important;
    }

    /* для разных браузеров указываем rounded corner через CSS3-свойство */
    .rounded-css3 {
        border: 1px solid black;
        -moz-border-radius: 1em;     /* mozilla 1.5 */
        -webkit-border-radius: 1em;  /* safari 3 */
        -khtml-border-radius: 1em;   /* Konqueror */
        border-radius: 1em;          /* CSS3 */
    }
</style>

</head>

<body >
    <!--[if vml]><v:roundrect class="rounded" strokecolor="black" strokeweight="1px" arcsize="0.25" ><![endif]-->
    <!--[if !vml]>--><div class="rounded rounded-css3 rounded-svg"><!--<![endif]-->
        <p>Вот эти ребята!</p>
    <!--[if !vml]>--></div><!--<![endif]-->
    <!--[if vml]></v:roundrect><![endif]-->
</body></html>

В коде есть несколько хаков. В частности, для «Оперы» я использую background, вставленный как SVG-изображение, через data URL. Поэтому приходится выключать border, иначе он закрывает края background. SVG закодировано в base64 (функция base64_encode в PHP), потому что оно занимает так меньше, чем в URL encoded.

Далее. Для IE включается VML, это, если кто не знает, появившаяся ещё до SVG технология построения векторных изображений. Более мощная, чем SVG, кстати. Весь VML включается через условные комментарии и другие браузеры этого безобразия не видят, в том числе их не увидит и валидатор (хотя ему и без VML тут есть на что поругаться).

Для остальных браузеров используются их префиксное свойство border-radius, которое включено в CSS3.

Ну, у кого там не падала «Опера»? Вышла новая версия (snapshot).В тексте изменений три раза встречается сочетание «fixed crash», всего «fixed» 10 багов. А вы говорите «у меня не падает».

Вышла Opera 9.50. Что же мы имеем, в итоге? Поддержка теста ACID3 — 87% (зато все CSS3-селекторы), нет обещанной поддержки web fonts, нет 3D CANVAS, нет тега VIDEO. Что за шутки? Помимо всего, она иногда ещё и подвисает.

Зачем надо было торопиться и выпускать браузер без новых возможностей, на которые так налегали всё время, пока шла разработка? Такими темпами «Оперу» опять обойдёт агрессивный «Сафари» и гугловский «FireFox». Через несколько дней можно будет скачать релиз FireFox3, посмотрим что там смогли сделать.

По стандартам в новой «Опере» нового: media queries, text-shadow, background sizing (через -o-background-size), HSL (это цветовая модель), overflow-x/overflow-y (CSS-свойство, доставшееся нам от IE), nav-*, server-sent events (это из стандарта Web Application), улучшенная поддержка Web Forms, XML/XSLT и SVG.

P.S. Илья, а сайт Горбунова так и разъезжается в новой «Опере». Я предупреждал!

А вы знаете, что в браузере «Опера» уже довольно давно (с версии 7.50) существует проверка орфографии? Чтобы её включить нужно скачать GNU Aspell для Windows (в случае Windows) или GNU Aspell (для Linux и прочих Unix) и необходимый вам словарь (есть на странице Aspell). После чего нужно поставить Aspell и словари и перезапустить «Оперу». В текстовых полях станет доступным пункт «Проверить орфографию» («Check spelling»).

Правда не скажу что это удобно, но хоть что-то.

Remco Lanting в своём блоге опубликовал способ увеличения количества speed dials в «Опере» (работает с версии Opera 9.50b2 и выше):

смотрим где находится папка профайла (Help → About → Opera directory)

закрываем «Оперу»

заходим в папку профайла, открываем файл speeddial.ini

после заголовка вписываем: [Size] Rows=4 Columns=5

запускаем «Оперу», в «Speed dial» теперь 4 строки и пять столбцов.

Как мне справедливо подсказали в предыдущей заметке большинство современных браузеров поддерживает свойство text-overflow, позволяющее добиться того, что я сделал в предыдущем примере одной строкой. Работает для всех браузеров, кроме FireFox, у него таких стилей нет.

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

<style type="text/css">
body { background: white; color: black; font-family: Arial; font-size: 16px }

.crop div div
{
    text-overflow: ellipsis;    /* Internet Explorer 6.0 и выше, Safari, Konqueror */
    -o-text-overflow: ellipsis; /* Opera 9.0TP1 и выше */
    white-space: nowrap;
    width: 100%;                /* для IE */
    overflow: hidden;
}

.crop ins, .crop del { display: none } /* скрываем свои хаки от остальных браузеров */

/* стили только для FF, см. /all/1623 */
@-moz-document url-prefix()
{ 
    /* ширина «…» — 16px, высота строки — 18px */
    .crop          { overflow: hidden; height: 18px; width: 100% }
    .crop div      { clear: none; float: left }
    .crop div div  { white-space: nowrap; overflow: hidden; margin-right: 16px; width: auto}
    .crop ins      { float: right; margin-left: -16px }

    /* margin делаем на -1px уже, чем ширина «…», чтобы блок «свалился» чуть раньше */
    .crop del      { float: right; color: white; background: white; width: 16x; margin-left: -15px }
    .crop del, .crop ins { display: block; text-decoration: none }
}
</style>
<div style="max-width: 700px; margin-left: 10px">

<div class="crop">
<div>
    <div>Who let the dogs out (woof, woof, woof, woof)!</div>
    <ins>&hellip;</ins> 
    <del>&hellip;</del>
</div>
</div>

</div>

Вот такая эмуляция text-overflow в FireFox.

Возникла у меня на днях задача — обрезать текст средствами браузера с красивым многоточием, если текст не умещался. Обычно такую проблему решают через JavaScript, но мне пришло в голову сделать это средствами CSS, я даже сразу придумал откуда можно начать.

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

В качестве concept proof я накидал небольшой пример, который сразу заработал в «Опере» и «Сафари», FF2 и IE7 возможностями победнее, они не потянули, видимо, в них придётся убрать селектор «:after» и заменить всё тегами с многоточиями внутри.

Сам код:

<style type="text/css">
    body { background: white; color: black; font-family: Arial; font-size: 16px }

    div.crop { width: 100%; height: 20px; overflow: hidden; z-index: 1 }

    div.crop div { float: left; width: auto }

    div.crop:after     { content: '\2026'; position: relative; z-index: 2; background: white; margin-left: -16px }
    div.crop div:after { content: '\2026'; position: relative; z-index: 3; background: white; color: white }
</style>

<body>
<div class="crop"><div>Текст не умещается в контейнер, до того он длинный</div></div>
<div class="crop"><div>Текст не умещается в контейнер</div></div>
</body>

Пару дней назад «Опера» прошла тест ACID3, но публичного билда, подтверждающего это событие, не было. Сегодня стал доступен специальный билд, который демонстрирует прохождение теста (есть версии для Windows и Linux). Я себе его скачал, посмотрел, тест действительно проходит, но сайты открывает ужасно, видимо, это специальная ветка разработки, патчи из которой будут включены в «Оперу» позднее. Так же эта версия действительно поддерживает web fonts и цвета в виде rgba/hsla.

Кстати, user-agent у этого билда выглядит вот так: «Opera/9.0 (WinGogi; U; en)».

Сегодня же вышел еженедельный снапшот «Оперы», где большое внимание уделено улучшению производительности. Удалось достигнуть ускорения от 2-х до 10 раз на разных тестах.

Напомню, ACID3 — специальный тест, проверяющий качество поддержки браузерами современных стандартов. На момент появления этого теста (конец прошлого года), браузеры проходили его весьма слабо, после появления — двигались к финишу семимильными шагами. Лично мне казалось, что быстрее всего 100%-го прохождения достигнет «Сафари», который с каждым новым билдом улучшал результать на 1-2%.

И вот, невероятная новость — первым браузером, который проходит тест ACID3, является «Опера». В публичном доступе билд, проходящий тест, появится в течении следующей недели.

Ситуация несколько осложняется тем, что ребята, которые делают движок «Сафари» WebKit (он прошёл тест чуть позднее), нашли в ACID3 баг — для прохождения теста пришлось нарушить спецификацию SVG 1.1, тест был исправлен и теперь «Опера» проходит тест на 99%. На мой взгляд, это значения не имеет — тот тест, к которому все стремились, «Опера» прошла первой.

Помимо этого упомянутый билд «Оперы» включает в себя поддержку CSS3 RGBA, HSLA и Web Fonts. RGBA/HSLA — это возможность при указании цвета задавать прозрачность, а Web Fonts — технология, позволяющая использовать на странице произвольный шрифт (впервые появилась у Internet Explorer много лет назад, недавно — у «Сафари», и теперь ещё и в «Опере»).

Удивительная избирательная слепота у людей. На «Хабре» опубликовали статью «Новые возможности HTML и CSS в Safari 3.1», где народ восторженно обсуждает возможности, появившиеся в браузере «Сафари». Этим возможностями сто лет в обед — те же яйца, только боком уже давным-давно реализованы в Internet Explorer, причём в версиях 4.xx—5.5.

Это вообще какое-то чудо — все стандарты от Internet Explorer называются «мировым злом» (например, «фильтры»), а стандарты от других производителей — охренительными фичами (вроде тех же «transforms» или CANVAS от Apple). При этом последние шесть лет целая куча функционала была скомуниҗҗена с IE, а сколько там ещё можно утащить (самый известный пример, конечно же, HttpRequest, который придумали в Microsoft и на котором работает AJAX)!

Я составил небольшую таблицу соответствий технологий IE и их реализаций в других браузерах:

Таблицу можно продолжать. Учтите, что всё, что перечислено в ней слева, появилось ещё шесть лет назад.

Мне интересно, кто первым реализует «data binding» из IE, при помощи этой технологии я написал «Песню о пиве» на HTML.

Вышел браузер «Сафари» версии 3.1, в пресс-релизе написано, что «Сафари» — первый браузер, поддерживающий новые теги video и audio из HTML5:

Safari 3.1 is the first browser to support the new video and audio tags in HTML 5 and the first to support CSS Animations. Safari also supports CSS Web Fonts, giving designers limitless choices of fonts to create stunning new web sites

Что касается тега AUDIO — чистая правда, а с VIDEO — вышла накладка. Специальный билд «Оперы», поддерживающий этот тег, вышел 8-го ноября 2007-го года, тогда как Webkit (на движке которого сделан «Сафари») — 12-го ноября, на четыре дня позже.

Кстати, самое интересное, что появилось в том билде «Оперы», это не тег VIDEO, а 3D Canvas — до этого момента тег CANVAS позволял работать только с примитивами на плоскости (отрезками, прямоугольниками, кругами и так далее), знаменитая игра «Canvascape», сделанная с применением этого тега (требует для работы любой браузер, поддерживающий CANVAS), просчитывае 3D-графику самостоятельно, из-за чего игра на средних компьютерах заметно притормаживает.

Для 3D CANVAS задача вращения куба с текстурой, например — тривиальная. Примеров работы с этим новшеством пока немного, в оригинально статье упомянута Snake («змейка») в 3D, написанная Mathieu ’p01’ HENRI.