Как заставить понимать новые HTML5 элементы браузер IE версии 8 и ниже 


Как заставить понимать новые HTML5 элементы браузер IE версии 8 и ниже

Опубликовано

В HTML5 добавлено множество новых элементов разметки: main, header, article, aside, footer, section и т.д.. Основная цель нововведений помочь поисковым системам лучше понять контент вашего веб-сайта.

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

Так как же ведет себя IE8, по отношению к нововведенным элементам? А ведет он себя очень скверно, попросту игнорируя их, и если вы создадите документ с примерно таким содержимым, как показано в листинге 1, (обратите внимание на CSS стиль, который должен оформить элемент <article>), то, как видно из рисунка 1, они к элементу попросту не применятся.

Листинг 1

<!doctype html>
<html >
<head>
<style>
 article {background-color: red;}
</style>
</head>
<body> 
 <article><h1> Hello world </h1></article>
</body>
</html>

Рис 1. Отсутствие CSS оформления для элемента <article>, в результате его игнорирования IE8.

Заставляем IE понимать новые элементы

Все же это недоразумение очень легко исправить, добавив в документ JavaScript код, который создает нужный элемент. Для случая с тегом <article> код JS будет выглядеть следующим образом:

document.createElement("article");

Код целиком

<!doctype html>
<html >
<head>
<style>
 article {background-color: red;}
</style>
<script>
 document.createElement("article");
</script>
</head>
<body> 
 <article><h1> Hello world </h1></article>
</body>
</html>

 

Рис. 2. Нехитрые действия позволяют применить стили к элементу <article>

Таким вот небольшим обманом мы заставили IE понимать новые элементы HTML5. Нужно заметить, что данные манипуляции возможны, если в обозревателе пользователя включен JavaScript.

В заключении стоит отметить что если вы не используете в своей разметке тег <body>, то все созданные элементы помещаются внутрь тега <head>. Поэтому желательно внести правку в структуру добавив тег <body>