Как заставить 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') |
Загрузка ...