web-dev-qa-db-fra.com

Solution de contournement pour les variables CSS dans IE?

Je développe actuellement une application Web dans Outsystems dans laquelle j'ai besoin de personnaliser le CSS, dans lequel j'utilise des variables. Je dois garantir que l'application fonctionne avec plusieurs navigateurs, y compris dans Internet Explorer. IE ne supporte pas les variables CSS, comme vous pouvez le voir sur l'image ci-dessous à partir de this source .

 

Étant donné que je dois utiliser des variables CSS, existe-t-il une solution de contournement pour l'utilisation de variables dans IE?

cssinternet-exploreroutsystems
15
Rafael Valente

Oui, il y a un moyen, de la même manière que vous rendez n'importe quel css compatible: utilisez un repli css spécifique qui est supporté par le navigateur.

body {
  --text-color: red;
}

body {
  color: red /* default supported fallback style */
  color: var(--text-color); /* will not be used by any browser that doesn't support it, and will default to the previous fallback */
}

Cette solution est incroyablement redondante et «presque» va à l’encontre du rôle des variables CSS ... MAIS c’est nécessaire pour la compatibilité du navigateur. Cela rendrait essentiellement les variables css inutiles, mais je vous implore de les utiliser car cela vous rappellera que ces valeurs sont référencées ailleurs et doivent être mises à jour dans tous les cas, sinon vous oubliez de mettre à jour tous les paramètres associés. apparition de 'couleur' ​​et ensuite vous avez un style incohérent car les valeurs CSS pertinentes ne sont pas synchronisées. La variable servira plus comme un commentaire mais un très important.

15
Mohammed Siddeeq

Au cas où quelqu'un rencontrerait cela, a un problème similaire où je l'avais réglé comme ceci. 

a {
  background: var(--new-color);
  border-radius: 50%;
}

J'ai ajouté la couleur de fond avant la variable, donc si elle ne se charge pas, elle retombe sur l'hex 

a {
  background: #3279B8;
  background: var(--new-color);
  border-radius: 50%;
}
5
Derek MC

Il n'y a pas encore de chemin dans les CSS "normaux", mais jetez un oeil à sass/scss ou à moins.

voici un exemple scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
2
André Schmid
body {
  --text-color : red; /* --text-color 정의 */
}    

body {
   color: var(--text-color, red); /* --text-color 정의되지 않으면 red로 대체됨 */
}

body {
   color: var(--text-color, var(--text-color-other, blue));
   /* --text-color, --text-color-other 가 정의되지 않으면 blue로 대체됨 */
}
1
이다빈

Créez un fichier .css séparé pour vos variables. Copiez/collez le contenu du fichier variable.css à la fin de votre fichier main.css. Recherchez et remplacez tous les noms de variables dans le fichier main.css par le code hexadécimal correspondant à ces variables. Par exemple: ctrl-h pour trouver var (- myWhiteVariable) et remplacez-le par # 111111. 

Remarque secondaire: si vous conservez le: root {} dans le fichier main.css et le commentez, vous pouvez l'utiliser pour suivre ces codes hexadécimaux ultérieurement si vous souhaitez mettre à jour vos couleurs de secours. 

0
Walter Ingham