]]> ]]>

Как заставить HTML5 работать в Internet Explorer

Блог > Интернет > Как заставить HTML5 работать в Internet Explorer | 8 апреля 2010 | Теги:
]]>


]]>

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')

Популярность: 2%

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

  1. Chrome-расширение для открытия результатов поиска Google в новой вкладке
]]>
]]>
← Доколе будут...
Как шутили на первое... →
]]>
]]>
Понравилась статья? Подпишись на ]]>RSS]]> этого блога!

Есть что сказать?

]]>
]]>