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

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

Оригинал статьи http://pingvinoff.net/2010/04/08/kak-zastavit-html5-rabotat-v-internet-explorer/

0 комментариев

Оставить комментарий