Détection de la prise en charge de fonctionnalités HTML 5 spécifiques via jQuery

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

Actuellement, cela fonctionne correctement dans Opera 10, mais tous les autres navigateur affiche simplement une normale de saisie de texte. Je suis alors à l'aide de jQuery.date d'entrée plugin pour remplacer ce comportement sur les navigateurs qui ne supportent pas.

Problème, c'est - à jQuery est en cours d'exécution sur l'Opéra et, donc, à l'Opéra, je reçois deux de calendrier de la date de la cueillette (un à partir de l'explorateur, l'un à partir de jQuery)

Je peux contourner cela pour l'instant à l'aide de if (window.opera) - mais est-il possible grâce à jQuery.de soutien, que je peux détecter de manière fiable si le navigateur prend en charge un particulier fonctionnalité HTML5 ou pas?

source d'informationauteur Dylan Beattie

  1. 17

    Je voudrais prendre un coup d'oeil à Modernizr. C'est un open source, MIT sous licence de la bibliothèque Javascript qui détecte la présence d'un support pour de nombreux HTML5/CSS3 et c'est VRAIMENT tout petit (7kb comprimé). Pour l'utiliser, il suffit de:

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

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

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

    Il y a beaucoup plus de moyens pour vérifier pour le HTML5/CSS3 fonctionnalités que vous souhaitez. Découvrez leur site web pour le faire et de voir les docs.

  2. 11

    Ouais, la vérification d'un navigateur particulier n'est pas ce que vous voulez. Il est parfois utile pour détecter lorsque vous avez besoin d'appliquer des solutions de rechange pour les bogues de navigateur (généralement avec IE), mais si vous voulez savoir si le navigateur prend en charge une fonctionnalité juste renifler.

    Certaines choses sont plus faciles à renifler que d'autres. Pour votre exemple de la date d'entrée de soutien c'est très facile. Le input.type propriété vous indique quel type de contrôle le navigateur pense qu'il est; si la date d'entrées ne sont pas pris en charge, vous aurez 'text'.

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

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