Variables de remplacement CSS


Table des matières

    Afficher la table des matières


Remplacer la variable globale par une variable locale

De la page précédente, nous avons appris que les variables globales sont accessibles/utilisées dans l'ensemble du document, tandis que les variables locales ne peuvent être utilisées que dans le sélecteur où elles sont déclarées.

Regardez l'exemple de la page précédente :

Exemple

 :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;
}   

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>


Parfois, nous souhaitons que les variables changent uniquement dans une section spécifique de la page.

Supposons que nous souhaitions une couleur de bleu différente pour les éléments de bouton. Alors nous pouvons re-déclarez la variable --blue à l'intérieur du sélecteur de bouton. Quand nous utilisons var(--blue) à l'intérieur de ce sélecteur, il utilisera la valeur de la variable locale --blue déclarée ici.

Nous voyons que la variable locale --blue remplacera la variable globale --blue variable pour les éléments du bouton :

Exemple

 :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 {
  --blue: #0000ff; /* local variable will 
  override global */
  background-color: var(--white);
  
  color: var(--blue);
  border: 1px solid var(--blue);
  
  padding: 5px;
}   

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
: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 {
  --blue: #0000ff; /* local variable will override global */
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>

<h1>Override Global Variable With Local Variable</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>




Ajouter une nouvelle variable locale

Si une variable doit être utilisée à un seul endroit, nous aurions également pu déclarer une nouvelle variable locale, comme ceci :

Exemple

 :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 {
  --button-blue: #0000ff; /* new local 
  variable */
  background-color: var(--white);
  
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  
  padding: 5px;
}   

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
: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 {
  --button-blue: #0000ff; /* new local variable */
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}
</style>
</head>
<body>

<h1>New Local Variable</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>



Prise en charge du navigateur

Les numéros dans le tableau spécifient la première version du navigateur qui prend entièrement en charge le Fonction var().

Function
var() 49.0 15.0 31.0 9.1 36.0

Fonction CSS var()

var()

Insère la valeur d'une variable CSS