Как заставить понимать новые HTML5 элементы браузер IE версии 8 и ниже
В HTML5 добавлено множество новых элементов разметки: main, header, article, aside, footer, section и т.д.. Основная цель нововведений помочь поисковым системам лучше понять контент вашего веб-сайта.
Однако как это всегда бывает, браузеры подкидывают сложности веб-мастеру, а точнее браузеры старые и почти забытые, но хороший веб-мастер должен учесть все, в том числе и посетителей которые до сих пор предпочитают IE версии 8 и ниже.
Так как же ведет себя IE8, по отношению к нововведенным элементам? А ведет он себя очень скверно, попросту игнорируя их, и если вы создадите документ с примерно таким содержимым, как показано в листинге 1, (обратите внимание на CSS стиль, который должен оформить элемент <article>), то, как видно из рисунка 1, они к элементу попросту не применятся.
Листинг 1
Рис 1. Отсутствие CSS оформления для элемента <article>, в результате его игнорирования IE8.
Заставляем IE понимать новые элементы
Все же это недоразумение очень легко исправить, добавив в документ JavaScript код, который создает нужный элемент. Для случая с тегом <article> код JS будет выглядеть следующим образом:
Код целиком
Рис. 2. Нехитрые действия позволяют применить стили к элементу <article>
Таким вот небольшим обманом мы заставили IE понимать новые элементы HTML5. Нужно заметить, что данные манипуляции возможны, если в обозревателе пользователя включен JavaScript.
В заключении стоит отметить что если вы не используете в своей разметке тег <body>, то все созданные элементы помещаются внутрь тега <head>. Поэтому желательно внести правку в структуру добавив тег <body>
Однако как это всегда бывает, браузеры подкидывают сложности веб-мастеру, а точнее браузеры старые и почти забытые, но хороший веб-мастер должен учесть все, в том числе и посетителей которые до сих пор предпочитают 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>
Теги:
Похожие новости:
Комментарии:
Нету комментариев для вывода...