Vous pouvez optimiser votre CSS avec des 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 offrent aux développeurs un contrôle et une puissance beaucoup plus importants sur les styles qu'ils écrivent.
Houdini permet un CSS plus sémantique avec le modèle d'objet typé. Les développeurs peuvent définir des propriétés personnalisées CSS avancées avec une syntaxe, des valeurs par défaut et un héritage via l'API Properties and Values.
Il introduit également des worklets de peinture, de mise en page et d'animation, qui ouvrent un monde de possibilités en permettant aux auteurs de s'intégrer plus facilement au processus de stylisation et de mise en page du moteur de rendu du navigateur.
Comprendre les worklets Houdini
Les worklets Houdini sont des instructions de navigateur exécutées à partir du thread principal et pouvant être appelées si nécessaire. Les worklets vous permettent d'écrire du CSS modulaire pour effectuer des tâches spécifiques. Ils ne nécessitent qu'une seule ligne de code JavaScript pour être importés et enregistrés. Tout comme les service workers pour le style CSS, les worklets Houdini sont enregistrés dans votre application et peuvent être utilisés dans votre CSS par nom une fois enregistrés.
É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 est un exemple de tel worklet (le worklet Paint) et permet aux développeurs de définir des fonctions de peinture personnalisées semblables à un canevas qui peuvent être utilisées directement en CSS en tant qu'arrière-plans, bordures, masques, etc. Il existe un monde de possibilités pour utiliser CSS Paint dans vos propres interfaces utilisateur.
Par exemple, au lieu d'attendre qu'un navigateur implémente une fonctionnalité de bordures angulaires, vous pouvez écrire votre propre worklet Paint ou utiliser un worklet publié existant. Ensuite, plutôt que d'utiliser border-radius, appliquez ce worklet aux bordures et au recadrage.
.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, car sa spécification est une recommandation candidate du W3C. Elle est actuellement activée dans tous les navigateurs basés sur Chromium, partiellement compatible avec Safari et à l'étude pour Firefox.
Toutefois, même sans compatibilité complète avec les navigateurs, vous pouvez toujours faire preuve de créativité avec l'API Houdini Paint et voir vos styles fonctionner dans tous les navigateurs modernes avec le polyfill CSS Paint. Pour présenter quelques implémentations uniques et fournir une bibliothèque de ressources et de worklets, mon équipe a créé houdini.how.
Houdini.how
Houdini.how est une bibliothèque et une référence pour les ressources et les worklets Houdini. Il fournit tout ce que vous devez savoir sur CSS Houdini: compatibilité avec les navigateurs, présentation de ses différentes API, informations sur l'utilisation, ressources supplémentaires et exemples de worklets de peinture en direct. Chaque exemple sur Houdini.how est compatible avec l'API CSS Paint, ce qui signifie qu'ils fonctionnent tous sur tous les navigateurs modernes. Essayez !
Utiliser Houdini
Les worklets Houdini doivent être exécutés via un serveur en local ou sur HTTPS en production. Pour utiliser 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. Vous pouvez les utiliser via un CDN à des fins de prototypage ou gérer les worklets vous-même à l'aide de modules npm. Dans tous les cas, vous devez également inclure le CSS Paint Polyfill pour vous assurer qu'ils sont compatibles avec tous les navigateurs.
1. Prototypage avec un CDN
Lorsque vous vous enregistrez à partir d'unpkg, vous pouvez associer directement le fichier worklet.js sans avoir à installer le worklet localement. Unpkg utilisera le fichier worklet.js comme script principal, ou vous pouvez le spécifier vous-même. Unpkg ne pose pas de problème CORS, car il est diffusé via HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Notez que cette opération n'enregistre pas les propriétés personnalisées pour la syntaxe et les valeurs de remplacement. À la place, des valeurs de remplacement sont intégrées à chacun d'eux dans le worklet.
Pour enregistrer éventuellement 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 CSS Paint avec unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Gérer les 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 en worklet.js du package, puis l'enregistrer. Pour ce faire, procédez comme suit:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Le nom et le lien du package npm se trouvent sur chaque fiche de worklet.
Vous devrez également inclure le CSS Paint Polyfill via un script ou l'importer directement, comme vous le feriez avec un framework ou un bundler.
Voici un exemple d'utilisation de 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 avez joué avec des exemples Houdini, c'est à vous de contribuer ! Houdini.how n'héberge aucun worklet lui-même, mais présente le travail de la communauté. Si vous souhaitez envoyer un worklet ou une ressource, consultez le dépôt GitHub avec les consignes de contribution. Nous serions ravis de découvrir ce que vous allez créer !