Я создаю веб-приложение для использования на ПК. Каковы теги HTML5, чтобы держаться подальше от них, чтобы предотвратить проблемы совместимости с браузерами, такими как IE8 и выше?Какие теги HTML5 можно использовать, не беспокоясь о совместимости браузера?
Примечание: Большинство вопросов - 1-3 года на эту тему.
Вы спрашивали, какие теги 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 меньше, чем , но может быть исправлено, как это.
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 будет делать. Подробнее об этом Here.
Для Кик Начало вы можете проверить HTML5 BoilerPlate
Для таблиц поддержки совместимости браузера вы можете проверить - http://caniuse.com/
HTML5 Shiv - https://github.com/afarkas/html5shiv
Список HTML5 Polyfills - https://github.com/Modernizr/Modernizr/wiki/...
Update
Как уже отмечалось в комментарии
Будьте осторожны с мета-тег X -UA-совместимый. Если вы используете что-то вроде html5-шаблона, у которого есть условные комментарии, окружающие элемент (это также происходит с html5 doctype IIRC), у вас могут возникнуть проблемы с тем, что IE9 заставляет себя работать в стандартах IE7 даже с тегом. IE снова наносит удар
Возможно, вы захотите изучить это, у меня нет ничего, чтобы поддержать это в настоящий момент.
Вы ищете СОВМЕСТИМОСТИ матрицы HTML5
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
Обратите внимание: «Фактическая точность этой статьи может быть скомпрометирована из-за устаревшей информации. Обновите эту статью, чтобы отразить недавние события или новую информацию. (March 2013)« – gersande
Да, возможно, это правда, но в целом google ' 'html5 compatability'' Я уверен, что есть много ресурсов. – bradgonesurfing
В общем, есть вопросы.
Мне сказали, что ваш вопрос сформулирован, чтобы спросить о HTML 5 теги но это также полезно посмотреть на новые функции в свете любых JavaScript, вы можете найти или написать.
На практике рекомендуемым методом является проверка наличия функции , а не конкретного браузера. Сценарий Modernizr может быть полезен в этом отношении, но есть также сообщения undetectable features in HTML5.
Некоторые функции, такие как local storage, возвращаются в IE8.
Другие, как FileReader, требуют IE10/Firefox21/Chrome27
Для получения текущей информации, попробуйте http://caniuse.com
Я должен отметить, что localStorage & fileReader не являются HTML-тегами, OP спрашивает, какие теги HTML5 имеют проблемы совместимости. – iConnor
О, да. Существует большой список семантических тегов, которые вставляются в HTML5 как способ сделать вашу страницу более удобной для чтения и, возможно, более дружественной к SEO [или, возможно, нет]. Есть несколько новых элементов ввода. Я полагаю, что некоторые из них могут иметь проблемы в одном или нескольких браузерах. Я бы подумал, что у caniuse может быть такая информация ... – Paul
Написать HTML 5, как вы обычно бы и использовать Shims для обеспечения совместимости со старыми браузерами. Вам просто нужно быть осторожным с API-интерфейсами Javascript, потому что они вряд ли подходят. Если вы пытаетесь придерживаться базового HTML 4 для совместимости, нет смысла использовать HTML 5.
Для быстрого сравнения того, какие теги доступны в браузерах и на каком уровне поддержки для каждого тега, html5test.com отличный ресурс.
Кроме того, для лучшей совместимости с перекрестным браузером, я предлагаю использовать этот reset.css, созданный Эриком Мейером. http://meyerweb.com/eric/tools/css/reset/ Это делает элементы, которые отличаются от браузера к другому, ведет себя одинаково во всех браузерах.
Проверьте http://caniuse.com и http://html5please.com информацию о совместимости браузера. –
@deceze любые ссылки, чтобы узнать больше о прокладках? – Swagg
[HTML-Boilerplate] (http://html5boilerplate.com) - хороший ресурс –