28172 sujets

CSS et mise en forme, CSS3

Compatibilité des variables css

Bonjour,
Je souhaitais utiliser quelques variables css (couleurs, largeurs, ...) vu qu'elles sont devenues compatibles avec la plupart des navigateurs sauf IE11 et Edge, et Android 4.

:root {
    --color_one: brown;
}
element {
    background-color: var(--color_one);
}

Dans ce cas, comment puis-je faire un fallback pour IE et Edge?
Cordialement
Modifié par cpalo (29 Apr 2017 - 17:53)
Comme ceci même si ça paraît contreproductif :


element {
    background-color: blue;
    background-color: var(--color_one);
}

(rappel les propriétés non reconnues sont ignorées)

A mon avis, il vaut mieux utiliser less ou sass si as vraiment besoin de variables.
Modifié par bzh (29 Apr 2017 - 20:09)
Bonsoir.

Le problème est que si la valeur --color_one n'est pas valide, la valeur background-color retourne à sa valeur par défaut, dans ce cas-là, transparent...
Donc normalement, cela devrait être :
element {
    background-color: blue;
    background-color: var(--color_one, blue);
}


Mais étrangement cela ne fonctionne pas sur Mozilla Firefox 48...

Smiley sweatdrop
Meilleure solution
Bonjour,
puisqu'on écrit :
element {background-color: var(--color_one, blue);}

pourquoi conserver aussi ce fallback?
element {background-color: blue;}

Eventuellement, besoin d'une confirmation ou d'une piste, pour uniquement un site de développement. J'aurai voulu pouvoir utiliser des variables pour tester les mediaqueries ,du genre :
min-width: var(--small)
.
En cherchant j'ai cru comprendre que ce n'était pas possible : exact?
et qu'une solution pourrait être des variables php et de creer une feuille de style à partir de code php: ?
Cordialement
Bon premier mai.
Modifié par cpalo (01 May 2017 - 11:50)
Bonjour.
cpalo a écrit :
Bonjour,
puisqu'on écrit :
element {background-color: var(--color_one, blue);}

pourquoi conserver aussi ce fallback?
element {background-color: blue;}

Parce que, comme vous l'avez dit, certains navigateurs ne connaissent pas les 'variables css'... Le fait de mettre un second argument à 'var(...)' traite les valeurs incorrectes mais ce n'est pas un 'fallback'...
En effet, mon Firexfox (48) prend bien en compte la valeur incorrecte, mais comme il ne reconnait pas le second argument et que la valeur est incorrecte, elle redevient sa valeur par défaut et dans le cas de background-color, c'est 'transparent'...
Internet Explorer, qui, lui, ne reconnait pas les variables 'css', ne prend pas du tout en compte 'var(...)' et ne change rien du tout : ça reste bleu...

Pour le reste, je n'ai pas trop compris... Mais, a priori, on ne peut utiliser la valeur d'une variable que si elle est définie. C'est pour cela qu'en général les variables sont définies dans 'html'... Je ne vois pas pourquoi on ne pourrait pas la redéfinir dans une 'media query'... Edit : après essai, c'est possible. Mais il faut quand spécifier un élément html auquel l'appliquer comme à l'extérieur de la 'media query' et ça peut être à nouveau 'html'...

Smiley smile
Modifié par Zelena (01 May 2017 - 15:22)
Merci pour cet éclaircissement (fallback).

Pour la seconde question je me suis mal expliqué. Ce n'était pas pour une variable redéfinie dans les mediaqueries , mais directement le palier de la query qui aurait pu être ressembler à :

:root {
    --small : 600px;
   --medium: 900px;
}
@media screen and (min-width: var(--small);){}
@media screen and (min-width: var(--medium);){}

et permettant, lors de developpement de tester divers palliers.
Sans doute que la solution est de passer par Less ou Sass, ou par une solution en php.
Cordialement
En cherchant je suis tombé sur :

@custom-media --wide-screen (min-width: 80rem);
:root {
  --base-font-size: 16px;
}
@media (--wide-screen) {
  html {
    font-size: calc(var(--base-font-size) * 2);
  }
}

Est-ce que cette référence à 10. Custom Media Queries est-utilisable? car je pense qu'elle pourrait correspondre à ce que je cherchais également à faire?
Cordialement
Sujet clos
Aller à