Des propriétés personnalisées très, très, très personnalisées

Les concepts-clés 🔑

À digérer avant de jouer avec les propriétés personnalisées :

• La cascade ;
• L’héritage ;
• Les stratégies de repli ;
• Les particularités.

Venez, on va bien rigoler !

Si, si, promis…

Cascade 🌈

Hop, galipette * !

La cascade est l’algorithme décidant quel style est finalement appliqué.

Les propriétés personnalisées respectent la cascade, au même titre que les autres propriétés.

* Galipette réalisée par un professionnel, ne tentez pas ça chez vous.

L’héritage (Mitsouko) 💃

C’est comme ça-aaaaaa

L’héritage intervient quand la cascade n’aboutit à aucune valeur.

1. Toutes les propriétés ne sont pas héritées !
2. Les propriétés personnalisées sont héritées.

Valeur de repli  🔙

Quand une valeur n’est pas supportée, elle est ignorée et la cascade puis l’héritage interviennent.

                
main {
  color: red;
  color: color(display-p3 1 .5 0);
}
              

                
html {
  color: red;
}

main {
  color: color(display-p3 1 .5 0);
}
              

Les particularités

Une sorte de définition

Les propriétés personnalisées :

• peuvent avoir plusieurs valeurs au même moment ;
• sont déclaratives, comme l’ensemble de CSS ;
• ne sont pas affectées par la propriéte all.

Rien à voir avec les variables Sass, donc 😈 !

Les capacités

Qu’est-ce qu’on va bien pouvoir faire de ça 😇 ?

Une palette de couleurs 🎨

Sara Soueidan explique l’utilisation des propriétés personnalisées combinées à hsl() pour gérer une palette de couleurs — et Una Kravets pousse la réflexion encore plus loin.

              
:root {
  --hue: 240;
  --lightness: 30%;
}

main {
  color: hsl(var(--hue), 100%, var(--lightness));
}
            

              
@media screen and (min-width: 32em) {
  :root {
    --lightness: 40%;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --lightness: 80%;
  }
}
            

De la configuration globale ⚙

Je s’appelle :root

Vous pouvez utiliser les propriétés personnalisées comme une API de surface avec vos styles :

                
:root {
  --enable-shadows: none;
}

.component {
  box-shadow: var(--enable-shadows, 0 .5rem 1rem #000);
}
              

                
:root {
  --duration: 1;
}

.foobar {
  transition-duration: calc(var(--duration) * 250ms);
}
              

Une cascade personnalisée

Hop, sans les mains 🤷

Miriam Suzanne a conceptualisé les cascades personnalisées, une imbrication de propriétés personnalisées via les valeurs de replis.

                  
button {
  background: var(--btn-bg--state,
    var(--btn-bg,
      var(--btn-bg--type,
        var(--btn-bg--default)
      )
    )
  );
}
            

                  
[disabled] {
  --btn-bg--state: darkgray;
}

.warn {
  --btn-bg--type: maroon;
}
            

Convertir un entier en chaîne 🔗

Ce n’est que du CSS

Cassie Evans utilise les compteurs CSS pour afficher un entier dans la propiété content.

                
.icon {
  --number-var: 23;
}

.icon::before {
  counter-reset: number var(--number-var);
  content: counter(number);
}
          

Ce n’est que du CSS, mais y’a quand même des données typées. 😇

De la pseudo-logique 🤔

Ce n’est toujours que du CSS

Roman Komarov propose d’utiliser des propriétés personnalisées pseudo-booléennes pour qu’une propriété bascule d’une valeur calculée à une autre. Ana Tudor décortique des exemples concrets de ce qu’elle baptise DRY switching.

              
:root {
  --is-big: 0;
}

.is-big {
  --is-big: 1;
}
            

              
.block {
  padding: calc(
    25px * var(--is-big) +
    10px * (1 - var(--is-big))
  );
}
            

Du responsive sans @media

Alias, ton univers impitoya-ableuh 🕵

James Atherton utilise une astuce qu’il nomme space toggler pour se passer des media queries dans son CSS — ou presque.

              
:root {
  --media-lte-sm: initial;
}

div {
  --small-borders: var(--media-lte-sm) 2px;
  border: var(--small-borders, 15px) solid;
}
            

              
@media (min-width: 56.25em) {
  :root {
    --media-lte-sm: ;
  }
}
            

Styler votre shadow DOM 👥

Une variable pour les gouverner tous, et dans les ténèbres les lier…

Pousser des styles vers le shadow DOM est impossible… mais hériter des propriétés personnalisées fonctionne ! Sarah Dayan donne un exemple de symbôle SVG multicolore conçu pour appeler des propriétés personnalisées définies hors de l’hôte.

              
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="my-first-icon" viewBox="0 0 20 20">
    <path fill="var(--color-1, red)" d="…"/>
    <path fill="var(--color-2, blue)" d="…"/>
    <path fill="var(--color-3, green)" d="…"/>
  </symbol>
</svg>

<svg class="icon icon-colors">
  <use xlink:href="#my-first-icon"/>
</svg>

            

              
.icon-colors {
  --color-1: #c13127;
  --color-2: #ef5b49;
  --color-3: #cacaea;
}

            

Des styles réactifs 💥

Dans chaarts, je mets en place divers type de graphiques de données en CSS, qui dépendent de propriétés personnalisées déclarées côté HTML.

Autrement dit, ces graphiques réagissent à des changements de données en temps réels si vous mettez à jour les propriétés personnalisées en JavaScript — de préférence à l’aide de la méthode .setProperty.

              
<table class="chaarts radar"
       style="--scale: 20; --step: 5; --items: 7;
       --1: 14; --2: 11; --3: 13; --4: 16; --5: 10;
       --6: 12; --7: 4; --8: var(--1);">
  […]
    <td><span>14</span></td>
  […]
</table>

            

              
.chaarts[class*="radar"] td:nth-of-type(2) span {
  --position: calc(100% - (var(--3) * 100% / (var(--scale) * var(--ratio))));
  clip-path: polygon(
    100% var(--position),
    calc(100% - (var(--2) * 100% / var(--scale))) 100%,
    100% 100%
  );
}

            

Factoriser votre code 📮

DRY

Si la même valeur à rallonge est utilisée plusieurs fois, simplifiez-vous la vie : utilisez des propriétés personnalisées !

            
:root {
  --stripes: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff99'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

tr:nth-child(odd) {
  background: white var(--stripes);
}

.hero {
  background: rebeccapurple var(--stripes);
}

          

Conclusion

Les fausses bonnes idées 💡

Ça envoie du rêve, mais…

• Hors cascade, pas de repli possible — chez Jeremy Keith.
• Le changement, c’est pas forcément maintenant — par Lisi Linhardt.
• KISS : pour une seule valeur, aucun intérêt.
• Si vous gagnez du temps mais prenez du poids, vous faites fausse route.

Pensez à vos utilisateurs avant tout.