Workaround for CSS variables in IE?

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?

Answers


Yes there is a way, the same way you make any css compatible: use a specific css fallback that is supported by the browser.

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 */
}

This solution is incredibly redundant and 'almost' defeats the purpose of css variables....BUT it is necessary for browser compatibility. Doing this would essentially make the css variables useless but I implore you to still use them because it will serve as an important reminder to the fact that these values are referenced elsewhere and need to be updated in all cases, otherwise you forget to update every related occurrence of 'color' and then you have inconsistent styling because relevant css values are out of sync. The variable will serve more as a comment but a very important one.


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%;
}

There is a polyfill, which enables almost complete support for CSS variables in IE11: https://github.com/nuxodin/ie11CustomProperties (i am the author)

The script makes use of the fact that IE has minimal custom properties support where properties can be defined and read out with the cascade in mind. .myEl {-ie-test:'aaa'} // only one dash allowed! "-" then read it in javascript: getComputedStyle( querySelector('.myEl') )['-ie-test']

From the README:

Features

  • handles dynamic added html-content
  • handles dynamic added , -elements
  • chaining --bar:var(--foo)
  • fallback var(--color, blue)
  • :focus, :target, :hover
  • js-integration:
    • style.setProperty('--x','y')
    • style.getPropertyValue('--x')
    • getComputedStyle(el).getPropertyValue('--inherited')
  • Inline styles: <div ie-style="--color:blue"...
  • cascade works
  • inheritance works
  • under 3k (min+gzip) and dependency-free
Demo:

https://rawcdn.githack.com/nuxodin/ie11CustomProperties/b851ec2b6b8e336a78857b570d9c12a8526c9a91/test.html


Another way to do it is declaring colors in a JS file (in my case I'm using react) and then just use the variable you defined in the JS file.

For example:

  • in globals.js
export const COLORS = {
  yellow: '#F4B400',
  yellowLight: '#F4C849',
  purple: '#7237CC',
  purple1: '#A374EB',
}
  • in your file
import { COLORS } from 'globals'

and then just use COLORS.yellow, COLORS.purple, etc.


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;
}

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

Make a seperate .css file for your variables. Copy/paste the contents of the variable.css file to the end of your main.css file. Find and replace all the variable names in the main.css file to the hex code for those variables. For example: ctrl-h to find var(--myWhiteVariable) and replace with #111111.

Side note: if you keep the :root{ } in the main.css file and just comment it out, you can use that to track those hex codes later if you want to update your fallback colors.


I recommend setting your css variables as sass variables, then using sass interpolation to render the color in your elements.

:root {    
    --text-color: #123456;
}

$text-color: var(--text-color);

body {
    color: #{$text-color};
}

If im not wrong there is a workaround, the CSS #ID Selector. Which should work for IE > 6 I guess.. So you can

.one { };
<div class="one">

should work as

#one {};
<div id="one">

Need Your Help

What is the difference between JOIN and UNION?

sql database join union

What is the difference between JOIN and UNION? Can I have an example?

ASP.NET MVC - Custom model binder able to process arrays

asp.net-mvc arrays modelbinders imodelbinder custom-model-binder

I need to implement a functionality to allow users to enter price in any form, i.e. to allow 10 USD, 10$, $10,... as input.