Различия в HTML4 и HTML5 как использовать новые теги в старых браузерах

Различия в HTML4 и HTML5 - как использовать новые теги в старых браузерах

В моем предыдущем руководстве я затронул проблему новых тегов HTML5, насколько они действительно упрощают создание веб-сайтов и насколько они ненужны. В этом руководстве мы продолжим именно то, что нам нужно сделать, чтобы помочь посетителям сайта, которые используют старые браузеры, такие как IE 8, правильно видеть контент..

Что нужно сказать о HTML5, так это то, что одна из основных идей стандарта, получившая много внимания и имеющая хорошие результаты, — это идея обратной совместимости. Хотя лучшие (на мой взгляд) теги — аудио, видео и холст — не могут поддерживаться старыми браузерами из-за их особой функциональности, другие, о которых я упоминал в прошлый раз и которые мы можем обойтись, на самом деле могут легко адаптироваться (однако с небольшая дополнительная работа), чтобы они правильно работали в IE 7/8, которые сами по себе "не знают", что такое заголовок, например.

Читать также:  Настроить вебпакет

Давайте создадим очень простую страницу HTML5, чтобы включить некоторые из новых тегов. Здесь я подготовил образец кода, который вы можете просмотреть: https://gist.github.com/4081026 (разметка) и https://gist.github.com/4081085 (стили). Вот два изображения, показывающие, как выглядит страница (первое в Chrome, а второе в IE 8):

Различия в HTML4 и HTML5 - как использовать новые теги в старых браузерах
Различия в HTML4 и HTML5 - как использовать новые теги в старых браузерах

Как видите, Internet Explorer 8 не применяет стили, определенные для его незнакомых тегов, в результате сайт почти не имеет ничего общего с тем, что ожидается и будет отображаться в новых браузерах..

Чтобы добавить надлежащую поддержку новых тегов, нам нужно сказать IE8: «Посмотрите — это просто простой тег, который можно использовать в качестве другого контейнера». Это делается с помощью JavaScript, в частности: document.createElement (‘header’); (как, конечно, вместо заголовка может и должен быть любой тег, для которого мы хотим добавить поддержку).

Читать также:  HTML5 & lt; meter & gt; ярлык

Однако одного этого недостаточно. Если ограничиться этим, стили будут неполными и сайт будет выглядеть так:

Различия в HTML4 и HTML5 - как использовать новые теги в старых браузерах

Это связано с тем, что вновь добавленные теги обрабатываются как встроенные элементы. Мы можем легко это исправить, просто установив для них display: block; через CSS.

Вы можете увидеть окончательную версию здесь: https://magadanski.com/demo/html5/. Взглянув на исходный код страницы, вы можете найти все, а вот прямые ссылки на файлы CSS и JS..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?