Обнаружение поддержки определенных функций HTML 5 с помощью jQuery

Я работаю над некоторым демо-кодом HTML5, включая такие вещи, как <input type="date" />

В настоящее время он работает корректно в Opera 10 как есть, но каждый другой браузер просто отображает обычный ввод текста. Затем я использую плагин jQuery.date-input, чтобы переопределить это поведение в браузерах, которые его не поддерживают.

Проблема заключается в том, что jQuery работает и в Opera, поэтому в Opera я получаю два календарных механизма выбора даты (один из браузера, один из jQuery)

Я могу обойти это сейчас, используя if (window.opera) - но есть ли способ использовать, скажем, jQuery.support, что я могу надежно определить, поддерживает ли текущий браузер конкретную функцию HTML5?

Ответ 1

Я бы посмотрел на Modernizr. Это библиотека с открытым исходным кодом, MIT-лицензированная библиотека Javascript, которая обнаруживает поддержку многих функций HTML5/CSS3, и она ДЕЙСТВИТЕЛЬНО крошечная (сжатие 7 кбит). Чтобы использовать его, просто:

<script src="modernizr.min.js"></script>

В <head> вашего документа. После этого у него есть множество функций для проверки того, что вам нужно. Пример:

if (Modernizr.canvas) { 
     // do stuff
}

Есть еще много способов проверить конкретную функцию HTML5/CSS3, которую вы хотите. Проверьте свой веб-сайт, чтобы получить его и посмотреть документы.

Ответ 2

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

Некоторые вещи легче нюхать, чем другие. Для вашего примера поддержки ввода даты очень просто. Свойство input.type указывает, какой тип управления он считает; если входы даты не поддерживаются, вы получите 'text'.

<input type="date" class="dateinput" />

if ($('.dateinput')[0].type!=='date') {
     $('.dateinput').addSomeDateScriptingPluginThing();
}