Какие теги HTML5 я могу использовать, не беспокоясь о совместимости браузера?

Я создаю веб-приложение для использования на ПК. Каковы теги HTML5, чтобы держаться подальше от проблем совместимости с браузерами, такими как IE8 и выше?

Примечание: большинство вопросов 1-3 лет по этому вопросу.

6 ответов


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

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

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

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

вот пример.

document.createElement('article');

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

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

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

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

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

если таргетинг >IE8 затем вы должны быть в порядке, если вы используете заточку.

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

поддержка браузера для тегов 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> не поддерживаются в

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


вы также должны посмотреть на этот тег.

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

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


HTML5 вспомогательные ссылки


для начала удара вы можете проверить HTML5 BoilerPlate

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

HTML5 заточка - https://github.com/afarkas/html5shiv

список HTML5 Polyfills - https://github.com/Modernizr/Modernizr/wiki/...

обновление

как указано в комментарии

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

вы можете посмотреть на это, у меня нет ничего, чтобы поддержать это на данный момент.


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

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

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

некоторые функции, такие как local storage вернитесь к IE8.

другие, такие как FileReader, требуется IE10/Firefox21 / Chrome27

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


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


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


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

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


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