Des propriétés personnalisées très, très personnalisées
Par Gaël Poupard
- Mini-conf (30 mn) :
Le sujet
Voici une esquisse de sommaire :
— les custom properties : les origines — et non, ce ne sont pas des variables !
— l’héritage (Mitsouko !)
— les valeurs de repli dans var()
!
— cas d’usage consensuel : les variantes de composants
— factorisation du code et optimisation : par ex. les font-family
à rallonge, images en data URI, polygon()
, fonction de transformation… répétées gagnent à être dans des custom properties :) (un exemple: background: white var(--stripes);
← pun intended)
— gestion de palette de couleurs grâce aux custom properties : avec un peu de calculs dedans grâce à hsl()
ou rgb()
— respect des préférences utilisateur sans circonvolution en utilisant des valeurs pseudos-booléennes
— partager des propriétés à quelques valeurs près, par exemple… des positions dans un polygone ?
— hydrater des données dans une page statique en limitant la manipulation du DOM
— et oui, côté JS aussi c’est cool, les custom properties !
— pour le fun : conversion d’un entier en chaîne dans CSS <3
C’est facile, ce n’est que du CSS ;)