Comment détecter HTML 5 de la compatibilité du navigateur

Quel est le meilleur moyen de détecter un navigateur compatible HTML 5 de la syntaxe? Et demande à l'utilisateur si le navigateur n'est pas compatible?

Je comprends le tutoriel qui montre comment tester la compatibilité du navigateur HTML5. Mais je suis curieux de savoir si c'est le seul moyen? Ai-je besoin d'inspecter chaque élément?

Quelle syntaxe? HTML 5 a de nombreuses nouvelles fonctionnalités.
Pas pour des contrôles spécifiques, je suppose que site sera riche de HTML 5 de contrôle. Sans doute, plusieurs de HTML 5 et de contrôle sur une seule page.
HTML 5 est plus que juste un ensemble de nouvelles commandes.

InformationsquelleAutor Chris | 2011-07-18

cross-browser html5

15

Ont un coup d'oeil à Modernizr:

De prendre avantage des nouvelles fonctionnalités de HTML5 et CSS3 peut signifier
sacrifier le contrôle sur l'expérience dans les navigateurs plus anciens. Modernizr 2
est votre point de départ pour faire les meilleurs sites web et applications
qui fonctionnent exactement de n'importe quel appareil ou navigateur de vos visiteurs
utiliser.

Grâce à la nouvelle Requête de Média tests et intégré YepNope.js
micro-bibliothèque comme Modernizr.load(), vous pouvez maintenant combiner fonctionnalité
détection avec les requêtes des médias et à la condition de chargement de ressources. Que
vous donne la puissance et la flexibilité pour optimiser pour chaque
la circonstance.

Il a beaucoup construit dans les méthodes d'essai pour les fonctions de navigation et fournit un moyen utile de fournir des secours code pour quand fonctionnalités que vous souhaitez utiliser ne sont pas pris en charge.

Plus d'infos: http://www.modernizr.com/

InformationsquelleAutor betamax
8

"Compatibilité HTML5" est très vague chose.

Quand les gens poser des questions sur la compatibilité HTML5, en général "quels sont les navigateurs prennent en charge ces nouveaux-ish navigateur de fonctions de X, Y et Z qui je veux utiliser?"

Il y a toute une série de fonctionnalités qui ont été ajoutées aux navigateurs dans le dernier couple de d'années, et qui sont maintenant communément appelé "HTML5".

En fait, il n'y a pas tout les navigateurs qui supportent chaque nouvelle fonctionnalité là.

Ce que vous devez faire est de travailler sur les fonctions qui ont un assez large soutien pour les rendre intéressant l'utilisation, les fonctionnalités que vous souhaitez utiliser, mais sont heureux de travailler autour si vous rencontrez un navigateur qui ne les supportent pas, et les fonctions qui vous devez absolument utiliser pour obtenir ce que vous voulez faire.

Une liste assez complète de nouvelles fonctionnalités du navigateur, avec prise en charge du navigateur de diagrammes pour eux tout est disponible à http://caniuse.com/ (si vous faites défiler vers le bas, vous allez le voir dans l'ensemble de la table de compatibilité que le meilleur des navigateurs actuels seulement le soutien de 89% des fonctionnalités qu'ils ont testé. Cela permettra d'améliorer au fil du temps que de nouvelles versions sont publiées... mais bien sûr, également de nouvelles fonctionnalités seront introduits trop)

Pour déterminer au moment de l'exécution si le navigateur de l'utilisateur prend en charge une fonctionnalité donnée, vous pouvez utiliser Modernizr. C'est un Javascript outil qui va vous donner un ensemble de classes CSS et Javascript drapeaux qui indiquent quelles fonctions sont prises en charge. Vous pouvez l'utiliser pour déclencher suppléant de comportement dans votre site si le navigateur ne prend pas en charge la fonction que vous souhaitez. (Modernizr comprend également la HTML5Shim fonctionnalité, qui permet, c'est à dire au moins faire face à des pages HTML contenant de nouveaux éléments HTML5).

Pour plus de compatibilité inter-navigateur, il existe toute une gamme de hacks qui ont été écrites pour permettre les navigateurs plus anciens (principalement c'est à dire pour être juste à l'appui d'un éventail de nouvelles fonctionnalités. Vous pouvez voir une liste assez complète ici: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Évidemment, essayez d'exécuter plus de quelques-uns de ces à la fois dans IE ne perturbent gravement les performances de votre site, mais il peut être pratique si vous avez besoin de prendre en charge un ou deux de leurs caractéristiques. Mon préféré pour le moment est CSS3Pie, qui donne IE6/7/8 de soutien pour les CSS des coins arrondis, des ombres et des dégradés.

Espère que ça aide.
- +1 Grande réponse complète.
- Vous trouverez que c'est un très petit nombre de fonctionnalités (principalement dans les navigateurs Safari et Mozilla) qui ont des caractéristiques qui ne sont pas pris en charge ou ont problématique de soutien. Vous pouvez trouver des vérificateurs de dépendance qui montrent ce que les fonctionnalités sont prises en charge et à l'aide d'un HTML5 champ par exemple, si pas pris en charge ne renvoie pas d'erreur, il se dégrade à un champ de saisie de Texte. CSS est un animal différent à la prise en charge du HTML5, ne pas confondre les deux comme étant entièrement pris en charge sur la base d'un navigateur qui est ou n'est pas compatibles avec le format HTML5.
- bien sûr, mais c'était une image très différente il y a six ans quand j'ai posté cette réponse.
- Vous n'avez pas de mise à jour de votre réponse, ma réponse était une réponse valide indépendamment de la façon dont la vieille poste, les gens sont toujours à trouver ces résultats dans les moteurs de recherche.
InformationsquelleAutor Spudley
4

Voici un tutoriel de détecter la compatibilité HTML5 & capacités :

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

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

Pour résumer le "score" de HTML5, vous pouvez concevoir votre propre "régime de marquage". La somme pondérée de score vous donne le score total.
- je dirais modenizr trop
- Raptor j'ai mis à jour la question en même temps. J'ai déjà lu ce tutoriel et je suis curieux de savoir ou résumé des fonctionnalités de test.
- mise à jour de la réponse
InformationsquelleAutor Raptor
2

La méthode la plus simple : en JS vous créez un nouvel élément, et de définir les attributs pour être un composant colorpicker (HTML5) en JS, et de retourner le type de l'élément (c'est un sélecteur seulement si le navigateur ic HTML5 compatible) :
```
var element = document.createElement("input");
element.setAttribute("type", "color");
return element.type !== "text";
```
- Bonne idée, mais il ne fonctionne pas sur IE 11. Peut-être pour les performances, le test de l'élément que vous créez n'est pas analysé, car il n'est jamais ajouté au document. J'ai besoin d'une solution qui n'utilise pas de Modernizr, parce que c'est un tas de crasse si vous êtes déjà à l'aide de jQuery UI pour traiter avec rétro-compatibilité. En fait la seule raison pour laquelle la recherche de cette réponse, c'est un moyen rapide pour basculer entre jQuery 1 ou 2 (malheureusement, ils se sont divisés en charge des navigateurs qui le rend compliqué).
InformationsquelleAutor clement
1

ai-je besoin d'inspecter chaque élément?

Nope. Uniquement les parties que vous souhaitez utiliser, qui ne sont pas rétro-compatible.

Voir Cinq Choses que Vous Devez Savoir à Propos de HTML5, en particulier les points 1 et 4.

InformationsquelleAutor Paul D. Waite
1

Je suggère 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 prennent pas en charge la <audio> tag.

Depuis la balise audio est nouvellement ajouté dans HTML5.

InformationsquelleAutor Reconnect
0

Cela fonctionne sur IE 11 (et j'espère que d'autres navigateurs aussi).
```
//Detect HTML v5 compatibility
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
```
C'est une prise de Clément de réponse et le lien de Shivan (http://diveintohtml5.info/detect.html). Clement réponse ne fonctionne pas dans IE 11.

Dans mon cas, j'utilise jQuery UI pour tout, donc n'a pas besoin de Modernizr, elle aussi semblait plus lent). La lecture de la plutôt négatif "Comment utiliser Modernizr" les commentaires de ce blog soutient cette hypothèse.

Mais maintenant, jQuery ont divisé la compatibilité du navigateur entre la v1 et la v2 de développement de flux, il est nécessaire pour les personnes désireuses de soutenir la non-HTML v5 navigateurs pour charger la v1 ou la v2 de base jQuery script au début. Donc, ce "one liner" HTML v5 détection est parfait. Voici comment j'ai charger jQuery en utilisant le résultat:
```
//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 cette réponse, veuillez également voter clément et Shivan les réponses de trop 🙂

InformationsquelleAutor Tony Wall

Vous devez vous connecter pour publier un commentaire.