0,1
рейтинг
8 апреля 2010 в 16:28

Разработка → HTML 5 в Internet Explorer

image

Вкратце: как заставить новые теги из HTML 5 работать в Internet Explorer.

Любой веб-разработчик смотря на HTML 5 плачет от счастья, которое наконец-то пришло в наш дом. Для большинства функций (такие как WebGL, многопоточность и веб-сокеты) придётся ждать поддержки от браузеров (а в самых правильных эти возможности уже есть), но новые удобные теги мы можем использовать уже сейчас.

Однако Internet Explorer (даже последней, 8-ой версии) и тут сумел споткнуться — новые теги вне HTML 4 он просто не замечает — на них нельзя повесить стили.

В IE проблем даже две — отдельно нужно включать поддержку HTML 5 тегов в обычном документе, и отдельно в содержимом, которое добавляется динамически (например, через AJAX).

Преимущества


Зачем же использовать новые теги:
  • Короткий DOCTYPE — наконец-то шаблон HTML-документа не нужно будет копировать, а можно просто вбить по памяти: <!DOCTYPE html>
  • Короче запись — вместо <div class="header"> можно просто писать <header>.
  • Больше семантики — поисковики и браузеры буду знать, где меню (<nav>), а где само содержимое страницы (<article>) и когда она обновилась (<time pubdate datetime="…">).

Новые теги HTML 5


Какие теги с новым смыслом можно использовать не ожидая поддержки от браузера:
  • <header> — блок с навигацией или введением. Например, верхняя часть сайта.
  • <nav> — навигация. Например, меню сайта.
  • <aside> — вторичная информация, которая часто размещается в боковых панелях.
  • <article> — независимая часть содержимого. Например, текст статьи или отдельный комментарий.
  • <section> — раздел документа.
  • <footer> — «подвал», там где часто пишут авторские права и т. п.
  • <figure> — подпись к картинке или видео.
  • <hgroup> — блок заголовков, когда например, заголовок состоит из главного заголовка и подзаголовка.
  • <mark> — выделение какого-то слова, например, совпадающего с поисковым запросом.
  • <output> — вывод программы или результаты вычислений.
  • <time datetime="…" pubdate> — время. В datetime указывается в формате, удобном для машины. Если стоит свойство pubdate (враги SGML могут писать pubdate="pubdate"), то указанное время — время создания документа или ближайшего <article>.

HTML 5 добавляет ещё много свойств, значений rel и типов <input>, которые можно использовать уже сегодня, но об этом лучше читайте на сайте W3C или в других статьях.

IE как проблема


Сложно сказать, является ли это проблемой или особенностью Internet Explorer, но теги, которые он не знает, он просто не замечает. Конечно, можно сказать, что они нарушают стандарт HTML 4, который поддерживается в IE, но тем не менее, проблемы есть проблемы — даже в самой последней версии IE на новые теги из HTML 5 просто так не повесить стили CSS. В IE 9 это исправят, но у него пока не вышла даже бета-версия.

И как всегда под IE приходиться писать с помощью хаков :). Если создать элемент в JavaScript document.createElement('article'), то IE начинает видеть новый тег.

Однако чуть позже мы встречаемся с другой проблемой. Этот хак не работает с содержимым, которое добавляется через innerHTML, которые любит использовать jQuery. Но и эта проблема обходиться с помощью JS-манипуляций.

Решение


Вначале разберёмся с нормальными браузерами. Само собой у новых тегов не будет каких-то специальных встроенных стилей (как например для <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]-->

Большинство HTML 5 сайтов использует скрипт по этому 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')

Да здравствует новый Веб! :)
Андрей «A.I.» Ситник @Iskin
карма
176,5
рейтинг 0,1
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (66)

  • –8
    Тема уже была. Например, вот — habrahabr.ru/blogs/webdev/67049/
    • +6
      У меня статья посвящена именно проблемам с Ineternet Explorer. Решается баг innerHTML и даются уже готовые скрипты.
  • +3
    вот все этот ИЕ через жопу пытается делать, ужас
    • –1
      Это все из-за того, что есть дофига корпоративных приложении, написанных через жопу, чтобы работать в ИЕ6.

      Теперь мс приходится поддерживать стиль через жопу… Так, что не надо ругаться, не только ИЕ виноват=)

      • +1
        В данном случае корпоративные приложения не причём. Скорее какая-то удивительная способность разработчиков IE делать недосказанные места спецификация самыми неожиданными способами. Кажется это продолжение страстной любви MS к созданию своих форматов, а не стандартизации существующих.
        Хотя данные проблемы с HTML 5 конечно сам по себе хак на IE, так как он и не говорил что поддерживает HTML 5.
      • +3
        <!DOCTYPE throughass>
    • –8
      Кто пытается делать?
      ИЕ в данном случае просто сделали поддержку HTML4
      Это веб-разработчики и другие браузеру бегут вперед и в разные скорости, а майкрософт и тихо мирно ждет утверждения стандартов, и потом все сделает. Взять хотя бы, как браузеры решали какой кодек будет в, одни один формат, другие другой. А МС сделали превью 9ой версии, с теми функциями, о которых успели договорится…
      Лично для себя, я пока не вижу смысла ХТМЛ5… возможно чуть позже пойму… (новое — конечно круто, но надо найти истинную причину переходить на ХТМЛ5, а не просто дань моде)
      • 0
        Так другие браузеры тоже новые теги не держат, просто в IE не очень продуманная на будущее обработка ошибок.
      • 0
        WebGL и WebSocket — волшебные штуки.
        Жаль, что их стандарты еще в разработке и поддержка медленно появляется.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Да от этого даже просто сайты не всегда застрахованы, к сожалению.
      • 0
        Застрахованы. Надо писать код правильно.
        • 0
          Знаете я с вами полностью согласен, но это встречается редко, всё к тому же сожалению (
    • –4
      JS, к сожалению, единственное решение. Или придёться делать так:
      <div id="header">
        <header>
          …
      

      И уже вешать стили на #header.
      • +14
        честно говоря это даже решением сложно назвать, этакий костыль.
  • +1
    Решение не лучшее, ИМХО.
    Т.к. дейтсвительно, выключен JS — и все, трындец.
    Конечно, многие сайты итак развалятся без скрипта (я и сам порой этим грешен), но для желающих этого избежать я вижу другой способ… Он громоздкий, но тем не менее:

    <!--[if IE]><div class="header"><!--[if !IE]><![endif]--><header><!--[if IE]><![endif]--><![endif]-->
    content
    <!--[if IE]></div><!--[if !IE]><![endif]--></header><!--[if IE]><![endif]--><![endif]-->

    в принципе, на стороне сервера такое можно автоматизировать, думаю…

    • +12
      Мсье знает толк в извращениях :)
      • +1
        спасибо за комплимент)))
        вообще, изначально я эту конструкцию закрутил для выдачи svg/vml, но в итоге забил в том случае и вставил флешку (из-за совершенно идиотского ресайза svg-рисунков в webkit, а нужен был тянущийся рисунок)
        но конструкция осталась)
    • +1
      На стороне сервера проще выполнить подмену на div class, так как uiser agent уже известен.
      • 0
        Тогда нужно ставить Vary: User-agent, а это сильно ухудшит качество кэша.
  • +1
    А все ли браузеры понимают доктайп HTML5? Я в GoogleAnalytics помимо IE вижу еще множество старых версий FF, Оперы, Сафари. Может быть, кто-нибудь поделится ссылочкой, где посмотреть, с какой версии в браузерах появилась поддержка HTML5?
    • +1
      фф 3.6 (в 3.5 вроде нету), опера 10.50, сафари 4… вроде так.
      • 0
        И как особая поддержка новых тегов выглядит в этих браузерах ;-)
        • 0
          ну для тех примеров, что вы привели в посте — да, прост тег.
          но помимо них есть и другие. аудио, видео, контент-едитбл, и еще куча всякой хрени, традиционно ранее реализуемая на жс/флеш.
          • 0
            Полностью спецификацию HTML5 никто не поддерживает. В Интернете есть сводные таблицы поддержки новых API.
            • +1
              … которые в большинстве случае взяты от балды, кстати, и совершенно не проверены.
              ну так, к слову, что и тем таблицам особо доверять нельзя.
              увы.
      • 0
        FF 3.5 если ничего не путаю любые теги понимал. хоть хоть , главное стили прописать — всё отображалось вполне кошерно.
    • +1
      Так никакой специальной поддержки и не нужно — даже для современных браузеров это просто тег.
    • НЛО прилетело и опубликовало эту надпись здесь
  • –3
    О боже мой: «но новые удобные теги»…
    Чем же они удобнее, не откроете нам секрет? )
    • +2
      семантикой.
      хотя, если честно, по-моему и этот плюс не особо весомый, потому что, если я ничего не путаю, гуглы-яндексы итак понимают, что если id=«nav», то это навигация и т.п.
    • +2
      Я специальный раздел о преимуществах написал ;-). Лично мне нравится краткость кода.
  • 0
    и да, веб-разработчики плачут от счастья отнюдь не по поводу тех тегов, о которых речь в сабже.
    а те, по которым плачут — будет много сложнее эмулировать в недобраузере средствами js/flash.
    хотя, верю, надеюсь и жду, что кто-то сделает либу, которая это сама будет делать (сам, увы, не потяну такое написать. хотя… надо подумать). Т.е. заменять тег video/audio на флеш, canvas на vml, остальное через яваскрипт эмулировать…
    • +2
      Я про другие функции и писал эту фразу. Новые теги — это приятный бонус.
    • +2
      для графики, кстати, есть raphael — ослу рисует VML, нормальным — SVG
      • 0
        видел. уже не помню чем, но не понравился…
        • НЛО прилетело и опубликовало эту надпись здесь
  • –3
    Тему надо перенести в блог «Юмор на Хабрахабре».
  • 0
    Решение также старым браузерам «отдать» сайт с шаблоном в html4, а остальным в html 5. Можно использовать скрипты типа browserdetect.php.
    Это удобно для визиток. Встречаются же сайты в версиями html и flash ?!
  • –3
    Скорее бы официальную поддержку… как же все же надоело костылями и хаками сайт для ослика снабжать…
    • 0
      официальная поддержка сразу не решит вопрос, а как же ие7,8 (о 6-ом не хочу и сказать).
  • НЛО прилетело и опубликовало эту надпись здесь
    • –1
      Ну да ну да, все так и побежали ставить. Более вероятный сценарий — пользователь просто закроет ваш сайт. Особенно, если ему корпоративными стандартами запрещено юзать что-либо, кроме IE.
      • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      А если вам во время путешествия по Индии нужно срочно отправить фотографии родственникам, а в интернет-кафе только IE? Ситуации бывают разные — так что работать сайт должен во всех браузерах. А вот анимация, красивости, градиенты в IE надо отключать — и этого будет достаточно чтобы люди начали переходить. Когда им скажут, что в нормальных браузерах «В Контакте» гораздо красивее они и поставят нормальные браузеры.
  • –4
    Ну и изврат. Мало того, что требует Яваскрипт, так еще и использует не принятый пока стандарт.
  • 0
    Я бы это делал на сервере. Для ИЕ заменял бы строку на … Версия с джаваскриптом мне очень не нравится ввиду хаканутости.
    • 0
      Это не очень надёжно, так как HTML код будет отличаться и могут быть проблемы. Придётся тогда писать что-то типа $('.header, header') или делать хелперы. Тоже решение, но хакности там тоже достаточно. Лично я считаю, что пользователей IE жалеть не надо — работает и ладно. Хотя без JS для других браузеров должно работать.
      • 0
        Надежность этого решения зависит тока от разработчика. Чего не скажеш про решение при помощи JS, когда вся отввенность ложится на клиента. Я бы такое не хотел перекладывать на клиента. Например представьте себе клиента которому надо сграббить контент. Решением на JS вы его заставляете еще JS выполнять. Curl уже не прокатит.

        Лично я считаю, что пользователей IE жалеть не надо — работает и ладно

        А это уже несусветная глупость, несовместимая с заботой о пользователе.
        • 0
          Клиент которому надо сграбить контент никакой JS не нужен. Фактически JS просто исправляет ошибку IE, а не «включает» JS. Так что используя curl можно без проблем получить html5-документ и распарсить новые теги.
        • 0
          Я предполагаю, что если сайт будет одинаково хорошо работать во всех браузерах, то не будет мотивации для их обновления. Поэтому чем современнее браузер, тем красивее должен работать сайт.
    • 0
      [header] на [div class=«header»]
  • 0
    насколько я помню браузеры должны игнорировать незнакомые теги, а не позволять навешивать на них рюшечки. а к утверждению html 5 версия IE будет уже больше десяти.
    • 0
      Поэтому я и говорил, что это не ошибка. Если я не ошибаюсь, то выхода HTML 5 не будет — W3C объявило его динамическим стандартом, которые не будет фиксироваться ради быстрого внедрения инноваций.
    • 0
      Но лично я считаю, такое игнорирование тегов не очень продуманным для обратной совместимости следующих версий стандарта.
      • 0
        это как раз очень полезно для стандартов, а то каждый начнёт свои теги придумывать. w3c в этот момент какой-то дурьё мается и вместо заботы о стандартах думает о необозримом будущем. вот и натыкаемся мы на камни на дороге, пока задрав голову смотрим на звёзды.
        • 0
          XHTML и семантика были взглядами в необозримое будущее, HTML 5 — как раз наоборот возвращение на землю.
          • 0
            ели это возвращение наступит, но вроде w3c в приземлении не заинтересованы.
            • 0
              Ну они и созданы чтобы думать о долгосрочной перспективе, как архитекторы. А-то как показала война браузеров, корпорациям о долгих планах думать не выгодно.
    • +1
      Главная проблема с HTML5 состоит не в том, что там просто теги новые — с этим нормальные браузеры справляются т.к. с самого начала были умнее IE и новые теги в них являются просто инлайн-элементами. Главная проблема — это тру-HTML5-парсер, который работает по принципам, описанным в спецификации. Сейчас такого нет ни у одного из браузеров. Кто напишет и внедрит — будет молодцом.
      • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    IE прочно утвердился на позиции «самый популярный говнобраузер».
    сколько еще лет пройдет прежде чем верстальщики и (веб-разработчики вообще) перестанут плеваться при упоминании его имени.

    IE! я проклинаю тебя до третьего колена! (версии 8, 7, 6)
    • 0
      Ну не скажи, в IE 8 используется новый движок, который полностью поддерживает CSS 2.1, не то что в 6 и 7. Вот их можно проклянуть ;)
  • +1
    Почему все тупо повторюшничают и пишут DOCTYPE заглавными, а сокращение (html) прописными? Глупо. Вообще-то теги регистронезависимые.
    • 0
      Тебя не заставляют писать так же, можешь писать HTML.

      На yandex.ru, например HTML, на Хабре html

      Видимо этакие негласные соглашения и манеры написания тех или иных вещей, типа как константы заглавными называют
  • +1
    Вот соответствующий плагин для jquery:
    plugins.jquery.com/project/IE-HTML5

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.