Workaround for CSS variables in IE?

Question

I'm currently developing a web application in Outsystems in which I have the need to customize the CSS, in which I'm using variables. I need to guarantee the app works cross-browser, including in Internet Explorer. IE doesn't support CSS variables, as you can see in the picture below from this source.

Since I have to use CSS variables, is there any workaround for the usage of variables in IE?

Answer 1

In case someone comes across this, has a similar issue where I had it set like this.

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

I added the background colour before the variable so if that didn't load it fell back on the hex.

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

Answer 2

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로 대체됨 */
}

Answer 3

There is no way yet in "normal" css but take a look at sass/scss or less.

here is a scss example

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

body {
  font: 100% $font-stack;
  color: $primary-color;
}