HTML5 и Internet Explorer 7-8

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

Зачем же использовать новые теги:

  • Короткий 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>.

Проблема IE

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

Решение

Вначале разберёмся с нормальными браузерами. Само собой у новых тегов не будет каких-то специальных встроенных стилей (как например для <strong>). Они нам особо и не нужны, но не помешает сделать нужные элементы блочными в CSS:

aside, nav, footer, header, section { display: block }

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

  1. <!--[if IE]>
  2. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  3. <![endif]-->

Важный момент: рекомендуют вставлять этот код до вызова стилей. Хотя я не уверен, что это на что то повлияет :-)

Решение 2: использовать Modernizr

Скачать скрипт со страницы

Вы выбираете необходимые вам функции и делаете свою сборку Modernizr. Установите галочку Extra: html5shiv vx.x, чтобы включить поддержку html5.

Итак, скрипт скачан и помещён в папку js нашего сайта. Теперь подключаем как обычно

<script src="js/modernizr.js"></script>

Далее добавляем на наш сайт класс no-js

<html class="no-js">

Это делается для того, чтобы при выключенном Java Script мы могли понять, что Modernizr не работает и применить дополнительные правила. Когда же Java Script включен, данный класс будет заменен самим Modernizr на что-нибудь вроде этого:

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

Что это такое?

Например вы открываете страницу в браузере Firefox 3.5. Этот браузер не поддерживает множественные бэкграуннды, поэтому Modernizr добавляет классы «no-multipebgs», «no-cssgradients» и «no-csstransforms». С другой стороны он поддерживает canvas и border-radius, что добавляет «canvas» и «borderradius». И так далее.

Как это использовать?

Например, ваш сайт использует технику множественных бэкграундов и нет возможности переделывать всё это под Internet Explorer. Причем, если оставить все как есть, старые браузеры просто не отобразят никакого бэкграунда, что не есть хорошо! Поэтому мы пишем вот такой код css

  1. #back {
  2.     background: url(background-one.png) top left repeat-x;
  3. }
  4. .multiplebgs #back {
  5.     background: url(background-one.png) top left repeat-x,
  6.     url(background-two.png) bottom left repeat-x;
  7. }

Таким образом IE7 использует первое правило для отображения блока #back, а современные браузеры — второе. Такую же технику можно применить к любым другим свойствам