J'ai une variable CSS personnalisée déclarée dans un fichier CSS séparé dans un sélecteur.

.ui-grid-row:nth-child(odd) {
background-color: var(--altbg-color) !important;
}

Ce n'est pas un élément racine. Je ne sais donc pas comment css-vars-ponyfill fonctionnera dans ce cas. J'ai essayé ça aussi mais je n'ai pas réussi à le faire fonctionner. (Je serais reconnaissant si quelqu'un peut m'aider à le faire fonctionner.)

J'essaie de définir la valeur de la variable via javascript (j'utilise AngularJS 1.3) en utilisant

document.documentElement.style.setProperty('--some-color', 'green')

Qui fonctionne bien avec Chrome et Firefox mais pas dans IE (11).

Quelqu'un at-il une solution?

Merci d'avance.

0
Pankaj Pawar 18 mars 2019 à 20:04

2 réponses

Meilleure réponse

Il n'est pas pris en charge dans IE 11.

Vous ne pouvez utiliser que des variables CSS à partir de IE edge 16 et supérieur. Cependant, il est partiellement pris en charge dans IE 15.

  • Dans Edge 15, les calculs imbriqués avec des variables css ne sont pas calculés et sont ignorés voir bogue
  • Dans Edge 15, les animations avec des variables css peuvent provoquer le blocage de la page Web voir bug
  • Dans Edge 15, il n'est pas possible d'utiliser des variables css dans des pseudo éléments voir bug

Cependant, il existe un polyfill pour cela:

https://www.npmjs.com/package/css-vars-ponyfill

Cela ne prend pas en charge IE Edge 11. Il commence à prendre en charge IE Edge 12+. Et sans bord, il commence à prendre en charge à partir d'IE 9.

IE  Edge    Chrome  Firefox Safari
----------------------------------
9+  12+     19+     6+      6+
2
Bhojendra Rauniyar 18 mars 2019 à 17:21

Il existe un polyfill, qui permet une prise en charge presque complète des variables CSS dans IE11, y compris l'intégration JS :
https://github.com/nuxodin/ie11CustomProperties
(je suis l'auteur)

Le script utilise le fait qu'IE a une prise en charge minimale des propriétés personnalisées où les propriétés peuvent être définies et lues avec la cascade à l'esprit.
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"
puis lisez-le en javascript :
getComputedStyle( querySelector('.myEl') )['-ie-test']

Démo:

https://rawcdn.githack.com/nuxodin/ie11CustomProperties/ed6a269145661bfc6a43a5b69f06248fa760e766/demo.html

0
Tobias Buschor 13 janv. 2020 à 06:39