Edge est le nouveau navigateur Web de Microsoft doté d’un nouveau moteur de rendu, EdgeHTML, et d’un système d’exploitation sous-jacent pour démarrer Windows 10. Les mises à niveau à partir de Windows 7, 8 et 8.1 étant gratuites pour la plupart, vous pouvez vous attendre à un afflux considérable d’utilisateurs Edge sur les sites. Dans les mois à venir.
Edge est un départ du passé, en réalité une réécriture complète des versions antérieures d’Internet Explorer, et je suis sûr que de nombreux développeurs Web apprécieront cela. Dans cet esprit, je souhaitais partager cinq manières de préparer votre site pour une interopérabilité Web moderne et de tester Microsoft Edge en parallèle..
Les bibliothèques communes telles que jQuery sont souvent mises à jour pour traiter les bogues lors de la publication des nouvelles versions du navigateur. En mettant simplement à jour vos infrastructures JS, vous évitez de nombreux problèmes de compatibilité avec Edge..
Lors de notre recherche interne, nous avons constaté que 57% des 20 000 sites les plus importants utilisent des infrastructures JavaScript dont les problèmes ont été résolus dans les versions les plus récentes de la même bibliothèque. Vous pouvez utiliser l'analyseur de site pour déterminer si vous utilisez des infrastructures JavaScript obsolètes sur vos sites..
Les préfixes CSS sont utilisés par les éditeurs de navigateurs pour implémenter de nouvelles fonctionnalités CSS émergentes avant leur ratification complète par le W3C. Si un fournisseur implémente un préfixe CSS, il ressemblera à l'exemple ci-dessous (il s'agit d'une implémentation spécifique à IE de la fonctionnalité 'trait d'union' pour séparer le texte sur plusieurs lignes):
-ms-traits d'union: auto;
Il est très courant que des sites aient des préfixes spécifiques à un fournisseur manquants ou qu'ils implémentent des préfixes spécifiques à un fournisseur lorsqu'ils ne sont pas obligatoires dans les propriétés CSS communes. Cela peut entraîner un rendu incorrect de la page Web dans Microsoft Edge ou d'autres navigateurs modernes..
Les fournisseurs de navigateurs utilisent beaucoup moins les préfixes à présent en raison des problèmes de gestion qui leur sont associés. Certains navigateurs, y compris Microsoft Edge, utilisent rarement, voire jamais, de préfixes..
Dans la mesure du possible, évitez d'utiliser des préfixes spécifiques au fournisseur. Cependant, si vous devez absolument utiliser les préfixes du fournisseur, utilisez Grunt PostCSS pour automatiser la gestion des préfixes dans votre code CSS..
Certaines pages Web utilisent des techniques de détection de navigateur pour déterminer le rendu de la page Web dans de nombreuses versions de navigateurs. Nous vous recommandons d'utiliser la détection de fonctionnalités, une pratique qui détermine d'abord si un navigateur ou un périphérique prend en charge une fonctionnalité spécifique, puis choisit la meilleure expérience de rendu sur la base de ces informations..
La détection de fonctionnalités est une excellente alternative à la détection de navigateur et est couramment utilisée via les bibliothèques JavaScript populaires telles que Modernizr, ou via le code de détection de fonctionnalités. La détection de fonctionnalités est souvent utilisée avec Polyfills pour implémenter des fonctionnalités modernes dans des navigateurs plus anciens qui ne les prennent pas en charge de manière native..
Pour plus de détails sur l'utilisation de Modernizr, Polyfills et d'autres techniques de compatibilité, voir l'article de Martin Kearn intitulé «Régler, moderniser et optimiser votre site Web»..
Edge ne prend pas en charge les plugins, c'est donc le bon moment pour réfléchir à la façon de s'éloigner des plugins propriétaires tels que Flash et Silverlight. Edge prend en charge Flash, mais plutôt que d'utiliser une architecture de plug-in, Flash est fourni avec le navigateur et mis à jour et corrigé de manière centralisée par l'équipe Edge en collaboration avec Adobe..
Pour certains sites, s'éloigner des plugins est assez simple. Cependant, de nombreux sites trouveront cela difficile, en particulier ceux qui fournissent du contenu multimédia. L'équipe Edge a fourni des conseils sur la migration du contenu Premium vers HTML sur le blog Edge..
Si la directive est manquante ou ne spécifie pas un type de document basé sur des normes, Edge peut afficher de manière incorrecte votre page. Le scanner effectue un test simple pour déterminer si votre site est configuré correctement. Entrez donc l'URL de votre site et recherchez-le rapidement s'il passe. Si vous voulez voir à quoi ressemble le test, vous pouvez voir le code du scanner sur GitHub.
Cet article fait partie de la série de projets de développement Web rédigés par des spécialistes de la technologie Microsoft sur l'apprentissage pratique de JavaScript, les projets open source et les meilleures pratiques d'interopérabilité, y compris le navigateur Microsoft Edge et le nouveau moteur de rendu EdgeHTML..
Nous vous encourageons à tester tous les navigateurs et périphériques, y compris Microsoft Edge - le navigateur par défaut pour Windows 10 - avec des outils gratuits sur dev.modern.IE:
Apprentissage technologique approfondi sur Microsoft Edge et la plate-forme Web auprès de nos ingénieurs et évangélistes:
Plus d'outils et de ressources multi-plateformes gratuits pour la plate-forme Web: