Проблемы деградации для семантических тегов HTML5 (статья, нижний колонтитул, заголовок) - PullRequest
Новая
       4

Проблемы деградации для семантических тегов HTML5 (статья, нижний колонтитул, заголовок)

16 голосов
/ 03 июня 2010

Насколько хорошо ухудшаются новые теги макета в HTML5? Каковы опасности при их использовании? (Я не говорю о <video> - я видел конкретный запасной код для него).

В частности, в случае чего-то вроде 

<html>
<head></head>
<body>
<header>
<h1>Talking Dogs</h1>
<b><p>Humans aren't the only talkers!</p></b>
</header>
<article>
<p>Ever encountered a talking dog? I have.</p>
<p>It all happened one day as I was walking down the street...</p>
</article>
<footer>
© 2009 Woofer Dog Corporation
</footer>
</body>
</html>

Может ли использование <header>, <article> или <footer> вызвать проблемы с браузером? Они автоматически понижаются до <div> в неподдерживаемых браузерах? Или, если я включу их, должен ли я включать их только для семантического значения, а не для стилей CSS или сценариев DOM?

Ответы [ 3 ]

33 голосов
/ 03 июня 2010

Пока вы используете html5shiv для обработки IE, он будет работать нормально.

Браузер будет обрабатывать все неизвестные теги (включая теги HTML5) как обычные встроенные элементы.
Вы должны включить следующее правило CSS: 

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
1 голос
/ 03 июня 2010

Для презентации вы все равно будете использовать CSS, поэтому не имеет значения, понимает ли браузер сам тег.

0 голосов
/ 30 августа 2012

HTML 5 Теги не поддерживаются в IE, теги по-прежнему не активны. Чтобы активировать семантические теги HTML5 в IE, используйте следующий скрипт внутри раздела head. 

<!--[if IE]>
<script type="text/javascript">
(function(){
var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
for(var i = 0; i < html5elmeents.length; i++){
document.createElement(html5elmeents[i]);
}
}
)();
</script>
<![endif]-->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...