support de détection pour HTML spécifique 5 fonctionnalités via jQuery

Question

Je travaille sur un code de démonstration HTML5, y compris des trucs comme <input type="date" />

Cela fonctionne actuellement correctement dans Opera 10 as-est, mais tous les autres navigateurs affiche juste un texte normal contribution. J'utilise alors un plugin jQuery.date-input pour contourner ce comportement sur les navigateurs qui ne le supportent pas.

problème est - le fonctionnement du jQuery sur Opera, donc dans Opera, je reçois deux dates ramasseurs (un à partir du navigateur, l'un de jQuery) calendrier

Je peux travailler autour de cela pour l'utilisation maintenant if (window.opera) - mais y a-t-il un moyen, par exemple, d'utiliser jQuery.support, que je peux détecter de manière fiable si le navigateur actuel supporte une fonctionnalité HTML5 particulière ou pas?

Answer 1

Je voudrais jeter un coup d'oeil à Modernizr. C'est une bibliothèque Javascript open-source, sous licence MIT, qui détecte la prise en charge de nombreuses fonctionnalités HTML5/CSS3 et est TRÈS minuscule (compressé à 7 ko). Pour l'utiliser, il suffit de:

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

Dans le document de votre document. Après cela, il a une variété de fonctions pour vérifier ce dont vous avez besoin. Exemple:

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

Il existe de nombreux autres moyens de vérifier la fonctionnalité HTML5/CSS3 que vous souhaitez. Check out their website pour l'obtenir et voir les docs.

Answer 2

Oui, vérifier pour un navigateur particulier n'est pas ce que vous voulez du tout. Il est parfois utile de détecter quand vous devez appliquer des solutions de contournement pour les bogues du navigateur (généralement avec IE), mais si vous voulez savoir si un navigateur prend en charge une fonctionnalité, il suffit de le détecter.

Certaines choses sont plus faciles à renifler que d'autres. Pour votre exemple de support de saisie de date, c'est très facile. La propriété input.type vous indique quel type de contrôle le navigateur pense être; Si les entrées de date ne sont pas prises en charge, vous obtiendrez 'text'.

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

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