Как заставить HTML5 работать в Internet Explorer / Пингвиноff.нет / Блог о линуксе, интернете и прочих околокомпьютерных делах...

]]>

Как заставить 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 уже написан и выложен, так что, чтобы не изобретая велосипед, вставляем в <head> (перед любыми новыми тегами):

<!--[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>&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')

]]>

Можно почитать еще:

Эту страницу находят, например, по запросам:

html5 js
rfr pfcnfdbnm html5 работает в explorer 8
html 5 создать элементы для ie
поддержка html5 в ie jquery
как заставить html5 работать в ie6

← Доколе будут издеваться над iPad? :)...

Как шутили на первое апреля... →

Понравился материал? Подпишись на RSS этого блога!

Комментарии [Один комментарий] на "Как заставить HTML5 работать в Internet Explorer"

йqqe:

Вторник, 9 августа 2011 в 22:33

Извените но с JS серавно теги в ие на раьботают(

Пингвиноff.нет...а есть Компьютер, Линукс, Интернет!