Краткий курс HTML 5

18. Обратная совместимость

Благодаря реализованному в HTML 5 механизму представлений, проблему совместимости этого стандарта с его предыдущими версиями можно считать в целом решенной. Однако на момент создания курса он еще не достиг статуса официально рекомендованного языка и поддерживается в полной мере только немногими браузерами. Поэтому актуальным вопросом является отображение документов, сверстанных по стандарту HTML 5, в тех браузерах, которые не обеспечивают его стопроцентную поддержку, особенно в Internet Explorer до 9-й версии.

  1. Сообщаем IE о новых тегах

    Реми Шарпом (Remy Sharp) был разработан небольшой скрипт, решающий проблему отображения новых элементов в Internet Explorer. Его можно скачать по этой ссылке или подключить к документу прямо с сервера Google. Для этого разместите следующий код внутри элемента <head> (это необходимо, чтобы IE уже «знал» о новых элементах до того, как встретит их на странице):

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

    Конструкция <!--[if lt IE 9]> работает только в Internet Explorer до 9-й версии, остальные браузеры примут ее за обычный комментарий и не станут подключать скрипт. В данном случае это и требуется, поскольку другие браузеры способны отображать даже содержимое тегов, которые они не «понимают».

  2. Делаем новые элементы блочными

    Следующим шагом будет подключение к документу инструкций CSS, которые сделают неизвестные браузеру блочные элементы действительно блочными. Добавьте следующую строку в подключенный CSS файл или непосредственно в элемент <style>, располагаемый в заголовке документе:

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

  3. Отказываемся от устаревших тегов

    Тем из вас, кто уже знаком с HTML 4, теперь придется забыть о следующих тегах: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt> и <xmp>. Все они считаются устаревшими и не поддерживаются в HTML 5. Их применение не должно привести к неправильному отображению документа, однако строго не рекомендуется.

    Во многих тегах изменился список поддерживаемых атрибутов. Подробнее о каждом из них написано в соответствующих главах этого курса.

  4. Применение новых API и методов DOM

    В стандарте HTML 5 появился целый ряд API, использование которых может привести к ошибкам в браузерах, которые их не поддерживают. Сюда входят 2D drawing API для рисования в объекте <canvas>, API проигрывателей <audio> и <video>, Editing API и Drag&drop API для элементов с атрибутами contenteditable и draggable, а также некоторые другие.

    В интерфейсе HTMLDocument появились новые методы: getElementsByClassName(), activeElement(), hasFocus(), getSelection() и другие. Не обошли стороной и HTMLElement, однако подробное рассмотрение API и DOM не входит в задачи этого курса. Стоит лишь отметить, что использовать эти нововведения нужно аккуратно, по возможности создавая функции заменяемыми и не критичными для работоспособности веб-приложений.

2 комментария

Спасибо за информацию! Очень содержательно и доходчиво.
Алексей

Алексей @ 31 января 2013

Большое спасибо за прекрасный курс по HTML5!
Емко, лаконично, очень полезно!

Kuiper @ 9 августа 2018

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