Ressources pour les tables de compatibilité JavaScript et DOM

L'une des meilleures paires d'info à venir ces dernières années est le bien connu et super pratique que puis-je utiliser par Alexis Deveria.

Bien que puis-je utiliser est idéal pour de nombreuses fonctionnalités de pointe, il y a encore beaucoup de trucs JavaScript et DOM qui n'y sont pas inclus. Alors, quelles autres options existent-elles pour rechercher la prise en charge du navigateur pour de nombreuses fonctionnalités JavaScript et DOM différentes?

Je fais toujours des recherches sur diverses technologies frontales, mais la seule chose que je n'ai pas encore trouvée est une très bonne ressource à guichet unique qui répertorie la prise en charge du navigateur pour tous les aspects de JavaScript et du DOM, y compris les divers API HTML5.

Bien qu'une seule ressource n'existe pas vraiment (du moins aucune que je connaisse), il y a quelques ressources que j'ai rencontrées qui, ensemble, forment un assez bon aperçu des fonctionnalités qui sont prises en charge dans les navigateurs, et en particulier toutes les anciennes versions de IE que vous pourriez encore avoir à soutenir.

Les plats clés

• Bien qu'il n'y ait pas une seule ressource complète pour la compatibilité JavaScript et DOM, plusieurs ressources offrent ensemble un bon aperçu de la prise en charge des fonctionnalités entre différents navigateurs. Ceux-ci peuvent utiliser, référence de MDN, QuirksMode Dom Référence par Peter-Paul Koch, Tables de compatibilité du navigateur Web par Cody Lindley, Big JS-Compatibilité-Table par Tobias Buschor, Dottoro JavaScript Reference, IE Dev Center Javascript et Dom Référence Ecmascript Ecmascript JavaScript, IE Dev Center Javascrip Tables de compatibilité par Kangax / Arnott et vérificateur de compatibilité JavaScript par Thijs Busser.
• Les tests réels sur les différents appareils et navigateurs que vous devez prendre en charge doivent toujours être la principale méthode pour déterminer la compatibilité. Les tables «de support» peuvent ne pas toujours inclure des bogues pertinents qui peuvent rendre une fonctionnalité inutilisable, et certaines ressources peuvent être incorrectes.
• La référence de MDN est un bon point de départ quand puis-je utiliser n'a pas les informations dont vous avez besoin. Il fournit un aperçu préliminaire de la prise en charge de diverses fonctionnalités JavaScript. Il est également modifiable par quiconque, donc si vous trouvez des informations incorrectes, vous pouvez la mettre à jour.
• Le vérificateur de compatibilité JavaScript par thijs busser est un nouvel outil qui vous permet de coller ou de télécharger le code JavaScript pour obtenir une analyse de la compatibilité du code. Il utilise des informations des tables Kangax et puis-je utiliser, en me concentrant sur les API et fonctionnalités plus récentes ajoutées dans ES5 et plus tard. Cependant, il est encore nouveau et peut ne pas toujours fournir des résultats précis.

Bien sûr, les tests réels l'emportent sur tous

Avant d'entrer dans les ressources, je pense qu'il va sans dire que faire des tests réels sur les différents appareils et navigateurs que vous devez prendre en charge devrait toujours être la principale méthode pour déterminer le support.

C'est bien de pouvoir obtenir un aperçu d'occasion du support. Mais les tables «de support» n'incluent pas toujours de bogues pertinents qui pourraient rendre la fonctionnalité en question inutilisable. Et c'est en plus du fait que certaines ressources peuvent être tout simplement fausses.

Assurez-vous donc de faire des tests et d'utiliser les références décrites dans cet article comme des guides, et non comme le dernier mot pour savoir si quelque chose fonctionne dans un navigateur particulier sur une plate-forme particulière sur un appareil particulier.

référence de MDN

Si vous ne trouvez pas quelque chose sur Et je suis sûr que la plupart d'entre vous font exactement cela. Dans la plupart des cas, c'est tout ce dont vous aurez besoin pour obtenir un bon aperçu préliminaire de la prise en charge d'une fonctionnalité JavaScript particulière que vous ne pouvez pas trouver sur puis-je utiliser

Par exemple, disons que vous souhaitez rechercher AdVEventListener () et enleverEventListener (). Vous ne les trouverez pas sur

puis-je utiliser . Mais vous pouvez trouver les deux, avec des informations sur le navigateur, sur Mdn.

Comme vous pouvez le voir dans l'écran Grab ci-dessus, en plus des détails montrant quels navigateurs ont un «support de base», il y a souvent des informations supplémentaires dans ce graphique sur les fonctionnalités qui auraient pu être ajoutées dans les versions ultérieures d'Ecmascript.

N'oubliez pas non plus que la référence de MDN est modifiable par quiconque, donc si vous découvrez que quelque chose est incorrect, n'hésitez pas à le mettre à jour.

Reference DOM de Quirksmode par Peter-Paul Koch

Quelle discussion sur les tables de compatibilité des navigateurs ne serait pas complète sans mentionner Peter-Paul Koch et ses excellentes tables de référence, qui sont toutes basées sur ses propres tests.

Les tables de Koch incluent les informations de support pour les navigateurs de bureau et mobiles, et il me semble que les trucs DOM sont assez à jour, indiquant la prise en charge de IE11 et iOS7.

Tables de compatibilité du navigateur Web par Cody Lindley

Voici celui qui ne semble pas être trop connu, construit par Cody Lindley, qui a écrit de grands livres sur Javascript et le Dom. Il s'appelle les tables de compatibilité du navigateur Web (WBCT) et c'est une ressource gigantesque.

Le site Web de Cody comprend des tables de support pour IE6 et comprend les éléments suivants:

Prise en charge DOM pour les navigateurs de bureau et de tablette / téléphone
DOM Événements Prise en charge des navigateurs de bureau et de tablette / téléphone
ES6 Prise en charge des navigateurs de bureau et de tablette / téléphone

Ce sont les principaux domaines pour les développeurs de recherches sur les informations de support JavaScript, mais WBCT comprend également des tables de support pour CSS, BOM, SVG et bien plus encore. Assurez-vous donc de mettre en signet celui-ci. Il sert de bon complément complet à MDN.

Big JS-Compatibilité-Table par Tobias Buschor

Celui-ci n'est certainement pas très bien connu, mais il pourrait avoir quelque chose qui n'est pas inclus dans les tables de Cody Lindley ou quelque chose qui n'est pas bien documenté sur Mdn.

C'est une grande table-compatibilité JS, créée par Tobias Buschor.

C'est aussi une énorme ressource et j'aime vraiment la façon dont elle vous permet de percer dans une fonctionnalité JavaScript ou DOM spécifique. Par exemple, si vous faites défiler la liste initiale (qui commence par l'objet de fenêtre), vous pouvez cliquer sur quelque chose comme StorageEvent et il vous donne une liste de méthodes et de propriétés sur cet objet particulier.

Bien qu'il s'agisse d'une ressource vraiment complète, j'ai remarqué que cela peut parfois être lent, et le site principal semble avoir une erreur, donc je ne sais pas si Tobias a maintenu la ressource, aussi bonne qu'elle soit .

J'utilise généralement celui-ci comme une troisième ou une quatrième possibilité si je regarde une fonctionnalité particulière qui n'est pas trop bien documentée ailleurs.

Dottoro JavaScript Web Reference

La référence JavaScript Dottoro, entretenue par Dottoro, une société de services informatiques, est une ressource assez décente pour de nombreuses fonctionnalités JavaScript et DOM différentes.

Dans les cas où la prise en charge du navigateur est pleine, dans toutes les versions, vous verrez une icône de navigateur indiquant cela, ou bien une icône lavée indiquant le manque de support. De plus, si le support commence à une version spécifique, cela sera également indiqué. Vous pouvez le voir dans la capture d'écran ci-dessous:

En plus du support du navigateur, celui-ci donne également une brève description de la fonctionnalité que vous recherchez, donc c'est un peu bonus.

Ce que j'aime vraiment dans cette ressource, c'est la belle fonctionnalité de recherche, ce qui n'est pas extrêmement évident lorsque vous visitez le site pour la première fois. Il est déclenché dans une fenêtre Lightbox en cliquant sur l'un des deux boutons «Parcourir le nom». Le bouton latéral est indiqué dans la capture d'écran ci-dessous:

Vous pouvez également rechercher directement sur la page principale, mais j'aime la recherche dans la LightBox car elle filtre instantanément les résultats en fonction de ce que vous tapez, plutôt que d'avoir à voir une page de résultats en premier.

Dans l'ensemble, la référence Dottoro est une ressource agréable et attrayante qui inclut également les informations de support du navigateur pour les fonctionnalités HTML et CSS.

IE Dev Center JavaScript et DOM Référence

Habituellement, lorsque nous nous interrogeons sur le support du navigateur, c'est parce que nous voulons des informations sur les versions plus anciennes de IE (maintenant incluant IE9 et IE10, qui sont toutes deux considérées comme «anciennes» selon les normes d'aujourd'hui).

Le centre de développement Internet Explorer de Microsoft a une cargaison de bonnes pages avec des informations de support détaillées sur les fonctionnalités JavaScript et DOM.

Par exemple, vous pouvez visiter la page d'informations de la version JavaScript, qui répertorie un certain nombre de fonctionnalités dans une table avec des informations de support pour IE6-11. Vous pouvez également percer chaque fonctionnalité, en arrivant finalement sur une page consacrée à une seule fonctionnalité.

Donc, si vous explorez la page sur la méthode foreach pour l'objet MAP, vous obtiendrez une description de cette fonctionnalité avec une section appelée «Exigences», qui décrit les versions d'IE prennent en charge cette fonctionnalité.

Ce n'est qu'un petit échantillon de ce qui est disponible pour rechercher. Il y a aussi la référence DOM, la référence des applications Web (qui couvre de nombreuses API HTML5), et la référence graphique et médiatique, qui couvre la toile, les API audio / vidéo, SVG et WebGl.

Le seul véritable défaut dans ces pages de référence IE Center est le fait qu'ils ne couvrent que le support pour les navigateurs IE. Mais ce n'est pas un gros problème car IE est généralement la principale raison pour laquelle nous recherchons des informations sur le support du navigateur.

Tables de compatibilité ECMAScript par Kangax / Arnott

Si vous recherchez des fonctionnalités ECMascript qui ont été ajoutées depuis ES5, l'une des meilleures ressources est les tables de compatibilité de Juriy "Kangax" Zaytsev et Leon Arnott.

La référence comprend des tableaux couvrant les informations de compatibilité pour les fonctionnalités ES5, ES6, ES7 et non standard.

bonus: vérificateur de compatibilité JavaScript par thijs busser

Il s'agit d'un nouvel outil construit par thijs busser appelé JavaScript Compatibilité Checker (JSCC) qui vous permet de mettre de la pâte ou de télécharger du javascript, puis d'obtenir une analyse du code.

L'outil utilise des informations des tables Kangax et puis-je utiliser , donc l'accent ici semble être sur les nouvelles API et les choses ajoutées dans ES5 et plus tard.

Pour vous montrer comment cela fonctionne, j'ai ajouté du code de cet article MDN sur les travailleurs Web. Remarquez les résultats présentés:

Ici, vous obtenez une ventilation des fonctionnalités utilisées dans le code qui avait des problèmes de compatibilité (c'est-à-dire qu'ils ont moins de 100% de support), et quels navigateurs causent les problèmes.

Je vous avertirai que cet outil est nouveau et pourrait probablement utiliser certaines améliorations. Par exemple, lorsque je colle dans un code qui utilise la propriété de l'ensemble de données, JSCC me dit que le code n'a aucun problème de compatibilité. Mais MDN dit qu'il n'est pas pris en charge dans IE10 ou moins. Cela se produit même si l'ensemble de données est répertorié sur puis-je utiliser, donc les résultats doivent être exacts.

Ainsi, bien que ce ne soit pas un outil complet et infaillible, c'est certainement quelque chose pour garder un œil sur le fait qu'il s'améliore.

en conclusion

Comme mentionné, les tests réels doivent toujours être le principal moyen d'information sur la compatibilité. Et je ne pense pas qu'il y ait une seule source n'importe où qui a des informations complètes de compatibilité des navigateurs pour toutes les fonctionnalités JavaScript et DOM. Mais je pense que les ressources que j'ai énumérées dans ce post peuvent servir d'entité collective sur laquelle vous pouvez compter pour des informations assez précises.

Bien sûr, il y a peut-être eu quelque chose que j'ai manqué. Donc, si vous connaissez une autre source, n'hésitez pas à l'ajouter aux commentaires.

Questions fréquemment posées (FAQ) sur les tables de compatibilité JavaScript DOM

Qu'est-ce qu'une table de compatibilité JavaScript Dom?

Une table de compatibilité des objets de document JavaScript (DOM) est une ressource complète qui fournit des informations sur la compatibilité de diverses technologies Web à travers différents navigateurs Web. Il comprend des détails sur JavaScript, HTML, CSS et d'autres normes Web. Ces tableaux sont cruciaux pour les développeurs car ils les aident à comprendre quelles fonctionnalités sont prises en charge par quels navigateurs, leur permettant d'écrire du code qui fonctionne sur toutes les plates-formes.

Comment utiliser un tableau de compatibilité JavaScript Dom?

L'utilisation d'une table de compatibilité JavaScript Dom est simple. Le tableau est généralement divisé en lignes et colonnes, chaque ligne représentant une fonction ou une propriété spécifique et chaque colonne représentant un navigateur différent. Pour savoir si une fonctionnalité est prise en charge par un navigateur particulier, localisez simplement la fonctionnalité dans la ligne et suivez-la jusqu'à la colonne du navigateur souhaité. Si la cellule est marquée comme prise en charge, cela signifie que le navigateur prend en charge cette fonction moyen rapide et facile de vérifier la compatibilité des différentes technologies Web à travers divers navigateurs. Ceci est crucial car tous les navigateurs ne prennent pas en charge toutes les fonctionnalités, et l'utilisation d'une fonctionnalité qui n'est pas prise en charge par un navigateur particulier peut entraîner des erreurs et une mauvaise expérience utilisateur. En utilisant un tableau de compatibilité, les développeurs peuvent s'assurer que leur code fonctionne correctement sur toutes les plateformes.

Quelle est la différence entre ECMAScript et JavaScript?

ECMAScript est une spécification de langage de script standardisé par ECMA International. JavaScript est un langage de programmation conforme à cette spécification. En d'autres termes, ECMascript sert de plan, et JavaScript est l'une des implémentations de ce plan. D'autres langages comme ActionScript suivent également la spécification ECMAScript.

À quelle fréquence les tables de compatibilité JavaScript Dom sont-elles mises à jour?

La fréquence des mises à jour des tables de compatibilité DOM JavaScript peut varier. Cependant, ils sont généralement mis à jour régulièrement pour refléter les dernières versions des navigateurs Web et les dernières technologies Web. Il est important d'utiliser un tableau de compatibilité fiable et à jour pour garantir des informations précises.

Qu'est-ce que cela signifie lorsqu'une fonctionnalité est marquée comme un «support partiel» dans un tableau de compatibilité?

Support partiel 'dans un tableau de compatibilité signifie que si le navigateur reconnaît la fonctionnalité, il peut ne pas en soutenir tous les aspects, ou il peut le soutenir avec des problèmes connus. Il est conseillé de vérifier les notes ou les détails associés à l'étiquette de «support partiel» pour des informations plus spécifiques.

Comment puis-je contribuer à un tableau de compatibilité JavaScript Dom?

De nombreuses tables de compatibilité DOM JavaScript sont-elles projets open source, ce qui signifie que n'importe qui peut y contribuer. Cela implique généralement de soumettre des données ou des corrections via un processus spécifique, impliquant souvent GitHub. Avant de contribuer, il est important de vous familiariser avec les directives de contribution du projet.

Quel est le site Web «Caniuse»?

Puis-je utiliser »est un site Web populaire qui fournit un navigateur à jour Support Tables pour prendre en charge les technologies Web front-end sur les navigateurs Web de bureau et mobiles. C'est une ressource précieuse pour les développeurs pour vérifier la compatibilité de diverses technologies Web, notamment JavaScript, HTML, CSS, et plus encore.

Quelles sont les alternatives aux tables de compatibilité DOM JavaScript? Les tables de compatibilité sont une ressource précieuse, il existe d'autres moyens de vérifier la compatibilité du navigateur. Il s'agit notamment d'utiliser des outils en ligne comme «puis-je utiliser», de vérifier la documentation officielle de la technologie Web ou d'utiliser la détection des fonctionnalités dans votre code pour déterminer si une fonction Fonctionne sur tous les navigateurs?

Assurer que votre code fonctionne sur tous les navigateurs implique une combinaison d'utilisation de tables de compatibilité DOM JavaScript pour vérifier la prise en charge des fonctionnalités, en utilisant la détection des fonctionnalités dans votre code et des tests approfondis sur différents navigateurs et appareils. Il est également important de se tenir à jour avec les dernières normes Web et les mises à jour du navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!