Couleur alpha n'importe où

Dans un article précédent, «différents degrés d'utilisation de la propriété personnalisés», j'ai discuté d'un scénario impliquant des couleurs et des propriétés personnalisées CSS où je dépasse la séparation des valeurs de couleur HSL. La division complètement de chaque couleur en composantes H, S et L pourrait être excessive.

Cependant, une approche plus pratique implique cette séparation:

 <code>html { --color-1-hsl: 200deg 15% 73%; --color-1: hsl(var(--color-1-hsl)); }</code>

Cela utilise deux propriétés personnalisées par couleur. Pourquoi? Parce que cela fournit une méthode simple pour l'application de couleur et permet des ajustements de transparence alpha faciles.

 <code>.card { background: var(--color-1); } .card-with-alpha { background: hsl(var(--color-1-hsl) / 0.5); }</code>

Il n'y a pas de manière simple dans les CSS standard pour ajouter l'alpha à une couleur existante. Cependant, une future fonctionnalité CSS offre une solution potentielle:

 <code>/* Future CSS! (currently works in Safari Technology Preview) */ .card-with-alpha { background: hsl(from var(--color-1) hsl / 0.5); }</code>

C'est élégant, mais sa préparation à la production reste incertaine.

De même, les travaux de peinture de Houdini, bien que prometteurs (le travail de Dave Rupert est particulièrement remarquable!), Manquent de support de navigateur large (pas de soutien Firefox ou Safari). Ils offrent une solution convaincante en utilisant des API Canvas pour générer des images avec Alpha, permettant efficacement la transparence alpha pour tout format de couleur. Cela fonctionne dans Chrome. Le code et une démonstration vidéo sont disponibles sur le github et le blog de Dave.

Pour les solutions prêtes pour la production nécessitant cette fonctionnalité, la méthode initiale des propriétés personnalisées est l'approche la plus fiable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!