Google a lancé Chrome 78 pour Windows, Mac, Linux, Android et iOS. Cette version inclut l'API Propriétés et valeurs CSS, l'API Native File System, les nouveaux tests Origin et les améliorations du mode sombre sur Android et iOS. Vous pouvez désormais effectuer la mise à jour vers la dernière version à l'aide du programme de mise à jour intégré de Chrome ou le télécharger directement sur la vitrine de Google.Sur desktop, Chrome se dote d’un nouveau menu de personnalisation. En cliquant sur le bouton « Personnaliser » dans le coin inférieur droit de la page Nouvel onglet, vous accéderez comme toujours à une galerie ou vous pouvez télécharger une image en guise d’arrière-plan. Le navigateur vous laisse désormais choisir dans une palette de couleurs pour un fond uni ou dégradé. Vous pouvez aussi choisir vos raccourcis (les sites qui sont listés sous la barre de recherche de Google) manuellement ou laisser Chrome choisir à votre place en fonction de vos habitudes de navigation.
La version desktop de Chrome 78 dispose désormais du Password Checkup directement intégré. Cet outil scanne directement les identifiants et mots de passe enregistrés dans votre compte Google. Si votre mot de passe a été compromis par des pirates, Google va vous demander de le changer.
Propriétés et valeurs CSS
Les propriétés personnalisées CSS, également appelées variables CSS, vous permettent de définir vos propres propriétés dans CSS et d'utiliser leurs valeurs dans l'ensemble de votre CSS. Bien qu'incroyablement utiles aujourd'hui, elles présentent des lacunes qui peuvent les rendre difficiles à utiliser: elles peuvent prendre n'importe quelle valeur, donc elles peuvent être écrasées par quelque chose d'inattendu, elles héritent toujours de leurs valeurs de leurs parents et vous ne pouvez pas les transformer. Grâce à l'API de niveau 1 Propriétés et valeurs CSS de Houdini, désormais disponible dans Chrome 78, ces lacunes sont transcendées, ce qui confère aux propriétés personnalisées CSS une puissance incroyable!
Qu'est-ce que Houdini ?
Avant de parler de la nouvelle API, parlons rapidement de Houdini. Le groupe de travail CSS-TAG Houdini, mieux connu sous le nom de CSS Houdini ou simplement Houdini, existe pour « développer des fonctionnalités qui expliquent la "magie" du style et de la présentation sur le Web ». La collection de spécifications Houdini est conçue pour accroître la puissance du moteur de rendu du navigateur, permettant à la fois de mieux comprendre nos styles et d'étendre notre moteur de rendu.
Propriétés et valeurs CSS API niveau 1
Le niveau 1 de l'API Propriétés et valeurs CSS (Houdini Props and Vals) nous permet de structurer nos propriétés personnalisées. Voici la situation actuelle lors de l'utilisation de propriétés personnalisées:
| Code CSS : | Sélectionner tout |
1 2 3 | .thing { --my-color: green; } |
Les propriétés personnalisées n'ayant pas de types, elles peuvent être remplacées de manière inattendue. Par exemple, considérons ce qui se passe si vous définissez --my-color avec une URL.
| Code CSS : | Sélectionner tout |
1 2 3 4 | .thing { --my-color: url(‘not-a-color’); color: var(--my-color); } |
Ici, parce que --my-color n'est pas typé, il ne sait pas qu'une URL n'est pas une valeur de couleur valide ! Lorsque nous l'utilisons, il revient aux valeurs par défaut (noir pour la couleur, transparent pour l'arrière-plan). Avec Houdini Props et Vals, les propriétés personnalisées peuvent être enregistrées pour que le navigateur sache ce qu'elles devraient être!
Maintenant, la propriété personnalisée --my-color est enregistrée en tant que couleur! Cela indique au navigateur quels types de valeurs sont autorisés et comment il peut typer et traiter cette propriété.
Google explique que « Houdini fait son bonhomme de chemin pour une adoption par les navigateurs, et avec lui, de nouvelles façons de travailler avec et d'étendre les CSS. Avec l’API Paint déjà livrée et maintenant Custom Props and Vals, notre boîte à outils de création s’étoffe et nous permet de définir des propriétés CSS typées et de les utiliser pour créer et animer de nouveaux modèles intéressants ».
L'API Native File System
La nouvelle API Native File System, permet aux développeurs de créer de puissantes applications Web qui interagissent avec les fichiers du périphérique local de l’utilisateur, tels que les IDE, les éditeurs de photo et de vidéo, les éditeurs de texte, etc. Une fois qu'un utilisateur a accordé l'accès, cette API permet aux applications Web de lire ou d'enregistrer les modifications directement dans les fichiers et les dossiers du périphérique de l'utilisateur. Tout cela en appelant les propres boîtes de dialogue d'ouverture et de sauvegarde de la plateforme. L'image ci-dessous montre une page Web appelée à l'aide de la boîte de dialogue ouverte sur Mac.
Pour montrer la puissance et l'utilité réelle de cette API, Pete LePage, Developer Advocate, a écrit un script qui vous permet d'ouvrir un fichier texte, de le modifier, de sauvegarder les modifications sur le disque ou de lancer un nouveau fichier et de sauvegarder les modifications sur le disque. Bien que cet exemple soit plutôt simpliste, LePage estime qu'il est suffisant pour vous aider à comprendre les concepts.
Lire un fichier du système de fichiers local
Le premier cas d'utilisation qu'il voulait aborder était de demander à l'utilisateur de choisir un fichier, puis de l'ouvrir et de le lire à partir du disque...
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.
