Как определить совместимость HTML 5 в браузере

Ответ 1

Посмотрите Modernizr:

Использование новых возможностей HTML5 и CSS3 может означать жертвуя контролем над опытом в старых браузерах. Modernizr 2 является отправной точкой для создания лучших веб-сайтов и приложений которые работают точно, независимо от того, какой браузер или устройство ваши посетители использовать.

Благодаря новым тестам Media Query и встроенным YepNope.js micro-library как Modernizr.load(), теперь вы можете комбинировать функцию обнаружение с помощью медиа-запросов и загрузка условных ресурсов. Что дает вам возможность и гибкость для оптимизации для каждого обстоятельство.

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

Дополнительная информация: http://www.modernizr.com/

Ответ 2

"Совместимость HTML5" - очень неопределенная вещь.

Когда люди спрашивают о совместимости с HTML5, они обычно означают "какие браузеры поддерживают эти функции браузера нового X, Y и Z, которые я хочу использовать?"

В течение нескольких последних лет в браузерах добавлен целый набор функций, которые в настоящее время обычно называются "HTML5".

На самом деле нет браузеров, которые поддерживают каждую новую функцию.

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

Достаточно полный список новых функций браузера, а также диаграммы поддержки браузера для них доступны по адресу http://caniuse.com/ (если вы перейдете к внизу, вы увидите в общей таблице совместимости, что самые лучшие текущие браузеры поддерживают только 89% тестируемых функций. Это со временем улучшится по мере выпуска новых версий... но, конечно же, новые функции будут также вводятся)

Для определения во время выполнения, поддерживает ли пользовательский браузер данную функцию, вы можете использовать Modernizr. Это инструмент на основе Javascript, который даст вам набор классов CSS и флагов Javascript, которые расскажут вам, какие функции поддерживаются. Вы можете использовать это, чтобы вызвать альтернативное поведение на вашем сайте, если браузер не поддерживает функцию, которую вы хотите. (Modernizr также включает в себя функциональность HTML5Shim, которая позволяет IE, по крайней мере, справляться с HTML-страницами, содержащими новые элементы HTML5).

Для большей совместимости между браузерами существует целый ряд хаков, которые были написаны, чтобы позволить старым браузерам (в основном, IE быть справедливыми) поддерживать ряд новых функций. Вы можете увидеть довольно полный список из них здесь: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Очевидно, что попытка запустить более чем несколько из них сразу в IE сильно повлияет на производительность вашего сайта, но это может быть удобно, если вам нужно поддерживать одну или две функции. Мой любимый на данный момент CSS3Pie, который дает поддержку IE6/7/8 для скругленных углов, теней и градиентов CSS.

Надеюсь, что это поможет.

Ответ 3

Ниже приведено руководство по обнаружению совместимости и возможностей HTML5:

http://diveintohtml5.ep.io/detect.html

Существуют альтернативные детекторы HTML5, использующие подобные методы, но я бы предложил использовать Modernizr.

Подводя итог "оценке" HTML5, вы можете создать свою собственную "схему маркировки". Сумма взвешенной оценки дает вам общий балл.

Ответ 4

Простейший метод: в JS вы создаете новый элемент и устанавливаете атрибуты colorpicker (HTML5) в JS и возвращаете тип элемента (это сборщик, только если браузер IC HTML5 совместим):

var element = document.createElement("input");
element.setAttribute("type", "color");
return element.type !== "text";

Ответ 5

Нужно ли проверять каждый элемент?

Неа. Только те части, которые вы хотите использовать, совместимы с предыдущей версией.

Смотрите Пять вещей, которые вы должны знать о HTML5, особенно пункты 1 и 4.

Ответ 6

Я предлагаю вам попробовать использовать <audio>Anything within Audio tag here</audio>.
Любой текст, написанный внутри <audio> и </audio>, будет отображаться в браузерах, которые не поддерживают тег <audio>.
Поскольку звуковой тег недавно добавлен в HTML5.

Ответ 7

Это работает в IE 11 (и, надеюсь, другие браузеры тоже).

// Detect HTML v5 compatibility
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;

Это ответ от ответа Клемента и ссылка от Шивана (http://diveintohtml5.info/detect.html). Ответ Клемента не работал в IE 11.

В моем случае я использую jQuery UI для всего, что не требует Modernizr (также он казался медленнее). Чтение довольно негативных комментариев "Как использовать Modernizr" поддерживает это предположение.

Но теперь jQuery разделяет совместимость браузера между потоками разработки v1 и v2, что необходимо для людей, которые хотят поддерживать браузеры, не поддерживающие HTML v5, для загрузки в ядро ​​v1 или v2 jQuery v170 в начале. Таким образом, обнаружение "одного лайнера" HTML v5 идеально. Вот как я правильно загружаю jQuery с помощью результата:

// Use jQuery v2 for HTML v5 browsers else v1 to support old browsers
var jQueryScriptPath = (isHtml5Compatible)
    ? "/Scripts/jquery-2.0.3.js"
    : "/Scripts/jquery-1.10.2.js";
document.writeln("<script src=\"" + jQueryScriptPath + "\" type=\"text/javascript\"><\/script>");

Если вы проголосуете за этот ответ, прошу также проголосовать за ответы и ответы Шивана: -)