Cette page a été traduite par l'API Cloud Translation.

Kits de peinture internavigateurs et Houdini.how

Boostez votre CSS avec les travaillets de peinture Houdini en quelques clics.

Una Kravets

Le 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 davantage de contrôle et de contrôle sur les styles qu'ils écrivent.

Houdini permet d'utiliser du code CSS plus sémantique grâce à la fonction d'objet typé Modèle. Les développeurs peuvent définir des propriétés CSS personnalisées avancées avec la syntaxe, les valeurs par défaut et l'héritage via la API Properties and Values

Il présente également la peinture, la mise en page et l'animation worklets, qui ouvrent un de nombreuses possibilités, en permettant aux auteurs de prendre plus facilement en compte le style et la 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 depuis le thread principal et peuvent être appelés lorsque nécessaires. Les Worklets vous permettent d'écrire du code CSS modulaire pour accomplir des tâches spécifiques, et ils nécessitent une de code JavaScript à importer et à enregistrer. Un peu comme les service workers de style CSS et les Worklets Houdini sont enregistrés dans votre application. Une fois enregistrés, vous pouvez les utiliser dans votre CSS avec leur nom.

Écrire le fichier du Worklet Enregistrer le module du Worklet (CSS.paintWorklet.addModule(workletURL)) Utiliser le Worklet (background: paint(confetti))

Implémenter vos propres fonctionnalités avec l'API CSS Paint

L'API CSS Paint en est un exemple. (le Worklet Paint) et permet aux développeurs de définir des fonctions de peinture personnalisées, semblables à celles d'un canevas qui peuvent être utilisés directement dans CSS comme arrière-plans, bordures, masques, etc. Il y a tout un monde possibilités d'utilisation de CSS Paint dans vos propres interfaces utilisateur.

Par exemple, au lieu d'attendre qu'un navigateur implémente une fonctionnalité de bordures inclinées, vous pouvez écrire votre propre Worklet Paint ou utiliser un worklet publié existant. Au lieu d'utiliser "Border-radius", appliquer ce Worklet aux bordures et au rognage.

Pour obtenir ce résultat, l'exemple ci-dessus utilise le même Worklet Paint avec différents arguments (voir le code ci-dessous). Démonstration sur Glitch

.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 mieux prises en charge par Houdini. Sa spécification est conforme aux normes W3C. recommandation de candidats. Elle est actuellement activée dans tous les navigateurs basés sur Chromium, partiellement pris en charge dans Safari et est à l'étude pour Firefox.

Compatibilité avec Caniuse — L'API CSS Painting est actuellement compatible avec les navigateurs basés sur Chromium.

Même sans une compatibilité totale avec les navigateurs, vous pouvez toujours faire preuve de créativité avec l'API Houdini Paint et voir vos styles fonctionnent sur tous les navigateurs récents grâce à CSS Paint Polyfill : Pour vous présenter et pour fournir une bibliothèque de ressources et de workflows, mon équipe houdini.how.

Houdini.how

Capture d'écran de la page "Worklet" — Capture d'écran de la page d'accueil de Houdini.how.

Houdini.how est une bibliothèque et une référence pour les workflows et les ressources Houdini. Il fournit tout ce qu'il faut savoir sur le CSS Houdini: compatibilité avec les navigateurs, Présentation de ses différentes API, l'utilisation des informations, des ressources supplémentaires et un workflow de peinture en direct exemples. Chaque exemple sur Houdini.how s'appuie sur l'API CSS Paint, ce qui signifie elles fonctionnent chacune sur tous les navigateurs modernes. Essayez !

Utiliser Houdini

Les Worklets Houdini doivent être exécutés via un serveur en local ou via HTTPS en production. Afin de avec un Worklet Houdini, vous devez l'installer localement ou utiliser un outil de diffusion de contenu (CDN) comme unpkg pour diffuser les fichiers. Vous devez ensuite enregistrer Worklet en local.

Il existe plusieurs façons d'inclure les classeurs de présentation Houdini.how dans vos propres projets Web. Ils peuvent vous pouvez soit utiliser un CDN à des fins de prototypage, soit gérer vous-même les Worklets à l'aide de modules npm. Dans tous les cas, vous devez également inclure le polyfill CSS pour vous assurer compatible avec plusieurs navigateurs.

1. Prototypage avec un CDN

Lors de l'enregistrement depuis unpkg, vous pouvez créer un lien direct vers le fichier worklet.js sans avoir à le faire localement installer le Worklet. La commande "unpkg" renvoie vers le fichier worklet.js en tant que script principal, mais vous pouvez le spécifier. vous-même. La commande "unpkg" n'entraîne pas de problèmes CORS, car elle est diffusée 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 ont chacune 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 CSS avec unpkg:

<script src="https://unpkg.com/css-paint-polyfill"></script>

2. Gérer les Worklets via la GPR

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 renvoyant vers le fichier worklet.js du package et l'enregistrer. Vous comme ceci:

CSS.paintWorklet.addModule(..file-path/worklet.js)

Le nom du package npm et le lien se trouvent sur chaque carte du Worklet.

Vous devez également inclure le polyfill CSS Paint 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 testé quelques extraits d'Houdini, c'est à votre tour d'apporter les vôtres ! Houdini.how n'héberge aucun classeur en lui-même, mais met en avant le travail de la communauté. Si si vous souhaitez envoyer un Worklet ou une ressource, consultez le GitHub ainsi que des consignes de contribution. Nous serions ravis de découvrir vos inventions !