Hier, Google a amorcé la diffusion de la version stable de Chrome 69 sur les plateformes Windows, MacOS, Linux et Android. Cette version inclut un nouveau design, une version omnibox plus puissante, un gestionnaire de mots de passe mis à jour, un remplissage automatique plus précis, de nombreuses modifications spécifiques aux développeurs et de nombreuses améliorations en matière de sécurité.Nouveau design
Le nouveau look de Chrome, basé sur les principes de Material 2, inclut des formes plus arrondies, des icônes mises à jour et une nouvelle palette de couleurs. Les invites et les menus ont été simplifiés, tandis que les onglets sont désormais conçus pour rendre les icônes du site plus faciles à voir. La conception Material 2 s’applique aussi bien à la version desktop que la version mobile et sur iOS, la réorganisation inclut le déplacement de la barre d’outils vers le bas afin qu’elle soit facilement accessible.
Une omnibox plus puissante
En parlant de la barre d'adresse de Chrome, que Google appelle l'omnibox, elle peut désormais afficher vos réponses directement. Elle fournit des résultats riches sur des questions relatives à des personnalités, des événements sportifs, la météo, etc. Si vous recherchez un site Web dans votre omnibox, Chrome peut désormais vous dire s’il est déjà ouvert et vous permettre d’y accéder directement en cliquant sur « Passer à l’onglet ».
Une amélioration du remplissage automatique
Chrome 69 peut également saisir plus précisément vos mots de passe, adresses et numéros de carte de crédit. Toutes ces informations sont enregistrées sur votre compte Google, directement depuis la barre d’outils Chrome. Le gestionnaire de mots de passe de Chrome a également été amélioré : lorsque vient le moment de créer un nouveau mot de passe, la version desktop de Chrome peut désormais générer un mot de passe unique, l’enregistrer et le rendre disponible sur votre ordinateur portable et votre téléphone.
Chrome 69 poursuit également la guerre de Google contre les sites HTTP.
HTTPS est une version plus sécurisée du protocole HTTP utilisé sur Internet pour connecter les utilisateurs aux sites Web. Les connexions sécurisées sont largement considérées comme une mesure nécessaire pour réduire le risque que les utilisateurs soient vulnérables à l'injection de contenu (ce qui peut entraîner des écoutes, des attaques de type intermédiaire et d'autres modifications de données). Les données sont sécurisées par des tiers dans l’optique de rassurer les utilisateurs sur le fait qu’ils communiquent avec le site Web approprié.
Google pousse le Web vers HTTPS depuis des années, mais il a accéléré ses efforts l’année dernière en apportant des modifications à l’interface utilisateur de Chrome. Chrome 56, publié en janvier 2017, a commencé à marquer les pages HTTP qui collectent les mots de passe ou les cartes de crédit comme «Non sécurisé». Chrome 62, publié en octobre 2017, a commencé à marquer ainsi les sites HTTP avec des données saisies. Chrome 68, publié en juillet, a marqué tous les sites HTTP comme étant «non sécurisé» dans la barre d’adresse.
Google ne s'arrête pas là. Maintenant, avec la sortie de Chrome 69, les sites HTTPS ne portent plus le libellé «sécurisé»:
Avec la sortie de Chrome 70, lorsqu’un internaute se rendra sur un site HTTP et qu’il va entrer des données (indépendamment de leurs natures - identifiants, numéro de carte de crédit, etc.), il verra un avertissement rouge avec le libellé «Non sécurisé».
Côté développeurs
Chrome s’accompagne également de plusieurs fonctionnalités CSS.
Prise en charge des encoches d'affichage
Les encoches d'affichage sont désormais prises en charge dans Chrome via la nouvelle fonction CSS env () (variables d'environnement) et la balise meta viewport-fit. Cela permet aux développeurs de tirer parti de l'intégralité de l'écran sur les périphériques dotés d'une encoche d’affichage.
Par exemple, pour indiquer au navigateur de se développer dans la zone d’encoche d'affichage, le site doit définir la propriété viewport-fit dans la balise META de viewport à couvrir. Le site peut ensuite utiliser les variables d'environnement CSS de la zone sécurisée pour mettre en page leur contenu sans qu’il ne soit superposé à l’encoche.
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 | <meta name="viewport" content="viewport-fit: cover" /> <style> #box { margin-top: env(safe-area-inset-top); margin-left: env(safe-area-inset-left); margin-bottom: env(safe-area-inset-bottom); margin-right: env(safe-area-inset-right); } </style> <div id=box></div> |
Une image sur un téléphone disposant d’une encoche d’affichage
Étant donné qu’un nombre croissant d'appareils mobiles sont sortis avec une encoche d'affichage, les applications natives seront en mesure de profiter de l'expansion dans la zone de découpe. L'ajout d'un support d’encoche d'affichage à la plate-forme Web permettra aux sites d'offrir une expérience comparable à celle d'une application native sur ces appareils.
Gradients coniques
Les gradients coniques CSS (angulaire / balayage) permettent des transitions de couleur autour d'un centre plutôt que de rayonner à partir de celui-ci. Cela permet, par exemple, de créer une roue de teinte en utilisant seulement deux propriétés CSS comme vous pouvez le voir ci-dessous.
Canvas
OffscreenCanvas est une nouvelle interface qui permet d'utiliser les contextes de rendu 2D et WebGL dans Workers. Cela augmente le parallélisme dans les applications Web et améliore les performances sur les systèmes multicœurs.
Chrome prend désormais en charge DedicatedWorker.requestAnimationFrame (), ce qui permet de déclencher les événements de type animation sur les Workers dédiés comme dans Windows. Par exemple:
| Code javascript : | Sélectionner tout |
1 2 3 | const offscreenCanvas = new OffscreenCanvas(100, 100); const ctx = offscreenCanvas.getContext("2d"); ctx.fillRect(0, 0, 10, 10); |
Ou avec Canvas
| Code javascript : | Sélectionner tout |
1 2 3 4 | const canvasElement = document.getElementById("mycanvas") const offscreenCanvas = canvasElement.transferControlToOffscreen(); const ctx = offscreenCanvas.getContext("2d"); ctx.fillRect(0, 0, 10, 10); |
Dans un Worker
| Code javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 | self.onmessage = function(ev) { const offscreenCanvas = ev.data; const ctx = offscreenCanvas.getContext("2d"); let x = 0; const draw = function() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillRect(x, 0, 10, 10); x = (x + 1) % ctx.canvas.width; requestAnimationFrame(draw); }; draw(0); } |
Page principale
| Code javascript : | Sélectionner tout |
1 2 3 4 | const worker = new Worker("worker.js"); const offscreenCanvas = document.getElementById("canvas").transferControlToOffscreen(); worker.postMessage(offscreenCanvas, [offscreenCanvas]); |
API JavaScript
JavaScript a plusieurs nouvelles API:
- l'API ReportingObserver fournit une fonction de rappel JavaScript invoquée en réponse aux dépréciations et aux interventions du navigateur. Le rapport peut être sauvegardé, envoyé au serveur ou manipulé à l'aide de JavaScript arbitraire. Cette fonctionnalité est conçue pour permettre aux développeurs de mieux comprendre le fonctionnement de leurs sites sur des périphériques réels.
- les tableaux JavaScript obtiennent deux nouvelles méthodes. Array.prototype.flat () renvoie un nouveau tableau avec tous les éléments du sous-tableau concaténés en récursif jusqu'à la profondeur spécifiée. Les éléments du sous-tableau deviennent membres du nouveau tableau. Array.prototype.flatMap () mappe d'abord chaque élément à l'aide d'une fonction de mappage, puis porte le résultat dans un nouveau tableau. Cette méthode est fonctionnellement équivalente à une carte suivie par l'appel de flat () avec une profondeur de 1.
API Keyboard Map
Certaines applications telles que les jeux attribuent des fonctions spécifiques à des clés physiques spécifiques. Lorsque l'interface fait référence à ces clés, elle doit afficher soit le caractère affiché sur la touche, qui varie en fonction des paramètres régionaux, soit le caractère attribué à la touche par une disposition de clavier différente qui peut avoir été installée par l'utilisateur. En raison de ces variations de disposition, il est parfois possible que le caractère affiché dans l'interface ne fasse pas référence à la clé physique voulue.
Cette nouvelle API fournit un moyen de traduire les valeurs KeyboardEvent.code représentant les clés physiques en chaînes correctes pour l'affichage à l'utilisateur.
Google Chrome 69.0.3497.23 est maintenant disponible en téléchargement sur GNU / Linux, macOS et Microsoft Windows si vous voulez essayer les nouvelles fonctionnalités et améliorations. Il ne faut pas oublier que le logiciel est en version bêta et qu'il n'est donc pas recommandé pour une utilisation en production.
Télécharger Chrome 69 (Windows, MacOS, Linux)Source : Google
Et vous ?
Quelles sont les améliorations qui vous intéressent le plus ? 
