5 façons de préparer votre site pour Microsoft Edge et d'autres navigateurs modernes

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..

1. Mettez à jour vos bibliothèques JavaScript

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..     

2. Évitez les préfixes CSS

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..

3. Évitez la détection du navigateur

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»..

4. Devenir sans plugin

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..

5. Assurer le mode de rendu de bord

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.

Ressources

  • Annonce des dernières améliorations pour les outils de développement F12 dans Windows 10
  • Sessions techniques sur notre nouveau navigateur, Microsoft Edge
  • Conférences sur le développement Web de Build 2015

Plus de pratique avec JavaScript

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:

  • Analysez votre site pour rechercher des bibliothèques obsolètes, des problèmes de mise en page et d'accessibilité
  • Utiliser des machines virtuelles pour Mac, Linux et Windows
  • Testez à distance Microsoft Edge sur votre propre appareil
  • Coding Lab sur GitHub: Tests multi-navigateurs et meilleures pratiques

Apprentissage technologique approfondi sur Microsoft Edge et la plate-forme Web auprès de nos ingénieurs et évangélistes:

  • Microsoft Edge Web Summit 2015 (à quoi s'attendre avec le nouveau navigateur, les nouvelles normes de plate-forme Web prises en charge et les conférenciers invités de la communauté JavaScript)
  • Woah, je peux tester Edge et IE sur un Mac & Linux! (de Rey Bango)
  • Faire progresser JavaScript sans rompre le Web (de Christian Heilmann)
  • Le moteur de rendu Edge qui permet au Web de fonctionner correctement (de Jacob Rossi)
  • Libérez le rendu 3D avec WebGL (de David Catuhe, y compris les projets Vorlon.js et Babylon.js)
  • Applications Web hébergées et innovations de plate-forme Web (de Kevin Hill et Kiril Seksenov, y compris le projet manifoldJS)

Plus d'outils et de ressources multi-plateformes gratuits pour la plate-forme Web:

  • Code Visual Studio pour Linux, Mac OS et Windows
  • Code With Node.js et essai gratuit sur Azure