8 April 2010

HTML 5 в Internet Explorer

Website development
image

Вкратце: как заставить новые теги из HTML 5 работать в Internet Explorer.

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

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

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

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


Зачем же использовать новые теги:
  • Короткий DOCTYPE — наконец-то шаблон HTML-документа не нужно будет копировать, а можно просто вбить по памяти: <!DOCTYPE html>
  • Короче запись — вместо <div class="header"> можно просто писать <header>.
  • Больше семантики — поисковики и браузеры буду знать, где меню (<nav>), а где само содержимое страницы (<article>) и когда она обновилась (<time pubdate datetime="…">).

Новые теги HTML 5


Какие теги с новым смыслом можно использовать не ожидая поддержки от браузера:
  • <header> — блок с навигацией или введением. Например, верхняя часть сайта.
  • <nav> — навигация. Например, меню сайта.
  • <aside> — вторичная информация, которая часто размещается в боковых панелях.
  • <article> — независимая часть содержимого. Например, текст статьи или отдельный комментарий.
  • <section> — раздел документа.
  • <footer> — «подвал», там где часто пишут авторские права и т. п.
  • <figure> — подпись к картинке или видео.
  • <hgroup> — блок заголовков, когда например, заголовок состоит из главного заголовка и подзаголовка.
  • <mark> — выделение какого-то слова, например, совпадающего с поисковым запросом.
  • <output> — вывод программы или результаты вычислений.
  • <time datetime="…" pubdate> — время. В datetime указывается в формате, удобном для машины. Если стоит свойство pubdate (враги SGML могут писать pubdate="pubdate"), то указанное время — время создания документа или ближайшего <article>.

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

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


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

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

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

Решение


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

Код включения HTML 5 тегов в IE уже написан и выложен, так что, чтобы не изобретая велосипед, вставляем в <head> (перед любыми новыми тегами):
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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

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

Пример для jQuery:
$('#example').append(innerShiv("<section><header>jQuery</header></section>"))

Пример на чистом JS:
var s = document.createElement('section');
s.appendChild(innerShiv("<header>&ltPlain JS</header>"));
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')

Да здравствует новый Веб! :)
Tags:html5html 5internet explorershivinnerhtmljquery
Hubs: Website development
+69
54.7k 168
Comments 66
Top of the last 24 hours