Un fallback pour les valeurs portées par des CSS vars

Ça vous dit quelque chose ce petit bout de code CSS ?

.drawer {
    height: 100vh;
    height: 100dvh;
}

1. On affecte une valeur pour la hauteur à 100vh ;
2. puis on écrase la propriété avec une nouvelle valeur, cette fois à 100dvh.

Les navigateurs qui ne comprennent pas (encore) l’unité dvh ignorent donc la seconde ligne, et c’est la première qui sert alors de solution de secours.

---

dvh fait référence au dynamic viewport height : une unité qui prend en compte la hauteur parfois dynamique de la zone d’affichage ; notamment sur les périphériques mobiles.

---

Cependant, si vous travaillez avec des variables CSS, vous avez appris à ne pas réécrire tout le couple propriété + valeur, et vous souhaitez quelque chose de ce style : height: var(--drawerHeight).

Comment faire alors ? C’est ce que j’ai exploré à travers différents tests sur ce CodePen.

Ma conclusion : c’est tout à fait possible mais il faudra en passer par l’utilisation de la règle @supports. En voici un exemple :

.drawer {
    --drawerHeight: 100dvh;
    --drawerHeightFallback: 100vh;

    @supports not (height: 1dvh) {
        --drawerHeight: var(--drawerHeightFallback);
    }

    height: var(--drawerHeight);
}