Propriétés personnalisées ou variables CSS.

Introduction.

Les propriétés personnalisées sont aussi appelées variable CSS. Le nom des propriétés est préfixé par deux tirets '--' et sont appelées par la fonction 'var'. Le nom des propriétés peut aussi bien utiliser des tirets '-' que des underscores '_' dans leur nom mais pas de caractères accentués. On les déclare de cette manière:

:root {
--couleur-main: #fff;
--couleur-texte: #000;
}

div {
background-color: var(--couleur-main);
color: var(--couleur-texte);

}
									

La portée de la variable ne vaut que pour l'élément où elle est invoquée. Par soucis d'héritage, il est plus pratique de déclarer la propriété dans la pseudo classe ':root'. Ainsi on évite certaines répértitions.

:root {
--couleur-main: #fff;
}

.un {
background-color: var(--couleur-main);
}

.deux {
background-color: #000;
}

									

Pour ce qui de l'héritage, les variables fonctionnent comme les autres déclarations CSS. Il est possible de définir une valeur de secours, séparée par une virgule, au cas ou la valeur déclarée ne soit pas disponible ou invalide.

/* si --couleur-main n'est pas définie, ce sera la deuxième valeur qui sera utilisée */

.un {
background-color: var(--couleur-main, #fff000);
}
									

Breakpoint.

Lors de l'utilisation de breakpoint, comme les valeurs d'une variable peuvent être écrasées il devient facile de réutiliser la même variable et d'obtenir un code plus lisible et plus facilement maintenable.

:root {
--primary-font-size: 12px;
--primary-font-family: roboto;
--primary-padding: 0.5em;
}

p {
font-size: var(--primary-font-size);
font-family: var(--primary-font-family);
padding: var(--primary-padding);
}

@media screen and (min-width: 740px) {

	:root {
	--primary-font-size: 14px;
	--primary-font-family: 'sans serif';
	--primary-padding: 0.2em;
	}	

	p {
	font-size: var(--primary-font-size);
	font-family: var(--primary-font-family);
	padding: var(--primary-padding);
	}
}
									

Imbrication.

Il est possible d'imbriquer les variables les unes dans les autres.

:root {
--parent: 1em;
--child: calc(var(--parent) * 2);
}

/* autre exemple */

:root {
--color-text: black;
}

p {
color: var(--color-text, var(--autre-variable, red));
}
/* red si --color-text et --autre-variable sont non définies */

/* par contre la déclaration ci-dessous est invalide ! */
p {
color: var(--color-text, var--autre-variable, red));
}
									

Attention cependant ! Les variables ne sont pas supportées actuellement par certains navigateurs comme Opéra mini, Samsung Internet 4 et Exploreur 11. Sous Edge, impossible d'utiliser les variables sur les pseudo éléments ':before' et ':after', l'imbrcation des variables et aussi les animations...


Héritage.

si un élément ne possède pas de propriété, il héritera de celle de son parent.

.un {
--margin: 0.5em;
}

.deux {
--margin: 1em;
}

<div>
	<div class="un">
		<div class="deux"></div>
		<div class="trois"></div>
	</div>
</div>

un   	= 0.5em
deux = 1em
trois = 0.5em /* hérite de son parent */
									


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 22/12/2020