Как заставить новые теги из HTML 5 трудиться в Internet Explorer.

HTML 5 в Internet Explorer

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

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

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

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

Для чего же применять новые теги:
* Короткий DOCTYPE - наконец-то шаблон HTML-документа не нужно будет копировать, а можно просто вбить по памяти:
* Короче запись - вместо
можно просто писать .
* Больше семантики - поисковики и браузеры буду знать, где меню (), а где само содержимое страницы () и когда она обновилась ().

Новые теги HTML 5


Какие теги с новым смыслом можно использовать не ожидая поддержки от браузера:

* - блок с навигацией или введением. Например, верхняя часть сайта.
* - навигация. Например, меню сайта.
* - вторичная информация, которая часто размещается в боковых панелях.
* - независимая часть содержимого. Например, текст статьи или отдельный комментарий.
* - раздел документа.
* - "подвал", там где часто пишут авторские права и т. п.
* - подпись к картинке или видео.
* - блок заголовков, когда например, заголовок состоит из главного заголовка и подзаголовка.
* - выделение какого-то слова, например, совпадающего с поисковым запросом.
* - вывод программы или результаты вычислений.
* - время. В datetime указывается в формате, удобном для машины. Если стоит свойство pubdate (враги SGML могут писать pubdate="pubdate"), то указанное время - время создания документа или ближайшего .

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

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

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

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

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

Решение

Вначале разберёмся с нормальными браузерами. Само собой у новых тегов не будет каких-то специальных встроенных стилей (как например для ). Они нам особо и не нужны, но не помешает сделать нужные элементы блочными в CSS:
aside, nav, footer, header, section { display: block }

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

Большинство HTML 5 сайтов использует скрипт по этому URL, так что велика вероятность, что он уже окажется в кеше браузера.

Решение innerHTML уже оформлено в виде компактного JS-скрипта. Скачайте его, подключите к своему сайту, и весь добавляемый HTML оборачивайте с функцию innerShiv(html5).

Пример для jQuery:
$('#example').append(innerShiv("jQuery"))

Пример на чистом JS:
var s = document.createElement('section');
s.appendChild(innerShiv("&ltPlain JS"));
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')

Все работает отлично!

HTML   Теги: Html, Ie

Читайте также:

HTML Фрэймы

История HTML

Введение в HTML



Редакция портала:

Благодарим за просмотр этой информации на нашем компьютерном портале. Надеемся, что обзор HTML 5 в Internet Explorer, в разделе HTML вам понравился. Есть небольшая рекомендация, если вы хотите быть в курсе всех событий сферы информационных технологий, то рекомендуем зарегистрироваться на портале www.stfw.ru.


Живая лента

•  The Station: наблюдение за наблюдателями - 24.02.2018: STFW.Ru: Действие большинства интерактивных историй происходит в удаленном


•  Дизельная дуель: Mazda CX-5 против SEAT Ateca - 24.02.2018: STFW.Ru: В прошлом кроссоверы Mazda CX-5 и SEAT Ateca уже были героями публикаций, но теперь


•  Разработчик с помощью платформы Apple ARKit воссоздал культовую сцену из фильма ужасов «Звонок» в дополненной реальности - 24.02.2018: STFW.Ru: Разработчик Абхишек Сингх (@shekitup) опубликовал на своей страничке в Twitter


•  Новые SoC Qualcomm Snapdragon с модемами 5G будут производиться по 7-нанометровому техпроцессу на мощностях Samsung, а не TSMC - 24.02.2018: STFW.Ru: Компании Samsung и Qualcomm опубликовали официальное заявление, а вернее – два


•  В сеть попали официальные рендеры и характеристики планшета Huawei MediaPad M5, который представят на MWC 2018 - 24.02.2018: STFW.Ru: До начала выставки MWC 2018 остаются считанные дни, так что производителям


•  В Final Fantasy XV для ПК будет костюм Гордона Фримена из Half-Life и демо-версия с первой главой - 24.02.2018: STFW.Ru: В скором времени поклонникам игры Final Fantasy XV станет доступна версия Final