95 заметок с тегом

ie

Позднее Ctrl + ↑

Internet Explorer 9 RC

Вышел Internet Explorer 9 Release Candidate. Из значимых для веб-технологов изменений — добавили Geolocation API и кодек WebM в теге VIDEO.

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

Синтаксис @font-face, совместимый с IE

Без лишних вступлений:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot#') format('eot'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

У IE (до 9-й версии) был баг в обработке атрибута src, все дальнейшие атрибуты IE воспринимал как часть URL, пытался на него идти и получал 404.

Посмотрите на третью строку, видите там „#“? IE по-прежнему считает остальную часть частью URL, но URL теперь выглядит как-то так:

myfont-webfont.eot#’) format(’eot’)…и так далее…format(’svg’

Вот такой простой и красивый трюк.

Добавлено позднее: не все поняли. После решётки в адресе страницы идёт идентификатор внутри страницы. Эта часть на сервер на отсылается.

Internet Explorer показывает не все GIF

IE, не покажи этот GIF! (1.21КБ)Нашёл в ЖЖ DiBR’а GIF, который не показывает Internet Explorer. Забавно, хотя в отличие от JPEG, который не показывает современная «Опера», этот GIF несколько некорректен.

Вот текст комментария из ЖЖ, который разъясняет принцип:

Согласно описанию формата, сразу за заголовком («GIF89a») идет Logical Screen Descriptor (в котором как раз и прописан размер 80x80), затем Global Color Table, а уж за ним — всякие Extensions и данные изображений. В обсуждаемом файле Global Color Table просто отсутствует (так что IE ведет себя вполне адекватно). Зато присутствует картинка размером 100×100, которую и видят менее привередливые рендереры.

localStorage для Internet Explorer 6 и 7

Написал небольшой класс в JavaScript для поддержки API localStorage в IE 6 и 7. localStorage — это браузерное хранилище key-value. Эмулируются setItem, getItem, removeItem, key, clear и length (для хранения использует behavior userData).

Доступ к значениям как к свойствам класса не реализован. Прежде всего потому, что в JS в этих версиях IE нет сеттеров и геттеров, а для того, чтобы воспользоваться onpropertychange мой объект надо поместить в DOM, что порождает массу гемороя, типа присутствия свойств из DOM, а не из хранилища.

Так же я не сделал события onstorage и onstoragecommit, потому что не придумал для чего это нужно (а второе корректно реализовать вообще нельзя).

Ещё не реализовал нестандартное, но полезное расширение remainingSpace, потому что в общем случае нельзя сказать сколько места ещё осталось в userData, так как квота зависит от зоны сайта (доверенная, интранет и так далее).

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

Зато я реализовал exception, который бросается в том случае, если IE говорит, что квота исчерпана.

В общем, основные вещи есть. Пример использования:

// .-~*´¨¯¨`*·~-.¸ тут подключаем библиотеку ,.-~*´¨¯¨`*·~-.¸
// записываем два значения
try {
    localStorage.setItem('key1', 'myvalue1');
    localStorage.setItem('key2', 'myvalue2');
} catch (e) {
    if (e.description == 'QUOTA_EXCEEDED_ERR') {
        alert('Нет места');
    } else {
        alert('Что-то не так, не знаю что.');
    }
}

// смотрим значение по ключу «key1»
alert(localStorage.getItem('key1'));
// смотрим первое значение (по номеру), нумерация с нуля
alert(localStorage.key(0));

// удаляем значение по ключу «key1»
alert(localStorage.removeItem('key1'));

// смотрим сколько ключей осталось
alert(localStorage.length);

// очищаем хранилище полностью
alert(localStorage.clear());

Даже создатели Dojo не читают документацию

Почему-то всегда хочется думать, что создатели больших фреймворков уж точно детально изучили вопрос. Между тем, они обычные люди. Как известно, в реализации JavaScript в IE нет сеттеров и геттеров. Зато они есть в VBScript (который кажется куда более проработанным языком в IE):

Class Sample
  Public Property Let someprop(val)
    …
  End Property
  Public Property Set someprop(val)
    …
  End Property
  Public Property Get someprop
    …
  End Property
End Class

Два вида сеттеров связаны с тем, что в VBScript довольно чётко различаются передача по ссылке и по значению (например, можно в параметрах функции указать «ByRef» или «ByVal»), кроме того, у сеттеров и геттеров есть ещё один параметр, благодаря чему можно перехватывать вызов методов и делать совсем уж странные, с точки зрения JavaScript, штуки.

Впрочем, к чёрту подробности.

Один из разработчиков JS-фреймворка Dojo реализовал в нём эмуляцию сеттеров и геттеров для IE, но в его примере есть некрасивая штука — глобальная функция dj_exec_vb_global, которая описана внутри тега SCRIPT с указанным языком VBScript и предназначена для вызова VBScript из JavaScript.

Но в IE уже есть специальный метод объекта window, который занимается тем же — execScript, вторым параметром надо задать «vbscript» и voilà!, мы вызываем VBScript из JavaScript.

Я этот метод когда-то использовал внутри JUnix (это был эмулятор CLI Linux на JavaScript).

Кроссбраузерный data URI в CSS-файлах (подробно)

Кстати, всё забываю порекомендовать статью Banderlog’а, который написал её по мотивам моей статьи «Кроссбраузерный data URI в CSS-файлах», прекрасно разложив всё по полочкам и детально проработав тот же подход в форматах PNG и GIF.

Статья на Хабре называется «К вопросу о кроссбраузерных Data URI».

IE9 и CSS3 2D Transforms

Появился Internet Explorer 9 PP6, из интересного — появилась поддержка 2D-трансформаций из CSS3 (свойства -ms-transform и -ms-transform-origin).

Кроме того, появилась поддержка семантических тегов HTML5 (section, nav, article и так далее). Раньше при разборе дерева элементы, содержащие эти теги наследовались от HTMLUnknownElement, теперь — от HTMLElement.

IE9 и его скорость, по сравнению с другими браузерами

Сижу сейчас на семинаре Михаила Черномордикова из Microsoft «HTML5, CSS3 и новый Internet Explorer 9». На экране — известный тест Flying Images, который Михаил демонстрирует в IE9 бета1 и FF 4 (неизвестной) бете.

У IE9, судя по всему сильное преимущество. Я как-то засомневался, помню на «Хабре» был материал, из которого следовало прямо обратное — как только в FF4 появилось аппаратное ускорение, IE9 остался далеко позади.

Скачал FF 4 beta7pre, включил в конфигурации всё, что относится к аппаратному ускорению, потестировал. В общем, Microsoft… вводит нас в заблуждение (как и статья на «Хабре»). FireFox явно впереди, хоть и незначительно.

IE9 beta

Internet Explorer 9 beta (39.95КиБ)

Вышла первая бета-версия IE9. Идея разместить табы и адресную строку на одной прямой явно неудачная.

Сайты открываются через пень-колоду, явно хуже, чем в последней platform preview, мой сайт выглядит, как какашидзе, даром, что показывался одинаково во всех браузерах, включая самые старинные IE Mobile. Зато ACID3 — 95%, одно слово — синтетика.

Тьфу.

Ранее Ctrl + ↓