Совместимость HTML5

HTML5 может и новейшая и самая лучшая технология, но некоторые браузеры не имеют встроенную поддержку новых структурных элементов HTML5. Если вам нужна поддержка старых браузеров такие как Internet Explorer 6/7/8, а она нужна, потому что мир переполнен этими браузерами. Для решения этой проблемы необходимо использовать немного JavaScript

Структура разметки HTML5

На рисунке видно какие теги HTML5 применяются для структуры документа HTML.

Исправление элементов HTML5 для IE
Поддержка тегов html5 в браузерах ie6, ie7, ie8
к меню ↑

Совместимость HTML5 со старыми браузерами

Все, что нужно сделать чтобы браузеры Internet Explorer 6/7/8/9 понимал теги HTML 5 применить метод createElement, и IE станет известно о новых тегах HTML5. Файл со скриптом можно сохранить в отдельный файл и подключить его.

<script>
  document.createElement('header');
  document.createElement('nav');
  document.createElement('main');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('footer');
</script>

Тип MIME для этого тега указывать не нужно, потому что в HTML5 все JavaScript уже как type="text/javascript", поэтому нет необходимости писать лишнее (конечно если ваш сценарий нечто иное, как JavaScript). Это исправляет проблемы в старых версиях IE с HTML5. Оказывается, что еще есть ошибка в Gecko в Firefox 2 и некоторые версии Camino.

к меню ↑

Исправление стилей

Проблемы с классами у IE8 и ниже, Firefox 2 и Camino 1 (последние два браузера используют движок Gecko рендеринга, поэтому они оба пострадавших).
IE6/7/8 анализируют и отображают эти теги просто отлично, но они не будет понимать любые стили CSS3 к тегам HTML5 .

Например, скажем, вы хотите стиль элемента <time> курсивом:

<!DOCTYPE html>
<html>
<head>
  <title>Элементы HTML5 для IE</title>

<style>
  time { font-style: italic; }
</style>

</head>
<body>
  <time datetime="2009-09-13">Дата</time>
</body>
</html>

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

Исправление элементов HTML5 для IE
Отображение текст в старом IE перед применением исправления

Чтобы исправить, добавьте указанные строки кода:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Элементы HTML5</title>

<style>
  time { font-style: italic; }
</style>

  <! - Добавьте эту строку ->
<script>document.createElement('time');</script>
</head>
<body>
<time datetime="2009-09-13">my birthday</time>
</body>
</html>

Теперь снимок после того, как мы применили исправление для IE:

Исправление элементов HTML5 для IE
Отображение текст в старом IE после применения исправления

Чтобы избежать все проблемы одним махом, для удобства был написан один файл JavaScript, который создаст все элементы HTML5 для старых IE.

Скачать HTML 5 для Internet Explorer

Скрипт Google подключаем в <head> документа HTML5 таким способом:

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

Для регионов где сервисы Google не доступны, например Крым, качаем скрипт от сюда. Скрипт добавляет информацию браузерам о элементах HTML5.

Список элементов
  • abbr
  • article
  • aside
  • audio
  • bdi
  • canvas
  • data
  • datalist
  • details
  • dialog
  • figcaption
  • figure
  • footer
  • header
  • hgroup
  • main
  • mark
  • meter
  • nav
  • output
  • picture
  • progress
  • section
  • summary
  • template
  • time
  • video

Этот скрипт для IE6 — IE9.