Utilisations des variables CSS

**denisduval75** · 25/02/2018, 10h05

Bonjour,

Je souhaite utiliser des variables en CSS.
J'ai trouvé sur le web le code suivant, mais il ne fonctionne pas !
Ce code est-il toujours d'actualité ?

Merci pour votre aide.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<style>
:root {
    --main-bg-color: coral;    
}
 
#div1 {
    background-color: var(--main-bg-color);
    padding: 5px;    
}
 
#div2 {
    background-color: var(--main-bg-color);
    padding: 5px;
}
 
#div3 {
    background-color: var(--main-bg-color);
    padding: 5px;
}
</style>
</head>
<body>
 
<h1>The var() Function</h1>
 
<div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<br>
 
<div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<br>
 
<div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
 
</body>
</html>

**NoSmoking** · 25/02/2018, 11h15

Bonjour,

... mais il ne fonctionne pas !

il te faut utiliser un navigateur moderne, exclu donc IE 11 et moins.

Ce code est-il toujours d'actualité ?

C'est plutôt l'avenir !

**psychadelic** · 25/02/2018, 12h33

https://caniuse.com/#search=css%20var

**denisduval75** · 27/02/2018, 09h37

Bonjour,

Ça fonctionne mieux effectivement avec chrome par exemple. Ça ne fonctionne pas avec IE et pourtant ça marche avec Edge !?

J'ai maintenant un soucis avec chrome :

lorsque j'affiche une page de mon projet, une page blanche s'affiche très brièvement et je n'ai pas le temps de voir ce qu'elle contient.
Ça ressemble au code de la page à afficher mais sans aucun style.
Je suppose qu'il s'agit d'erreurs d'exécution, mais comment faire pour récupérer son contenu ?

Merci.

**NoSmoking** · 27/02/2018, 11h14

Ça ne fonctionne pas avec IE et pourtant ça marche avec Edge !?

leur seul point commun est l'éditeur, MicroSoft, la comparaison s'arrête là donc ne pas les mettre dans le même sac !

J'ai maintenant un soucis avec chrome ...

Merci de respecter les règles et de poser cette question dans une nouvelle discussion !

Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

Pour te former : Cours et tutoriels pour apprendre CSS

Utilisations des variables CSS

CSS

Discussions similaires

Partager

Partager