HTML 5 в Internet Explorer

Как заставить новые теги из HTML 5 трудиться в Internet Explorer.

🕛 09.04.2010, 11:44

Любой веб-разработчик смотря на HTML 5 плачет от счастья, которое наконец пришло в наш дом. Для большей части функций (подобные как WEBGL, многопоточность и веб-сокеты) будет нужно ожидать помощи от браузеров (а в наиболее правильных эти возможности уже есть), однако новые удобные теги мы можем применять уже сегодня.

Хотя Internet Explorer (даже последней, 8-ой версии) и вот смог запнуться - новые теги вне HTML 4 он просто не замечает - на них нельзя повесить стили.

В IE проблем даже 2 - отдельно требуется включать поддержку HTML 5 тегов в обыкновенном документе, и отдельно в содержимом, которое добавляется динамически (к примеру, ч/з AJAX).

Преимущества

Для чего же применять новые теги:
* Короткий DOCTYPE - наконец-то шаблон HTML-документа не нужно будет копировать, а можно просто вбить по памяти:
* Короче запись - вместо
можно просто писать .
* Больше семантики - поисковики и браузеры буду знать, где меню (), а где само содержимое страницы () и когда она обновилась ().

Новые теги HTML 5

Какие теги с новым смыслом можно использовать не ожидая поддержки от браузера:

* - блок с навигацией или введением. Например, верхняя часть сайта.
* - навигация. Например, меню сайта.
* - вторичная информация, которая часто размещается в боковых панелях.
* - независимая часть содержимого. Например, текст статьи или отдельный комментарий.
* - раздел документа.
* - "подвал", там где часто пишут авторские права и т. п.
* - подпись к картинке или видео.
* - блок заголовков, когда например, заголовок состоит из главного заголовка и подзаголовка.
* - выделение какого-то слова, например, совпадающего с поисковым запросом.
* - вывод программы или результаты вычислений.
* - время. В datetime указывается в формате, удобном для машины. Если стоит свойство pubdate (враги SGML могут писать pubdate="pubdate"), то указанное время - время создания документа или ближайшего .

HTML 5 добавляет ещё много свойств, значений rel и типов , которые можно использовать уже сегодня, но об этом лучше читайте на сайте W3C или в других статьях.

IE как проблема

Сложно сказать, является ли это проблемой или особенностью Internet Explorer, но теги, которые он не знает, он просто не замечает. Конечно, можно сказать, что они нарушают стандарт HTML 4, который поддерживается в IE, но тем не менее, проблемы есть проблемы - даже в самой последней версии IE на новые теги из HTML 5 просто так не повесить стили CSS. В IE 9 это исправят, но у него пока не вышла даже бета-версия.

И как всегда под IE приходиться писать с помощью хаков :). Если создать элемент в Javascript document.createElement('article'), то IE начинает видеть новый тег.

Однако чуть позже мы встречаемся с другой проблемой. Этот хак не работает с содержимым, которое добавляется через innerHTML, которые любит использовать jQuery. Но и эта проблема обходиться с помощью JS-манипуляций.

Решение

Вначале разберёмся с нормальными браузерами. Само собой у новых тегов не будет каких-то специальных встроенных стилей (как например для ). Они нам особо и не нужны, но не помешает сделать нужные элементы блочными в CSS:
aside, nav, footer, header, section { display: block }

Код включения HTML 5 тегов в IE уже написан и выложен, так что, чтобы не изобретая велосипед, вставляем в (перед любыми новыми тегами):

Большинство HTML 5 сайтов использует скрипт по этому URL, так что велика вероятность, что он уже окажется в кеше браузера.

Решение innerHTML уже оформлено в виде компактного JS-скрипта. Скачайте его, подключите к своему сайту, и весь добавляемый HTML оборачивайте с функцию innerShiv(html5).

Пример для jQuery:

$('#example').append(innerShiv("jQuery"))

Пример на чистом JS:

var s = document.createElement('section');
s.appendChild(innerShiv("&ltPlain JS"));
document.getElementById('example').appendChild(s);

Для записи $(html5).appendTo('#example'), нужно в innerShiv вторым аргументов передавать false, чтобы она возвращала результат в нужном для jQuery формате:

$(innerShiv(html5, false)).appendTo('#example')

Но я просто сделал себе функцию $5, заодно убрав лишний код для нормальных браузеров:

if (jQuery.browser.msie) {
window.$5 = function(html5) {
return jQuery(innerShiv(html5, false))
}
} else {
window.$5 = function(html5) {
return jQuery(html5)
}
}

И пишу:

$5(html5).appendTo('#example')

Все работает отлично!