ie

Помимо GIF, JPEG, PNG и SVG в браузерах есть ещё один «общий» формат графики — XBM. Не сказать чтобы сильно полезный, скорее забавный. Формат текстовый и очень простой, как раз его использует Wolf5k для отображения графики.

Несколько лет назад его поддержку прекратил браузер IE, с версии IE6.0SP1 XBM больше не поддерживается. Причина проста — IE падал, если подсунуть ему неправильно сформированную картинку. Поэтому поддержку формата просто отключили (сделали ключ в реестре («BlockXBM»), если очень хочется, поддержку можно вернуть). В общем-то, правильно, формат совершенно гиковский и его использование большая редкость (хотя и встречается).

И вот сегодня я, поставив Firefox 4.0b2pre, увидел, что в нём нет поддержки XBM. Стал разбираться. Оказывается его поддержку выключили в версии 3.6:

It doesn’t seem like anyone uses XBMs on the web these days (microsoft dropped support for them in ie6), and we no longer use them anyone in the platform. Each additional image decoder makes it more time consuming to maintain imagelib, because changes have to be replicated. Thus, unless somebody has a reasoned opinion to the contrary, I’ll remove XBM support in a week or two.

Увы. Из исходников выкинули совсем, никакого ключа в реестре.

Из блога IEBlog:

var len = [1,2,3,].length; 
alert(len); //should be 3, IE8 says 4

В IE9 поправили застарелый баг — Internet Explorer добавляет ещё один элемент в массив, если в конце перечисления элементов массива есть запятая. На этом основан самый короткий способ проверки на IE через JavaScript. По стандарту последняя запятая игнорируется. IE9 теперь следует стандарту.

Не будет работать и проверка через «\v» (цитата из того же блога):

alert("\v"==="v");//IE8 said true, should be false 
alert("\v"==="\u000b"); 
    //IE8 said false, should be true

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

if (/*@cc_on!@*/0) {
    // IE
}

P.S. А вот найденную мной… особенность метода split в IE9 так и не поправили.

Ну что, AMD действительно тогда проговорилась, никакой ошибки нет — в IE9 будет CANVAS. Только что появился Internet Explorer 9 Platform Preview 3 и там есть CANVAS.

Должен сказать, скорость очень хорошая. Реализовано пока не всё (это всё-таки даже не альфа), но для работы многих демок и игрушек хватает. Правда на синтетических тестах результаты противоречивые. Я сравнивал с последней сборкой «Оперы» 10.60, где-то IE9 впереди, где-то «Опера» сильно обгоняет.

Кажется, с применением полупрозрачности (и тени) производительность IE9PP3 пока резко падает.

Из других новостей: AUDIO, VIDEO, CANVAS с аппаратным ускорением, увеличена производительность и улучшена его поддержка JavaScript, поддержка WOFF (формат шрифтов), ACID3 — 83%, HTML5 test — 84/300 (предыдущий результат — 32).

Unicode со «школотой» по-прежнему рисует квадратиками.

Что я хочу сказать по поводу статьи «Хитрая тень» в блоге Олега Мохова?

<html>
<head>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
.vml {
    behavior: url(#default#VML);
    -ms-behavior: url(#default#VML);
    font: 12px Tahoma, sans-serif;
}
#bar1 {
    width: 400px;
    height: 60px;
    color: white;
    padding: 12px;
    display: block;
}

#bar2 {
    width: 20px;
    height: 22px;
    padding: 12px;
    color: white;
    position:absolute;
}
</style>
</head>

<body>

  <v:roundrect class="vml" id="bar1" fillcolor="navy" strokecolor="navy" strokeweight="1px" arcsize="0.1">
  Привет, ребята из W3C! Отсталый Internet Explorer уже много-много лет умеет смешивать векторный язык и
  HTML, а в 2010 году не все продвинутые браузеры так умеют.
  <v:shadow class="vml" on="true" opacity="0.3" color="navy" offset="7px,5px" />
  </v:roundrect>

   <v:shape class="vml" id="bar2"
   fillcolor="red" strokecolor="red"
   coordorigin="0 0" coordsize="200 200"
   path="m 1,1 l 800,1, 800,400, 1800,400, 1800,1500, 1,1500, x e">
   <v:shadow class="vml" on="true" opacity="0.3" color="red" offset="7px,5px"  />
    <p>Привет<br />ещё раз!</p>
    <p>Вы знаете, уже Internet Explorer 5.0 умеет делать непрямоугольные блоки.</p>
    <p>Причём, делает это непринуждённо.</p>
   </v:shape>
</body>

</html>

Что IE умеет круче ещё с пятой версии.

Добавлено позднее: в комментариях мне подсказывают, что в IE8/9 надо либо включать режим эмуляции, либо использовать «-ms-behavior» и позиционировать элементы абсолютно.

Во-первых, при помощи условных комментарие в IE можно определять не только версию IE. Например, можно узнать есть ли поддержка VML. Подозреваю, что эту поддержку из Internet Explorer когда-то удалят, так как сейчас удаляют expression. Так что проверять поддержку VML, правильнее так:

<!--[if VML]> Код VML <![endif]-->

Во-вторых, начиная с Windows 7, в браузере условными комментариями можно проверить версию операционной системы, так же как это делается с версией браузера, константы для проверки перечислены в таблице на сайте «Микрософт».

Можно, например, проверить запущен ли браузер на Windows 7. «Семёрка» и Vista вообще сильно отличаются по возможностям по XP, так что это иногда может быть полезно. Например, в Vista/7 поддерживается TLS SNI или аппаратное 2D-ускорение в Internet Explorer 9.

<!--[if WindowsEdition]> Это Windows 7 или старше <![endif] -->

В-третьих, если вы автор какого-то плагина, можно добавить возможность проверки версии плагина и его наличия в условные комментарии. Для этого нужно поместить его версию и название в ветку реестра HKEY_LOCAL_MACHINE → Software → Microsoft → Internet Explorer → Version Vector → MyPlugin = 0.5.

<!--[if gte MyPlugn 1.2]> Мой плагин версии 1.2 и выше <![endif] -->

Этот же способ позволяет изменить версию IE для проверки в conditional comments на любую — достаточно исправить значение «IE» в указанной ветки реестра и перезапустить браузер.

В-четвёртых, удивительно, но не все знают, что в conditional comments доступны операторы «И», «ИЛИ» и группировка. Что полезно, чаще всего, для указания диапазона версий браузера.

<!--[if (IE 7) | (WindowsEdition)]> Это IE7 или любой IE на Windows 7 и выше <![endif] -->
<!--[if (gte IE 6) & (lt IE 9)]> Это IE6-8 <![endif] -->

В свежей статье в блоге IE есть ответ на вопрос как обнаружить версию браузера Internet Explorer в любом режиме (например, в режиме эмуляции другой версии):

@_jscript_version statement is actually an indicator of which version of JScript is in use by the browser as a whole. In ALL document modes of IE9, this statement currently equates to “9”. In ALL document modes of IE8 it equates to “5.8” and in IE7 it is “5.7”

Отсюда вывод:

/*@cc_on
    @if( @_jscript_version == 5.8 )
        // Это полюбому IE 8
        ...
    @end
@*/

То есть (перевожу) «@_jscript_version» в IE8 всегда равно «5.8», в IE7 — «5.7» , а в IE9 — «9».

Я недавно делал плеер для Internet Explorer по функциональности похожий на VideoJS. Как я уже упоминал, там ни одной картинки — всё VML. Регулятор громкости и кнопочки — UTF-арт.

Попробую описать как сделан регулятор громкости, но писать буду под стандартные браузеры, так что код будет несколько отличаться.

В UTF-8 есть такой символ «❚», им у меня сделана кнопка «Пауза» и им же нарисован регулятор громкости. Нарисовать нужно что-то подобное вот этому:

На рисунке мы видим прямоугольник со скруглёнными углами, это сумеет сделать даже моя бабуля (в IE для этой цели я использовал VML):

#video_volume {
    width: 34px;
    height: 20px;
    font: 14px Arial;
    color: white;
    background: gray;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -khtml-border-radius: 0.5em;
    border-radius: 0.5em;
}

У нас получается пустой скруглённый прямоугольник. Теперь надо нарисовать уменьшающиеся прямоугольники. Как? Первая идея, которой я и воспользовался — вложить теги внутрь друг друга и сделать что-то, чтобы каждый потомок был ниже своего родителя:

<span>❚<span>❚<span>❚<span>❚<span>❚</span></span></span></span></span>

В стиле прописываем абсолютную позицию и margin-top, чтобы сделать отступ от родительского элемента:

#video_volume span {
    position: absolute;
    margin-top: 1px;
}

Получилась этакая рекурсия стилей. Уже близко к тому, что хочется получить.

Теперь надо снизу обрезать лишнее. В IE я просто ограничил размеры и выставил overflow-y в hidden, тут я поступлю иначе — воспользуюсь crop.

#video_volume div {
    clip: rect(auto, auto, 14px, auto);
    position: absolute; /* crop работает только у абсолютно позиционированных элементов */
    /* кстати, ребята из W3C, почему вы забыли про crop? почему только прямоугольник, зачем position? */
}

Почти то что нужно, но повёрнуто в другую сторону:

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

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

Получился такой код:

<head>
<style type="text/css">
#video_volume, #video_volume div {
    width: 34px;
    height: 20px;
    font: 14px Arial;
    color: white;
    background: gray;
    padding-right: 5px;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -khtml-border-radius: 0.5em;
    border-radius: 0.5em;
}

#video_volume div {
    clip: rect(auto, auto, 14px, auto);
    position: absolute;
    direction: rtl;
}

#video_volume span {
    position: absolute;
    margin-top: 1px;
}

</style>
</head>
<body>
<div id="video_volume">
<div>
<span>❚<span>❚<span>❚<span>❚<span>❚</span></span></span></span></span>
</div>
</div>
</body>

Кстати, «Опере» rtl правильно не работает (по крайней мере в моей 10.60 alpha), нужно расставлять margin, но я этого делать не буду. В конце-концов, это пример, демонстрирующий идею.

На «Хабре» сравнили вышедший вчера Safari 5 и Internet Explorer 9 Preview 2. Оба браузера обладают аппаратным ускорением (на скриншоте — результаты теста «Flying Images»).

Видно крайне низкий показатель FPS у «Сафари». Странно, но под «Мак» таких проблем нет, похоже под Windows аппаратное ускорение неполное, если оно вообще там есть.

У меня на машине «Сафари» 5 показывает в том же тесте 1…2 fps, тогда как «Опера» 10.60a — около 35. Заметьте, у «Оперы» аппаратное ускорение не заявлено.

Ничего неожиданного — ребята из freeciv сделали набор из 444 тестов, которые проверяют поддержку браузером различных мест стандартов HTML5/CSS3 (Canvas, WebSockets, HTML5 Video/Audio, Getlocation API, Storage, Workers и какая-то часть CSS3).

Internet Explorer 9 Preview 2 не прошёл ни один из этих тестов. Это ожидаемо; о том, что Microsoft выбрала какие-то определённые тесты из HTML5 в своих промо-текстах, на которых и обогнала другие браузеры, уже говорилось не раз.

Добавлено 5 июня 2010: в комментариях говорят, что эти тесты — фейк. Например, «Опера» пока не поддерживает GeoAPI.

Интересно, когда консорциум W3 отвернулся от тега OBJECT? Помнится, даже IFRAME старательно пытались заменить на OBJECT, а сейчас зачем-то выделили аж два новых тега VIDEO и AUDIO для проигрывания одноимённого контента.

Вообще-то, конечно, с VIDEO и AUDIO всё несколько стандартнее, чем с тегом OBJECT. В IE можно подключить любой ActiveX для проигрывания видео (например, Windows Media Player или Apple QuickTime) и у них будут разное API и свои особенности.

Тем не менее, API ActiveX Windows Media Player хорошо документирован и работать с ним очень просто. Я в последнее время мало программирую на JavaScript и вчера вечером, чтобы освежить знания, попробовал сделал плеер, похожий на VideoJS, но только для IE — с тегом OBJECT и применением VML.

По-моему, получилось неплохо (проверял под IE8, подчёркиваю, это сделано только для IE).

Сегодня утром решил не останавливатся на достигнутом и за завтраком начал делать другую JS-задачу (уже по работе). Так запрограммировался, что опоздал на работу. Всё-таки JavaScript очень приятный язык.

P.S. Некоторые вещи там сделаны неоптимально, так что я бы очень рекомендовал несколько подчистить код, если кто-то захочет его использовать.

P.P.S. Кнопочки и progress bar нарисованы через VML.

Вроде как из блога AMD утекли сведения о том, что IE9 будет поддерживать Canvas:

The <canvas> element will be accelerated on the GPU via Direct2D and will enable hardware accelerated rendering contexts for application development, improving visual display, reducing CPU usage, and improving power usage. … AMD is working with multiple teams at Microsoft to ensure that technologies such as IE and Silverlight continue to move the PC platform forward.

Хотя в AMD чуть позднее поспешили откреститься от этого:

Got a little ahead of myself; Microsoft did not announce they were supporting <canvas>. However, they did say that all of Internet Explorer 9’s graphics, text, and rendering will be hardware accelerated. Given the embraced HTML5 across DOM, CSS3, SVG, and XHTML, it will be fun to watch this space closely as the IE9 Preview gets updated in the weeks to come.

Посмотрим.

Вышел Internet Explorer 9 Platform Preview 2, список изменений есть на сайте Microsoft, ACID3 проходит на 68%.

В Сети есть даже возможность полюбоваться на прогресс в тесте SunSpider.

В копилку ссылок. Пару лет назад я нашёл способ совместить data URI и MHTML в одном документе, с тех пор этот способ широко используется, но в интернете иногда появлялись сообщения, что в Internet Explorer 7 в Windows Vista есть какие-то проблемы с таким совмещением.

На «Хабре» подсказали исправление этой проблемы (на блоге китайского товарища), насколько я понял этот мунспик в переложении на какой-то дикий суржик при помощи переводчика от Гугла, основная идея — просто тщательно следовать RFC2557, на котором построен формат MHTML.

Точнее — не забывать в конце документа выставлять закрывающий boundary (страница семь RFC 2557).

IE9 в режиме IE7 можно будет отследить по User-agent. Нормальный user-agent для IE9 — «Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)», в режиме IE7 это будет выглять так: «Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)».

Это таблица показывает насколько успешно проходят разные браузеры тесты SVG с сайта W3C (таблица с сайта CodedRead). В таблице, на мой взгляд, примечателен уровень поддержки SVG браузером IE 9 preview. Несмотря на уверения Microsoft о 100% уровне поддержки SVG, видно, что до идеала ещё делековато.

Я, правда, не понимаю что происходит и где правда. С одной стороны, таблица как бы говорит нам, с другой, на сайте IE9 написано следующее:

I want to thank the members in the W3C working groups that helped us develop these tests, the community members for providing valuable feedback on the tests, as well as the engineers on the IE team that made these possible

То есть тесты придуманы не самим Майкрософтом и наверняка в W3C их видели и одобрили. Где правда?

Ну что, дождались! Можно скачать Preview Internet Explorer 9 и посмотреть что получилось у Microsoft (потребуется Vista SP2 или Windows 7).

Получился, кстати говоря, очень неплохой браузер: 55% ACID3, проходит все 578 тестов селекторов CSS3, тест SunSpider на уровне FireFox 3.7a2, поддержка SVG 1.1 2nd edition и прочее.

Некоторые вещи поддерживаются лучше, чем в остальных браузерах (например, тот же SVG или селекторы CSS3).

Впечатляет. Не забудьте, что это только preview. Кстати, user-agent у браузера пока прежний — от 8-й версии. Браузер не затирает предыдущую версию IE, а запускается отдельно.

Тема Internet Explorer и PNG как-то удивительно неисчерпаема. Совершенно случайно накнулся на способ, который широко известен в буржуинских интернетах, а в рунете мне как-то на глаза не попался, хотя, судя по поиску, всё-таки известен.

Касается он отображения полупрозрачных PNG в Internet Explorer 6 и ниже. Как известно, без ухищрений, у PNG полупрозрачность в указанных версиях не появится, вместо этого IE покажет серый фон.

Оказывается, есть способ заменить этот цвет на любой другой. Например, на белый. Это можно сделать, например, утилитой TweakPNG:

• открываем PNG в TweakPNG
• в меню «Insert» выбираем «bkGD (Background-color)»
• выделяем свежесозданную строку «bkGD»
• клик правой клавишей → «Edit chunk…», меняем цвет, к примеру, на белый
• сохраняем файл
  Кстати, многие инструменты оптимизации PNG удаляют параметр «bkGD».

Отличный способ сделать graceful degradation.

В середине следующего месяца, в марте, на Mix 2010, Microsoft покажет наконец-то Internet Explorer 9 широкой публике. Никаких официальных сведений о дате выхода релиза этой версии пока нет.

Стив Саудерз из «Гугла» нашёл препеприятнейшую проблему в IE7 и 8. При указании подключении к странице CSS через тег LINK, если не использовать протокол, а указывать только хост, эти два браузера почему-то загружают CSS два раза.

Небольшой поясняющий пример, чтобы было понятно о чём идёт речь:

<link type="text/css" rel="stylesheet" href="//www.test/t/yack.css" />

Я проверил по логам, всё действительно так. Причём, если подключить внешний CSS через @import, то всё нормально — файл загружается один раз.

Aleko придумал новый (более короткий, чем известный до этого) JavaScript-хак, позволяющий определить является ли браузер Internet Explorer’ом:

if(-[1,]) {
    // код для нормальных браузеров 
} else {
    // код для IE 
}

Подробный принцип действия хорошо описан в блоге у Aleko. Основан хак на старом баге JavaScript в IE, который Microsoft пока не исправила (и неизвестно будет ли исправлять), но с IE9, я считаю, надо быть осторожными — там грядут очень уж глобальные изменения, хак может и не работать.