Comment détecter la compatibilité HTML 5 dans le navigateur

"compatibilité HTML5" est une chose très vague.

quand les gens posent des questions sur la compatibilité HTML5, ils veulent généralement dire " quels navigateurs prennent en charge ces nouvelles fonctionnalités de navigateur X, Y et Z que je veux utiliser?"

il y a toute une série de fonctionnalités qui ont été ajoutées aux navigateurs au cours des dernières années, et qui sont maintenant communément appelées "HTML5".

En fait, il n'y a pas les navigateurs qui supportent tous les nouveau fonctionnalité.

ce que vous devez faire est de déterminer quelles fonctionnalités ont suffisamment de support pour les rendre utiles, quelles fonctionnalités vous souhaitez utiliser mais êtes heureux de travailler si vous rencontrez un navigateur qui ne les supporte pas, et quelles fonctionnalités vous devez absolument utiliser pour atteindre ce que vous voulez faire.

une liste assez complète des nouvelles fonctionnalités de navigateur, ainsi que des graphiques de soutien de navigateur pour eux tous est disponible à http://caniuse.com/ (si vous faites défiler vers le bas, vous verrez dans la table de compatibilité globale que les meilleurs navigateurs actuels ne prennent en charge que 89% des fonctionnalités qu'ils ont testées. Cette situation s'améliorera avec le temps à mesure que de nouvelles versions seront publiées... mais bien sûr, de nouvelles fonctionnalités seront également introduites)

pour déterminer à l'exécution si le navigateur de l'utilisateur supporte une fonctionnalité donnée, vous pouvez utiliser Modernizr. Il S'agit d'un outil basé sur Javascript qui vous donnera un ensemble de classes CSS et Les options Javascript qui vous indiquent quelles fonctionnalités sont supportées. Vous pouvez l'utiliser pour déclencher un comportement alternatif dans votre site si le navigateur ne supporte pas une fonctionnalité que vous voulez. (Modernizr inclut également la fonctionnalité HTML5Shim, qui permet à IE de gérer au moins les pages HTML contenant de nouveaux éléments HTML5).

pour plus de compatibilité entre navigateurs, il y a toute une gamme de hacks qui ont été écrits pour permettre à des navigateurs plus anciens (principalement IE pour être juste) de supporter une gamme de nouveaux caractéristique. Vous pouvez en voir la liste assez complète ici:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

évidemment, essayer d'exécuter plus d'un de ceux-ci à la fois dans IE va gravement nuire à la performance de votre site, mais il peut être pratique si vous avez besoin de soutenir une ou deux fonctionnalités. Mon préféré du moment, c'est CSS3Pie, qui donne IE6/7/8 support pour CSS coins arrondis, ombres et dégradé.

J'espère que ça aidera.

voici un tutoriel sur la détection de la compatibilité et des capacités HTML5:

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

il existe d'autres détecteurs HTML5 utilisant des techniques similaires, mais je suggère D'utiliser Modernizr.

pour résumer le" score "de HTML5, vous pouvez concevoir votre propre"barème de notation". La somme des résultats pondérés vous donne le résultat total.

la méthode la plus simple : dans JS vous créez un nouvel élément, et définissez les attributs pour être un colorpicker (HTML5) dans JS, et retournez le type de l'élément (c'est un picker seulement si le navigateur ic HTML5 compatible) :

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

dois-je inspecter chaque élément?

Non. Seulement les pièces que vous voulez utiliser qui ne sont pas rétrocompatibles.

Voir cinq choses que vous devriez savoir sur HTML5, notamment les points 1 et 4.

je dirais que vous pouvez essayer d'utiliser <audio>Anything within Audio tag here</audio>.

Tout texte écrit à l'intérieur le entre <audio> et </audio> sera affiché dans les navigateurs qui ne supportent pas le <audio> balise.

Depuis la balise audio est nouvellement ajoutée dans HTML5.

cela fonctionne sur IE 11 (et avec un peu de chance d'autres navigateurs aussi).

// Detect HTML v5 compatibility
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;

c'est une reprise de la réponse de Clement et le lien de Shivan (http://diveintohtml5.info/detect.html). La réponse de Clement n'a pas fonctionné dans IE 11.

dans mon cas j'utilise jQuery UI pour tout donc n'ont pas besoin de Modernizr (aussi il a semblé plus lent). Lire les commentaires plutôt négatifs du blog "comment utiliser Modernizr" soutient cette hypothèse.

// 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>");

si vous votez pour cette réponse, veuillez aussi voter pour les réponses de clement et Shivan: -)