Propriétés et valeurs CSSLes 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, actuellement en phase d’essai, 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.
Si vous souhaitez expérimenter localement l'API API Native File System, activez l'indicateur #native-file-system-api dans chrome://flags.
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...
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.
