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

Question

Каков наилучший способ определения совместимости браузера для синтаксиса HTML 5?И подскажите пользователю, если браузер не совместим?

Я понимаю учебник, который показывает, как проверить совместимость браузера для HTML5 Но мне любопытно узнать, единственный ли это способ?Нужно ли проверять каждый элемент?

Answer 1

Взгляните на Modernizr :

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

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

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

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

Answer 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, теней и градиентов.

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

Answer 3

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

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

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

Чтобы подвести итоги «счета» HTML5, вы можете разработать свою собственную «схему маркировки». Суммируйте взвешенный счет дает вам общий счет.

Answer 4

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

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

Answer 5

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

Answer 6

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

Нет. Только те части, которые вы хотите использовать, не имеют обратной совместимости.

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

Answer 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, чтобы загружать EITHER основной скрипт jQuery v1 или v2 при запуске. Так что это «однострочное» обнаружение 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>");

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