Как заставить HTML5 работать в Internet Explorer
Не так давно о поддержке нового, во многом революционного, HTML5 заявили самые правильные современные браузеры. Для большинства функций (например, WebGL, многопоточность и веб-сокеты) еще придется подождать пользователям большинства браузеров, но новые удобные теги мы можем использовать уже сейчас.
Ну а пресловутый собиратель дырок от Microsoft — браузер Internet Explorer (даже последней восьмой версии) и тут сумел пойти поперек планеты всей — новые теги вне спецификации HTML4 он просто не замечает — на них нельзя повесить стили CSS... Сложно сказать, является ли это багом или этакой тупой фичей IE, однако теги, которые этот великий браузер не знает, он просто берет и не замечает. Конечно, можно сказать, что они нарушают стандарт HTML 4, который поддерживается в IE, бла-бла-бла-сам-дурак-и-тд-и-тп, но ведь тем не менее, проблема остается проблемой...
В Internet Explorer 9 это записано в todo к исправлению, однако когда это будет — у него пока не вышла даже бета...
Таким образом, писать код под эгоистичный IE, как это уже вошло в привычку, приходиться с помощью различных хаков . Если создать элемент в Javascript document.createElement('article')
, то IE начинает видеть новый тег.
Но вот немного позже приходится встретиться с другой проблемой. Этот хак не работает с содержимым, которое добавляется через innerHTML, которые любит использовать jQuery. И эта проблема обходиться с помощью JS-манипуляций...
Но обо всем по порядку... Интересный материал на эту тему был найден на Хабре, здесь выкладываю слегка по-своему, памятки ради...
Преимущества HTML5
Прежде всего возникает вопрос, чего ради вообще нужно использовать новые теги, если могут возникать проблемы при отображении сайтов?
- Краткий DOCTYPE — наконец-то шаблон HTML-документа не нужно будет копировать, а можно просто вбить по памяти, например,
<!DOCTYPE html>
- Краткие теги — так, вместо
<div>
можно просто писать<header>
. - Больше семантики — поисковики и браузеры буду знать, где меню (
<nav>
), а где само содержимое страницы (<article>
) и когда она обновилась (<time pubdate datetime="...">
).
Новые теги HTML5
Какие теги с новым смыслом можно использовать не ожидая поддержки от браузера:
<header>
— блок с навигацией или введением. Например, верхняя часть сайта.<nav>
— навигация. Например, меню сайта.<aside>
— вторичная информация, которая часто размещается в боковых панелях.<article>
— независимая часть содержимого. Например, текст статьи или отдельный комментарий.<section>
— раздел документа.<footer>
— «подвал», там где часто пишут авторские права и т. п.<figure>
— подпись к картинке или видео.<hgroup>
— блок заголовков, когда например, заголовок состоит из главного заголовка и подзаголовка.<mark>
— выделение какого-то слова, например, совпадающего с поисковым запросом.<output>
— вывод программы или результаты вычислений.<time datetime="…" pubdate>
— время. Вdatetime
указывается в формате, удобном для машины. Если стоит свойство pubdate (враги SGML могут писатьpubdate="pubdate"
), то указанное время — время создания документа или ближайшего<article>
.
Да и еще есть масса усовершенствований в HTML 5, которые можно использовать уже сегодня, но это немного из другой оперы...
Решение
Вначале разберёмся с нормальными браузерами (не IE). Само собой у новых тегов не будет каких-то специальных встроенных стилей (как например для <strong>
). Они нам особо и не нужны, но не помешает сделать нужные элементы блочными в CSS:
aside, nav, footer, header, section { display: block } |
Код включения HTML 5 тегов в IE уже написан и выложен, так что, чтобы не изобретая велосипед, вставляем в
(перед любыми новыми тегами):<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
Большинство HTML5-сайтов использует скрипт по этому 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><Plain 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') |
Извените но с JS серавно теги в ие на раьботают(