Info [3.3] La fonction var(--xyz)

[pomC]

Bonjour tous
Sur certains forums je constate ceci pour afficher une couleur

Code : Tout sélectionner

html, body {
    background-color: var(--html);
    color: var(--text);
    transition: background-color .3s ease, color .3s ease;
}

Comment fonctionne cette fonction var(--xyz) ?
Merci et bon week-end

[axis5]

Bonsoir
Avec la fonction var() vous allez insérer la valeur d'une variable CSS .
Ces variables CSS ont accès au DOM, ce qui signifie que vous pouvez créer des variables de portée locale ou globale.

Les variables globales peuvent être consultées/utilisées dans l'ensemble du document, tandis que les variables locales ne peuvent être utilisées qu'à l'intérieur du sélecteur où elles sont déclarées.

1. Pour créer une variable à portée globale, déclarez-la dans le sélecteur :root. Ce sélecteur correspond à l'élément racine du document.
2. Pour créer une variable à portée locale, déclarez-la à l'intérieur du sélecteur qui va l'utiliser. L'exemple suivant est égal à l'exemple ci-dessus, mais ici nous utilisons la fonction var()

Nous commençons par déclarer deux variables globales (--blue et --white). Ensuite, nous utilisons la fonction var() pour insérer la valeur des variables ultérieurement dans la feuille de style :

Code : Tout sélectionner

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}