Variables CSS (propriétés personnalisées)

Découvrez les propriétés personnalisées CSS, également appelées variables CSS, une nouvelle fonctionnalité puissante des navigateurs modernes qui vous aident à rédiger un meilleur CSS

introduction

Ces dernières années, les préprocesseurs CSS ont eu beaucoup de succès. Il était très courant que de nouveaux projets démarrent avec Less ou SASS. Et c'est toujours une technologie très populaire.

Les principaux avantages de ces technologies sont, à mon avis:

  • Ils permettent d'imbriquer des sélecteurs
  • Le fournir une fonctionnalité d'importation facile
  • Ils vous donnent des variables

Le CSS moderne a une nouvelle fonctionnalité puissante appeléePropriétés personnalisées CSS, également connu sous le nom deVariables CSS.

CSS n'est pas un langage de programmation commeJavaScript, Python, PHP, Ruby ou Go où les variables sont essentielles pour faire quelque chose d'utile. Le CSS est très limité dans ce qu'il peut faire, et c'est principalement une syntaxe déclarative pour dire aux navigateurs comment ils doivent afficher une page HTML.

Mais une variable est une variable: un nom qui fait référence à une valeur, et les variables en CSS permettent de réduire les répétitions et les incohérences dans votre CSS, en centralisant la définition des valeurs.

Et il introduit une fonctionnalité unique que les préprocesseurs CSS n'auront jamais:vous pouvez accéder et modifier la valeur d'une variable CSS par programmation à l'aide de JavaScript.

Les bases de l'utilisation des variables

Une variable CSS est définie avec une syntaxe spéciale, en préfixedeux tiretsà un nom (--variable-name), puis un deux-points et une valeur. Comme ça:

:root {
  --primary-color: yellow;
}

(plus sur:rootplus tard)

Vous pouvez accéder à la valeur de la variable en utilisantvar():

p {
  color: var(--primary-color)
}

La valeur de la variable peut être n'importe quelle valeur CSS valide, par exemple:

:root {
  --default-padding: 30px 30px 20px 20px;
  --default-color: red;
  --default-background: #fff;
}

Créer des variables à l'intérieur de n'importe quel élément

Les variables CSS peuvent être définies à l'intérieur de n'importe quel élément. Quelques exemples:

:root {
  --default-color: red;
}

body { –default-color: red; }

main { –default-color: red; }

p { –default-color: red; }

span { –default-color: red; }

a:hover { –default-color: red; }

Ce qui change dans ces différents exemples est laportée.

Portée des variables

L'ajout de variables à un sélecteur les rend disponibles à tous les enfants de celui-ci.

Dans l'exemple ci-dessus, vous avez vu l'utilisation de:rootlors de la définition d'une variable CSS:

:root {
  --primary-color: yellow;
}

:rootest une pseudo-classe CSS qui identifie l'élément racine d'un arbre.

Dans le contexte d'un document HTML, en utilisant le:rootle sélecteur pointe vers lehtmlélément, sauf que:roota plusspécificité(est prioritaire).

Dans le cadre d'une image SVG,:rootpointe vers lesvgétiqueter.

Ajout d'une propriété personnalisée CSS à:rootle rend disponible à tous les éléments de la page.

Si vous ajoutez une variable dans un.containersélecteur, il ne sera disponible que pour les enfants de.container:

.container {
  --secondary-color: yellow;
}

et l'utiliser en dehors de cet élément ne fonctionnera pas.

Les variables peuvent êtreréaffecté:

:root {
  --primary-color: yellow;
}

.container { –primary-color: blue; }

À l'extérieur.container,--primary-colorserajaune, mais à l'intérieur ce serableu.

Vous pouvez également affecter ou écraser une variable dans le HTML en utilisantstyles en ligne:

<main style="--primary-color: orange;">
  <!-- ... -->
</main>

Les variables CSS suivent la normaleRègles de cascade CSS, avec priorité établie selonspécificité

Interagir avec une valeur de variable CSS à l'aide de JavaScript

La chose la plus cool avec les variables CSS est la possibilité d'y accéder et de les modifier à l'aide de JavaScript.

Voici comment définir une valeur de variable à l'aide de JavaScript brut:

const element = document.getElementById('my-element')
element.style.setProperty('--variable-name', 'a-value')

Ce code ci-dessous peut être utilisé pour accéder à une valeur de variable à la place, au cas où la variable est définie sur:root:

const styles = getComputedStyle(document.documentElement)
const value = String(styles.getPropertyValue('--variable-name')).trim()

Ou, pour appliquer le style à un élément spécifique, dans le cas de variables définies avec une portée différente:

const element = document.getElementById('my-element')
const styles = getComputedStyle(element)
const value = String(styles.getPropertyValue('--variable-name')).trim()

Gestion des valeurs invalides

Si une variable est affectée à une propriété qui n'accepte pas la valeur de la variable, elle est considérée comme non valide.

Par exemple, vous pouvez transmettre une valeur de pixel à unpositionpropriété, ou une valeur rem à une propriété de couleur.

Dans ce cas, la ligne est considérée comme invalide et ignorée.

Prise en charge du navigateur

La prise en charge des variables CSS par le navigateur esttrès bien,selon Puis-je utiliser.

Les variables CSS sont là pour rester et vous pouvez les utiliser aujourd'hui si vous n'avez pas besoin de prendre en charge Internet Explorer et les anciennes versions des autres navigateurs.

Si vous avez besoin de prendre en charge d'anciens navigateurs, vous pouvez utiliser des bibliothèques telles quePostCSSouMythe, mais vous perdrez la possibilité d'interagir avec les variables via JavaScript ou les outils de développement de navigateur, car ils sont transposés en bon vieux CSS sans variable (et en tant que tel, vous perdez la plupart de la puissance des variables CSS).

Les variables CSS sont sensibles à la casse

Cette variable:

--width: 100px;

est différent de:

--Width: 100px;

Mathématiques dans les variables CSS

Pour faire des maths dans les variables CSS, vous devez utilisercalc(), par exemple:

:root {
  --default-left-padding: calc(10px * 2);
}

Requêtes multimédias avec des variables CSS

Rien de spécial ici. Les variables CSS s'appliquent normalement aux requêtes multimédias:

body {
  --width: 500px;
}

@media screen and (max-width: 1000px) and (min-width: 700px) { –width: 800px; }

.container { width: var(width); }

Définition d'une valeur de repli pour var ()

var()accepte un deuxième paramètre, qui est la valeur de secours par défaut lorsque la valeur de la variable n'est pas définie:

.container {
  margin: var(--default-margin, 30px);
}

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: