Ответ 1

Вы спрашивали, какие теги HTML5 должны держаться подальше.

Ну, некоторые из тегов из HTML5 из ​​моих знаний были сделаны по смысловым соображениям. например, следующим образом.

<article> <section> <aside> <nav> <header> <footer> ..ect

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

Вот пример.

document.createElement('article');

Установил элемент <article> для использования в более старом Internet Explorer.

Для более продвинутых тегов HTML5, требующих работы Javascript, некоторые из них относятся к следующим.

<audio> <video> <source> <track> <embed> And most importantly <canvas> 

Эти элементы сложнее поддерживать /shiv в старых браузерах. Хотя я включил ссылку на кросс-браузерные полиполки внизу, хотя я лично их не исследовал.

Поэтому я бы сказал, что любой элемент, который не требует Javascript-функций, отлично подходит для использования с крошечным битом кода поддержки кросс-браузера.

Если ваш таргетинг IE8, тогда вам будет хорошо, если вы используете shiv.

Что я называю старыми браузерами? < IE9

Поддержка браузера для тегов HTML5 сегодня.

<section>, <article>, <aside>, <header>, <footer>, 
<nav>, <figure>, <figcaption>, <time>, <mark>

Не поддерживаются Internet Explorer менее 8, но могут быть исправлены следующим образом.

CSS

section, article, aside, header, footer, nav, figure, figcaption{
   display: block;
}
time, mark { 
    display: inline-block;
}

JavaScript:

var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
    document.createElement(elements[i]);
}

И <audio> <video> <canvas> не поддерживаются в IE 9

Элемент <embed> имеет частичную поддержку в IE8

Вы также должны изучить этот тег.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

Этот тег meta сообщает обозревателю Internet Explorer, чтобы он отображал страницу с самым высоким режимом IE, вместо того, чтобы перейти в режим совместимости и сделать страницу как IE7 или 8. Подробнее об этом здесь.

Ссылки помощника HTML5

Для Kick Start вы можете проверить HTML5 BoilerPlate

Для таблиц поддержки совместимости браузеров вы можете проверить - http://caniuse.com/

HTML5 Shiv - https://github.com/afarkas/html5shiv

Список полифоров HTML5 - https://github.com/Modernizr/Modernizr/wiki/...

Обновление

Как упоминалось в комментарии

Будьте осторожны с метатегами X-UA-Compatible. Если вы используете что-то вроде html5-шаблона, у которого есть условные комментарии, окружающие элемент (это также происходит с html5 doctype IIRC), у вас могут возникнуть проблемы с тем, что IE9 заставляет себя работать в стандартах IE7 даже с тегом. IE снова ударяет

Возможно, вы захотите посмотреть на это, мне нечего тут делать.

Ответ 2

Как правило, есть проблемы.

Мне сказали, что ваш вопрос сформулирован, чтобы спросить о тегах HTML 5, но он также полезен чтобы посмотреть на новые функции в свете любого Javascript, который вы можете найти или написать.

На практике рекомендуемый метод заключается в проверке наличия функции а не конкретный браузер. Modernizr script может быть полезен в этом отношении, но есть также сообщения о неопределяемых функциях в HTML5.

Некоторые функции, такие как local storage, возвращаются к IE8.

Другие, например FileReader, требуют IE10/Firefox21/Chrome27

Для получения текущей информации попробуйте http://caniuse.com

Ответ 3

Напишите HTML 5, как обычно, и используйте Shims, чтобы обеспечить совместимость со старыми браузерами. Вам просто нужно быть осторожным с API-интерфейсами Javascript, потому что они вряд ли подходят. Если вы пытаетесь придерживаться базового HTML 4 для совместимости, нет смысла использовать HTML 5.

Ответ 4

Для быстрого сравнения того, какие теги доступны в тех браузерах и какой уровень поддержки для каждого тега, html5test.com - отличный ресурс.

Ответ 5

Вы ищете матрицу совместимости HTML5

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

Ответ 6

Кроме того, для лучшей совместимости с перекрестным браузером, я предлагаю вам использовать этот reset.css, созданный Эриком Мейером. http://meyerweb.com/eric/tools/css/reset/ Это делает элементы, которые отличаются от браузера к другому, ведет себя одинаково во всех браузерах.