Erkennung Unterstützung für bestimmte HTML-5-Funktionen über jQuery

Question

Ich arbeite an einigen Demo-Code HTML5, einschließlich Sachen wie <input type="date" />

Das zur Zeit richtig in Opera funktioniert 10, wie sie ist, aber jeder andere Browser zeigt nur einen normalen Text Eingang. Ich verwende dann ein jQuery.date-Eingabe-Plugin, um dieses Verhalten in Browsern zu überschreiben, die es nicht unterstützen.

Problem ist - der Lauf jQuery auf Opera als auch, so in Opera Ich bin zwei Kalendertag Pflücker bekommen (eine aus dem Browser, einen von jQuery)

Ich kann jetzt dieses Problem umgehen if (window.opera) mit - Aber gibt es eine Möglichkeit, sagen wir, jQuery.support, dass ich zuverlässig erkennen kann, ob der aktuelle Browser eine bestimmte HTML5-Funktion unterstützt oder nicht?

Answer 1

Ich würde einen Blick auf Modernizr werfen. Es ist eine Open Source, MIT-lizensierte Javascript-Bibliothek, die Unterstützung für viele HTML5/CSS3-Funktionen erkennt und es ist wirklich winzig (7kb komprimiert). Um es zu verwenden, einfach:

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

Innerhalb der Ihres Dokuments. Danach hat es eine Vielzahl von Funktionen, um zu überprüfen, was Sie brauchen. Beispiel:

Es gibt viele weitere Möglichkeiten, nach der spezifischen HTML5/CSS3-Funktion zu suchen, die Sie möchten. Check out their website, um es zu bekommen und die Dokumente zu sehen.

Answer 2

Ja, die Suche nach einem bestimmten Browser ist nicht das, was Sie überhaupt wollen. Es ist gelegentlich nützlich, um zu erkennen, wann Sie Workarounds für Browserfehler anwenden müssen (normalerweise mit IE), aber wenn Sie wissen wollen, ob ein Browser eine Funktion unterstützt, dann schnüffeln Sie einfach danach.

Manche Dinge sind leichter zu schnüffeln als andere. Für Ihr Beispiel der Datumseingabe-Unterstützung ist es sehr einfach. Die Eigenschaft input.type teilt Ihnen mit, welche Art von Steuerelement der Browser für dies hält. Wenn Datumseingaben nicht unterstützt werden, erhalten Sie 'text'.

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

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