Microsoft Edge adopte Chromium : ce que les concepteurs Web doivent savoir

Internet Explorer de Microsoft est l'un des plus grands mèmes sur Internet. C'est également le fléau de nombreux concepteurs de sites Web, car la technologie nouvellement introduite n'est tout simplement pas prise en charge. Lorsque Microsoft a renommé IE en Microsoft Edge, on espérait que ces jours étaient révolus. Que le navigateur Windows par défaut adopterait facilement les technologies modernes et que le Web aurait une plate-forme convenablement standard. Cela ne s'est pas produit. Cependant, fin 2018, MS a annoncé que cela allait changer : Edge adoptait le moteur Chromium comme base.

Microsoft Edge Chrome ? Quel est le gros problème ?

Au moment d'écrire ces lignes, vous pouvez télécharger une version d'aperçu Edge qui inclut la base Chromium. C'est une base de développement et non destinée à la conduite quotidienne en tant que navigateur, mais pour ceux d'entre vous qui sont impatients de se débarrasser de l'Edge existant, vous le pouvez. C'est très nu dans les premiers stades, cependant. Au cours de l'année 2019, le navigateur OEM sera mis à jour normalement pour inclure Chromium.

C'est super tout ça. Mais quel est le problème, demandez-vous? Eh bien, la réponse à cette question est triple.

1. Microsoft adopte l'Open Source

Récemment, nous avons vu de multiples indications que Microsoft est passé du modèle propriétaire du passé au domaine des logiciels open source. Ils ont évolué dans cette direction depuis qu'ils ont acheté GitHub et commencé à améliorer l'éditeur de code Atom, et peut-être plus important encore avec la sortie de Visual Studio Code, probablement l'éditeur le plus populaire parmi les développeurs de nos jours. De plus, leur IDE Visual Studio a été publié en téléchargement gratuit, si VS Code n'est pas assez puissant pour vous.

L'ajout d'Edge dans l'arène open source ne fera qu'aboutir à un produit plus puissant pour les consommateurs. Microsoft l'a très bien exprimé dans cette déclaration.

Nous avons également commencé à apporter des contributions à Chromium dans des domaines tels que l'accessibilité, le toucher, ARM64 et d'autres. Notre plan est de continuer à travailler dans Chromium plutôt que de créer un projet parallèle. Nous travaillons directement avec les équipes de Google, et nous sommes impatients de travailler encore plus avec la communauté open source.

Il est agréable d'entendre que Microsoft travaille avec Google sur Chromium au lieu de le forger à ses propres fins. Et au fur et à mesure que le projet avance, Chromium et la conception Web dans son ensemble deviendront plus robustes et plus ouverts.

2. Moins de fragmentation, plus de fonctionnalités

Comme nous l'avons mentionné ci-dessus, Edge adoptant Chromium apportera enfin des fonctionnalités et une technologie auparavant exclues du navigateur. Pour l'utilisateur, cela signifie une meilleure expérience sur presque tous les sites Web, car les choses fonctionneront simplement au lieu de recevoir des messages d'erreur ou des plantages. Pour les développeurs, cela signifie encore une fois que leur travail ne plantera pas sur les utilisateurs, mais aussi que leur temps peut être mieux dépensé sur de nouveaux projets et de meilleurs produits plutôt que de bricoler et de mettre en place des solutions de piratage pour faire fonctionner les choses sur IE/Edge.

Ce genre de chose est exactement la raison pour laquelle nous obtenons la mise à niveau de Microsoft Edge Chromium. Ils ont déclaré spécifiquement que leur objectif était de « créer une meilleure compatibilité Web pour nos clients et moins de fragmentation du Web pour tous les développeurs Web ».

La réduction de la fragmentation signifie simplement une utilisation plus cohérente du Web. Cela signifie également que les utilisateurs peuvent (espérons-le) utiliser des extensions et des modules complémentaires sans (beaucoup) de travail supplémentaire de la part des développeurs.

Nous nous assurons qu'ils verront la même compatibilité dans le navigateur Edge sans travail supplémentaire.

Cette nouvelle est importante pour les personnes qui souhaitent avoir la possibilité de ne pas utiliser Chrome en raison de problèmes de sécurité et de manque de confidentialité. Ces personnes veulent toujours avoir la meilleure et la plus cohérente expérience possible sur le Web. Étant donné que la fragmentation est minimale, la sécurité augmente car la probabilité que des bogues et des vulnérabilités soient spécifiques à la plate-forme diminue considérablement.

3. Les concepteurs de sites Web se libèrent

Jusqu'à cette version, les concepteurs de sites Web étaient limités de plusieurs manières. Alors que beaucoup d'entre vous ont travaillé leur magie sans nécessairement se limiter à l'IE, les visiteurs de vos clients pourraient très facilement limiter les portées de votre projet.

Points clés à retenir pour les concepteurs et développeurs Web

Le monde du développement et de la conception Web s'ouvre beaucoup avec l'adoption de Chromium, et nous voulons mentionner quelques-unes des choses ouvertes dont vous pourrez profiter sans avoir à créer de solutions de contournement ou éviter complètement. CSS-Tricks a un aperçu exhaustif de ce à quoi les développeurs front-end peuvent s'attendre, mais ce ne sont là que quelques-uns des points saillants.

CSS Works en arrière-plan

Les dégradés et les duotones sont assez chauds et à la mode en ce moment. Et l'un des moyens les plus simples de les utiliser est le CSS en mode fusion d' arrière-plan . Jusqu'à cette version Chromium d'Edge, l'effet ne serait tout simplement pas rendu sur les navigateurs Microsoft. Quelle que soit l'image que vous mélangez, elle sera plutôt en couleur et ruinera probablement toute l'ambiance vers laquelle vous vous fondiez. Ce n'est plus un problème. Si vous utilisez des constructeurs de pages comme Divi, vous serez heureux de savoir que les effets de mélange qu'ils contiennent seront également rendus, vous n'aurez donc pas à creuser dans les feuilles de style à moins que vous ne le vouliez absolument.

Edge Comprendre les codes de couleur hexadécimaux avec transparence (enfin)

Il ne s'agit donc pas tant d'une nouvelle fonctionnalité étonnante que d'une amélioration globale de la qualité de vie. Et pour certaines personnes, cela peut ne pas avoir d'importance du tout. Ces personnes étant des personnes qui ne craignent pas d'écrire les couleurs en rgba (255, 255, 255, .45) au lieu de #ffffff45 . Si vous (comme beaucoup de gens) préférez les couleurs hexagonales, vous avez de la chance. Vous pourrez enfin commencer à utiliser le style que vous aimez et garder vos feuilles de style organisées et bien rangées.

Fondamentalement, vous pouvez inclure la transparence en hexadécimal qui s'affiche dans Edge avec ce changement (notez le 45 à la fin de l'exemple ci-dessus, indiquant une transparence de 45%), ce qui signifie qu'il n'y a plus de CSS à mélanger. Comme nous l'avons dit, c'est une caractéristique de qualité de vie.

l'orientation du texte et le mode d'écriture CSS seront rendus

La technologie CSS avancée n'a jamais été le point fort d'Edge. En fait, ce n'était même pas son point faible. Ce n'était pas du tout dans le placard d'Edge. Si vous êtes le genre de développeur qui souhaite tirer parti d'un CSS avancé qui va au-delà même de ce que les constructeurs de pages comme Divi peuvent faire (et ce n'est pas grand-chose, il est vrai), vous êtes toujours frustré par Microsoft Edge et Internet Explorer. Parce qu'ils ne fonctionneront tout simplement pas avec certains trucs. C'est du passé maintenant que Chromium est sous le capot, et l'un de nos effets préférés (enfin, deux d'entre eux, techniquement) est text-orientation/writing-mode .

Nous avons fait un article il y a quelque temps sur le texte latéral et vertical. Jusqu'à cette mise à jour, le code suivant (et donc l'effet dans la publication) était impossible à afficher dans Edge.

.sideways-text {
transform: rotate(90deg); /* makes entire paragraphs and lines rotate sideways */
}
 
.vertical-yellow {
text-orientation: upright; /* makes individual characters stand upright, not whole lines like transform: rotate */
writing-mode: vertical-lr; /* continues left-to-right at line break */
color: yellow;
font-size:2rem; /* this will make the body text twice the relative size of the default set for the whole site */
line-height: 200%; /* line height is VISUALLY line-width when it's vertical */
text-transform: uppercase;
font-family: monospace; /* this just pretties up the whole deal, making all characters the same width */
}
 
.vertical-white {
text-orientation: upright;
writing-mode: vertical-lr;
color: white;
font-size:2rem;
line-height: 200%;
text-transform: uppercase;
font-family: monospace;
}

Réjouissons-nous que ce genre d'effets et de technologies avancées ne soient plus bloqués par les pouvoirs en place.

Importation et extensions de favoris standard

Oui, tu l'as bien lu. Edge prendra en charge les extensions. Et Edge pourra importer vos favoris depuis Chrome en un seul clic. Non seulement cela facilite l'échange si vous envisagez de le faire, mais cela vous donne également accès aux mêmes outils puissants que vous utilisez déjà.

Un certain nombre de concepteurs de sites Web utilisent des extensions pour se faciliter la vie. Peut-être que c'est un compte-gouttes de couleur pour que vous puissiez saisir l'hexagone de cette couleur parfaite sur un site Web (que vous pouvez maintenant utiliser dans Edge, aussi !), ou une règle pour obtenir la bonne taille ou un outil de saisie de police. Peut-être que vous avez tout installé sur cette liste et que vous ne voulez pas quitter Chrome simplement à cause de cela.

Eh bien, maintenant vous pouvez.

Car même si Edge est basé sur Chromium, ce n'est pas Chrome . C'est toujours un produit Microsoft, et cela signifie que vous obtiendrez la qualité des logiciels sur lesquels ils ont bâti leur réputation. Pas le représentant toujours dans le milieu de gamme de Google.

Enregistrer des sites Web au format HTML

Jusqu'à la mise à niveau de Chromium, vous ne pouviez pas enregistrer les pages Web au format HTML. Le menu contextuel du clic droit était… limité, pour le moins.

Avec le moteur Chromium, ce n'est plus le cas. Vous obtenez enfin un vrai menu contextuel.

Appuyez simplement sur « Enregistrer sous… » et vous pouvez obtenir une copie locale de ce site pour vérifier et jouer avec afin que vous puissiez vous assurer que chaque élément est exactement comme il devrait être.

En parlant d'éléments comme ils devraient être…

Edge permet enfin l'inspection des pages

C'est le grand pour les concepteurs de sites Web. Travailler dans Edge était auparavant presque impossible, non pas à cause d'un manque de prise en charge des fonctionnalités (bien que cela compte beaucoup), mais parce que vous ne pouviez pas creuser sous le capot et inspecter les éléments individuels pour déboguer et résoudre les problèmes. Vous ne pouviez pas très bien modifier et affiner votre travail car vous ne pouviez pas accéder facilement à votre travail.

Ce n'est plus le cas. Alors les concepteurs de sites Web se réjouissent. Vous pouvez enfin utiliser la console JS, jouer avec les feuilles de style CSS et pousser et pousser les éléments jusqu'à ce que vous en ayez envie.

La navigation privée est là

Presque tous les navigateurs vous permettent d'exécuter des pages dans une fenêtre privée propre et sans historique. Sauf pour Edge. Encore une fois, avec Chromium, les concepteurs pourront ouvrir leur travail et voir comment il est rendu aux utilisateurs sans se déconnecter, effacer les caches et les cookies et franchir une douzaine de cercles. Nous avons maintenant accès aux fenêtres InPrivate qui sont fonctionnellement identiques aux onglets Incognito de Chrome. Faites un clic droit et vous y êtes.

Être capable de tester immédiatement un design épuré est impératif pour les concepteurs de sites Web qui ont besoin de perfectionner leur pixel de travail. Cette fonctionnalité empêche de nombreux concepteurs de travailler dans Edge en particulier, car il est trop difficile de ne pas utiliser de fenêtre privée. Si vous êtes le genre de concepteur qui en ouvre des dizaines et des dizaines chaque jour, vous serez peut-être surpris de voir à quel point Edge s'intègre bien dans votre flux de travail.

Et bien plus

Ce ne sont que la pointe de l'iceberg. Et ce n'est qu'un petit échantillon des fonctionnalités auxquelles l'intégration de Chromium dans Edge donnera accès aux concepteurs de sites Web.

• flat() et flatMap() seront pris en charge dans Edge
• les modules JavaScript dynamiques peuvent être importés (enfin)
• styliser le texte d'espace réservé avec CSS
• display : le contenu est désormais disponible pour les utilisateurs de grille CSS et de flexbox
• TextEncoder et TextDecoder rendront l'affichage des flux en direct bien meilleur

En gros, pensez-y comme ceci : tout ce que Chrome peut faire, Edge peut le faire aussi . N'est-ce pas une pensée merveilleuse?

Fonctionnalités spécifiques à Microsoft Edge Chromium

Microsoft ne se contente pas de prendre Chromium et de remplacer Edge par celui-ci. Ils y ajoutent également leurs propres fonctionnalités.

1. Sécurité Chrome

Les utilisateurs seront assurés d'être protégés par les mêmes types de mesures de sécurité que les utilisateurs de Chrome (en particulier ceux via des extensions). En outre, Microsoft introduit une suite de nouvelles mesures de sécurité et de bloqueurs de suivi pour le navigateur. Les utilisateurs pourront définir leur propre niveau de protection préféré, de zéro à un verrouillage très strict. Microsoft dit vouloir rendre la protection de votre vie privée claire et simple pour les utilisateurs. De nombreuses solutions de sécurité semblent trop compliquées pour les utilisateurs, et avec l'omniprésence d'Edge, c'est une bonne étape à franchir.

2. Nouvelles collections

De plus, la base Chromium permettra à MS d'introduire une fonctionnalité qu'ils appellent « Collections » qui permettra aux utilisateurs de collecter (évidemment) du contenu sur Internet, y compris du texte et des images, afin qu'ils puissent le partager et le conserver. Ils utilisent la base Chromium pour garder les sources du matériel à portée de main, ainsi que pour exporter dans la suite MS Office et maintenir la structure des données pour une manipulation ultérieure.

3. Émulation IE

Et puis il y a la pièce de résistance : un émulateur Internet Explorer intégré. Oui, vous avez bien lu. Le nouveau Microsoft Edge Chromium aura IE intégré. Cela peut sembler un peu en arrière, mais c'est en fait une chose de beauté. Avec le passage à Chromium, Edge s'affranchit des limitations d'IE, permettant aux développeurs et aux utilisateurs d'avoir une meilleure expérience à l'avenir. Mais ces anciens sites spécialement conçus pour IE ? Eh bien, ceux-ci se briseraient. Et IE est encore utilisé par de nombreuses entreprises, donc avoir un émulateur interne pour rendre ces applications et pages signifie que les entreprises n'auront pas à hésiter à mettre à niveau car il n'y aura pas de rupture dans leur flux de travail ou leurs services (ou besoin de formation supplémentaire ou mises à niveau - encore). C'est une touche vraiment brillante de la part de l'équipe de transition.

L'avenir est prometteur

Nous espérons qu'il y aura un jour dans un proche avenir où un navigateur Microsoft ne sera pas la cible des blagues. Nous voulons vraiment que ce passage au moteur Chromium soit un succès et contribue à inaugurer une ère de standardisation sur le Web. Ce sera bon pour les utilisateurs, les concepteurs et les développeurs, et s'il est géré correctement (ce qui semble être le cas), Internet pourrait s'ouvrir à beaucoup de gens à cause de cette transition. Et cela pourrait aussi rendre la vie de nombreux designers beaucoup plus facile.

Que pensez-vous de Microsoft Edge Chromium ?

Article présenté en image par ProStockStudio / shutterstock.com