Note : Ce contenu a été créé avant que Fabernovel ne fasse partie du groupe EY, le 5 juillet 2022.

Les variables CSS Depuis 2015

Les variables CSS (aka custom properties) sont officiellement reconnues en tant que recommandation W3C. Les variables nous permettent de créer des références utilisées à plusieurs reprises dans notre CSS. Elles sont scopées à un élément, et sont initialisées de la même façon qu'une règle key: value. myElement { --my-color: red; } Puis pour accéder à cette variable :

myElement { background-color: var(--my-color); } Bien que ces variables simplifient notre code sur différents aspects, elles comportent néanmoins quelques limitations. Étant donné que les règles CSS sont

scopées à un élément spécifique, les variables sont uniquement accessibles par un élément spécifique. Pour rendre ces variables accessibles à tout le CSS, il faut déclarer la variable sur l'élément root. :root { --my-color: red; }

myElement { background-color: var(--my-color); } myOtherElement { color: var(--my-color); } Même déclarée sur l'élément root

, la variable n'est par contre pas accessible en dehors des déclarations CSS. Sur une règle @media par exemple, cela ne fonctionne pas. :root { --breakpoint-lg: 1080px; }

@media (max-width: var(--breakpoint-lg)) { /* Nope !*/ }

Les variables d'environnement tendent à résoudre cette contrainte.

Voici les principaux points différenciants :

• Les variables d'environnement ont une unique déclaration globale, et sont constantes.
• Les variables d'environnement peuvent être utilisées en tant que n'importe quelle valeur, propriété ou règle (exemple : media queries)
• Les variables d'environnement peuvent être définies via le CSS et le user-agent

Déclaration via le user-agent

Les navigateurs sont maintenant en mesure de définir leurs propres variables d'environnement via le user-agent. Pour le moment, les seules qui existent sont les variables définissant la safe area. La safe area consiste en 4 valeurs (safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left) définissant une zone sur l'écran dans laquelle du contenu peut y être affiché. Ceci est devenu nécessaire depuis la sortie de l'iPhone X (et d'autres ayant suivis la tendance) et les fameux notchs. Ces valeurs n'entrent pas encore officiellement comme spécification W3C, mais sont néanmoins supportées par les navigateurs qui en ont besoin, tel quel iOS Safari sur l'iPhone X. Les spécifications indiquent que nous, développeurs, pourront à terme créer des variables d'environnement, mais ceci n'est pas encore défini.

Utilisation des variables d'environnement

On accède à une variable d'environnement via l'annotationenv(). Elle accepte 2 valeurs : le nom de la variable, et une valeur de fallback utilisée dans le cas où la variable d'environnement souhaitée n'existe pas. env('VARIABLE_NAME', FALLBACK_VALUE); Exemple d'utilisation des variables d'environnement de

safe area : body { padding-top: env(safe-area-inset-top, 12px); padding-right: env(safe-area-inset-right, 12px); padding-bottom: env(safe-area-inset-bottom, 12px); padding-left: env(safe-area-inset-left, 12px); } Les spécifications des variables d'environnements sont toujours en draft, ce qui signifie que ce futur standard va encore évoluer. En attendant un support plus conséquent des variables d'environnement, une bonne façon d'utiliser cette fonctionnalité est d'utiliser des fallbacks en cascade

. body { /* No variables */ padding-top: 12px; /* iOS Safari 11.2, Safari 11 */ padding-top: constant(safe-area-inset-top, 12px); /* iOS Safari 11.4+, Safari 11.1+, Chrome 69+, Opera 56+ */ padding-top: env(safe-area-inset-top, 12px); }