/ Code Css var() | Résultat du code Css var() | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la fonction CSS var().

<style type="text/css">
:root{
  --my-color : darkred; 
  --maBordure : 3px solid rgb(20, 32, 54); 
  --mom_radius : 10; 
  --center : center; 
  --taille : 20px; 
  --content : 'Je suis content. '; 
  --contentAfterDeclare : ' Je suis une valeur déclarée.'; 
  --colorImportant : red !important; 
  --cent : 100%; 
  --bold : bold; 
  --bleu : rgba(189,243,253,1); 
  --monDegrade : linear-gradient(to bottom, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1)  --cent)); 
  --MONDEGRADE : linear-gradient(to bottom, rgba(184,225,252,1) 0%, rgba(169,210,243,1) 10%, rgba(144,186,228,1) 25%, rgba(144,188,234,1) 37%, rgba(144,191,240,1) 50%, rgba(107,168,229,1) 51%, rgba(162,218,245,1) 83%, --bleu) --cent)); 
}

.var-value-local{
  --centerLocale : center; 
}

.var-value-a{
  --margin : 15px; 
  --bold : normal; 
  color : --my-color); 
  border : --maBordure); 
  padding : calc(--mom_radius) * 1px); 
  background : --monDegrade); 
  font-weight : --bold); 
}

.var-value-b{
  --my-color : orangered; 
  border : --maBordure); 
  padding : calc(--mom_radius) * 0.05%); 
  background : --MONDEGRADE); 
  text-align : --center); 
  color : --my-color); 
}

.element.var-value-c,
.element.var-value-d,
.element.var-value-dd{
  color : teal; 
}

.var-value-c{
  border : --maBordure); 
  text-align : --centerLocale); 
  padding : calc(--mom_radius) * 0.05rem); 
  border : 3px solid --my-color); 
  font-size : --taille); 
  color : red !important; 
  font-weight : --bold); 
}

.var-value-d,
.var-value-dd{
  border : --maBordure); 
  text-align : --centerLocale , right); 
  padding : calc(--mom_radius) * 0.05rem); 
  border : 3px solid --my-color); 
  font-size : --taille); 
  color : --colorImportant); 
  font-weight : --bold); 
}
.var-value-e{
  border : --maBordure); 
  text-align : --centerLocale, center); 
  padding : calc(--mom_radius) * 0.05rem); 
  border : 3px solid --my-color); 
  font-size : --taille); 
  color : --colorGreen); 
}
.element:before{
  content : --content)
}

.var-value-c:after{
  content : --contentAfterDeclare, " Valeur par défaut")
}
.var-value-d:after{
  content : --contentAfter, " Je suis une valeur par défaut")
}
.element{margin: 5px; }
</style>
<strong>var-value-a</strong>
<div class="element var-value-a">var() permet la déclaration de propriétés personnalisées</div>
 <strong>var-value-b</strong>
<div class="element var-value-b">var() permet la déclaration de propriétés personnalisées</div>
<strong>var-value-c</strong>
<div class="element var-value-c">var() permet la déclaration de propriétés personnalisées</div>
<strong>var-value-d</strong>
<div class="element var-value-d">var() permet la déclaration de propriétés personnalisées</div>
<strong>var-value-dd var-value-local</strong>
<div class="element var-value-dd var-value-local">var() permet la déclaration de propriétés personnalisées</div>
<strong>var-value-e</strong>
<div class="element var-value-e" style="--colorGreen:green">var() permet la déclaration de propriétés personnalisées</div>

Interprétation du code de la fonction var() CSS par votre navigateur.

var-value-a
var() permet la déclaration de propriétés personnalisées
var-value-b
var() permet la déclaration de propriétés personnalisées
var-value-c
var() permet la déclaration de propriétés personnalisées
var-value-d
var() permet la déclaration de propriétés personnalisées
var-value-dd var-value-local
var() permet la déclaration de propriétés personnalisées
var-value-e
var() permet la déclaration de propriétés personnalisées

Interprétation normale du code de la fonction CSS var() (copie d'écran).

copie d'écran de l'affichage de la fonction CSS var()