Boostez votre CSS avec les Worklets de peinture Houdini en quelques clics.
CSS Houdini est un terme générique qui décrit une série d'API de navigateur de bas niveau qui donnent aux développeurs beaucoup plus de contrôle et de maîtrise sur les styles qu'ils écrivent.
Houdini permet d'utiliser un CSS plus sémantique avec le modèle d'objet typé. Les développeurs peuvent définir des propriétés CSS personnalisées avancées avec une syntaxe, des valeurs par défaut et un mécanisme d'héritage via l'API Properties and Values.
Il inclut également des worklets de peinture, de mise en page et d'animation, qui ouvrent un monde de possibilités, en permettant aux auteurs de se focaliser plus facilement sur le processus de style et de mise en page du moteur de rendu du navigateur.
Comprendre les Worklets Houdini
Les Worklets Houdini sont des instructions de navigateur qui s'exécutent à partir du thread principal et peuvent être appelées en cas de besoin. Les Worklets vous permettent d'écrire du code CSS modulaire pour effectuer des tâches spécifiques. L'importation et l'enregistrement nécessitent une seule ligne de code JavaScript. Tout comme les service workers pour le style CSS, les worklets Houdini sont enregistrés dans votre application. Une fois enregistrés, ils peuvent être utilisés dans votre CSS par leur nom.
Écrire le fichier de worklet Enregistrer le module de worklet (CSS.paintWorklet.addModule(workletURL)) Utiliser le worklet (background: paint(confetti))
Implémenter vos propres fonctionnalités avec l'API CSS Painting
L'API CSS Painting en est un exemple. Elle permet aux développeurs de définir des fonctions de peinture personnalisées de type canevas qui peuvent être utilisées directement dans CSS en tant qu'arrière-plans, bordures, masques, etc. Il existe de nombreuses possibilités d'utiliser CSS Paint dans vos propres interfaces utilisateur.
Par exemple, au lieu d'attendre qu'un navigateur implémente une fonction de bordure inclinée, vous pouvez écrire votre propre worklet Paint ou utiliser un worklet publié existant. Ensuite, au lieu d'utiliser le paramètre "Border Radier", appliquez ce worklet aux bordures et au rognage.
.angled {
--corner-radius: 15 0 0 0;
--paint-color: #6200ee;
--stroke-weight: 0;
/* Mask every angled button with fill mode */
-webkit-mask: paint(angled-corners, filled);
}
.outline {
--stroke-weight: 1;
/* Paint outline */
border-image: paint(angled-corners, outlined) 0 fill !important;
}
L'API CSS Painting est actuellement l'une des API Houdini les mieux prises en charge, sa spécification étant une recommandation de candidat W3C. Elle est actuellement activée dans tous les navigateurs basés sur Chromium, partiellement compatible avec Safari et envisagée pour Firefox.
Mais même sans une compatibilité de navigateur complète, vous pouvez toujours laisser libre cours à votre créativité avec l'API Houdini Paint et voir vos styles s'adapter à tous les navigateurs récents grâce à CSS Paint Polyfill. Mon équipe a créé le site houdini.how pour présenter quelques implémentations uniques, ainsi que pour fournir une bibliothèque de ressources et de Worklets.
Houdini.how
Houdini.how est une bibliothèque et une référence pour les Worklets et ressources Houdini. Vous y trouverez tout ce que vous devez savoir sur CSS Houdini: prise en charge du navigateur, présentation de ses différentes API, informations sur l'utilisation, ressources supplémentaires et exemples de Worklet de peinture en direct. Chaque exemple disponible sur Houdini.how repose sur l'API CSS Paint, ce qui signifie qu'ils fonctionnent tous sur tous les navigateurs récents. Essayez !
Utiliser Houdini
Les Worklets Houdini doivent être exécutés via un serveur en local ou en production via HTTPS. Pour travailler avec un worklet Houdini, vous devez l'installer localement ou utiliser un réseau de diffusion de contenu (CDN) tel que unpkg pour diffuser les fichiers. Vous devez ensuite enregistrer le worklet localement.
Il existe plusieurs façons d'inclure les Worklets de présentation Houdini.how dans vos propres projets Web. Ils peuvent être utilisés via un CDN à des fins de prototypage, ou vous pouvez gérer les Worklets vous-même à l'aide de modules npm. Dans tous les cas, vous devez également inclure le polyfill de peinture CSS pour vous assurer qu'il est compatible avec plusieurs navigateurs.
1. Prototypage avec un CDN
Lors de l'enregistrement à partir de unpkg, vous pouvez créer un lien direct vers le fichier worklet.js sans avoir à installer localement le worklet. Unpkg est associé au fichier worklet.js en tant que script principal, ou vous pouvez le spécifier vous-même. Unpkg ne pose pas de problèmes CORS, car il est diffusé via HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Notez que les propriétés personnalisées pour la syntaxe et les valeurs de remplacement ne sont pas enregistrées. Au lieu de cela, ils comportent chacun des valeurs de remplacement intégrées dans le worklet.
Si vous souhaitez enregistrer les propriétés personnalisées, incluez également le fichier properties.js.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
Pour inclure le polyfill de peinture CSS avec unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Gérer des Worklets via NPM
Installez votre worklet à partir de npm:
npm install <package-name>
npm install css-paint-polyfill
L'importation de ce package n'injecte pas automatiquement le worklet de peinture. Pour installer le worklet, vous devez générer une URL qui se résout au fichier worklet.js du package, puis l'enregistrer. Pour ce faire:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Le nom et le lien du package npm se trouvent sur chaque fiche de Worklet.
Vous devez également inclure le polyfill de peinture CSS via un script ou l'importer directement, comme vous le feriez avec un framework ou un bundler.
Voici un exemple d'utilisation d'Houdini avec le polyfill de peinture dans des bundlers modernes:
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';
CSS.paintWorklet.addModule(workletURL);
Contribuer
Maintenant que vous vous êtes familiarisé avec quelques exemples Houdini, c'est à votre tour d'apporter votre contribution ! Houdini.how n'héberge aucun worklets, mais présente le travail de la communauté. Si vous souhaitez envoyer un worklet ou une ressource, consultez le dépôt GitHub qui contient des instructions pour les contributions. Nous avons hâte de découvrir vos idées !