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


93

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

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


48
Посетите caniuse.com и html5please.com для получения последней информации о совместимости браузеров.
rink.attendant.6

@deceze есть ссылки, чтобы узнать больше о прокладках?
Swagg

4
HTML5 Boilerplate - хороший ресурс
Майкл Петерсон,

47
ИМХО, вы не можете использовать что-либо в веб-разработке, не беспокоясь о совместимости с браузером ...
Uooo

2
См. «Три уровня использования HTML5» . Материал уровня 1 можно использовать без проблем. Функции уровня 2 постепенно ухудшаются. Для функций уровня 3 требуется полифил, если поддержка старых браузеров вызывает беспокойство.
Матиас Байненс

Ответы:


100

Вы спросили, от каких тегов 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> 

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

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

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

Как я могу назвать старые браузеры? <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


Для быстрого старта вы можете проверить HTML5 BoilerPlate

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

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

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

Обновить

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

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

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


Кроме того, если вы можете указать, что такое старый IE? 6,7,8?
Swagg

4
Как правило,
старый

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

Спасибо за информацию, любые сообщения в блоге или некоторая информация, которую я могу добавить в ответ по этой проблеме, были бы хороши :)
iConnor

12

В общем, есть проблемы.

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

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

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

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

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


1
Я должен отметить, что localStorage и fileReader не являются тегами HTML, OP спросил, какие теги HTML5 имеют проблемы совместимости.
iConnor,

О да. Существует большой список семантических тегов, которые внедряются в HTML5 как способ сделать вашу страницу более читаемой для машины и, возможно, более дружественной к SEO [а может быть, нет]. Есть несколько новых элементов ввода. Я полагаю, что у некоторых из них могут быть проблемы в одном или нескольких браузерах. Я думаю, что у caniuse может быть эта информация ...
Пол

8

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


7
Я бы с удовольствием использовал <!DOCTYPE html>в качестве верхней строчки вместо тех проклятых длинных уродливых вещей, которые нам навязывали в прежние времена.
Пол

Если это единственное, что меняется между документами HTML 4 и HTML 5 ... в чем смысл? :)
deceze

4

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


2

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

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


2
Обратите внимание: «Фактическая точность этой статьи может быть скомпрометирована из-за устаревшей информации. Пожалуйста, обновите эту статью, чтобы отразить недавние события или новую доступную информацию. (Март 2013 г.)»
герсанд

1
Да, возможно, это правда, но в целом гугл, html5 compatabilityя уверен, что есть много ресурсов.
bradgonesurfing

2

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.