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 cro

Answer 1

Yes, so long as you're processing root-level custom properties (IE9+).

• GitHub: https://github.com/jhildenbiddle/css-vars-ponyfill
• NPM: https://www.npmjs.com/package/css-vars-ponyfill
• Demo: https://codepen.io/jhildenbiddle/pen/ZxYJrR

From the README:

Features

• Client-side transformation of CSS custom properties to static values
• Live updates of runtime values in both modern and legacy browsers
• Transforms <link>, <style>, and @import CSS
• Transforms relative url() paths to absolute URLs
• Supports chained and nested var() functions
• Supports var() function fallback values
• Supports web components / shadow DOM CSS
• Watch mode auto-updates on <link> and <style> changes
• UMD and ES6 module available
• TypeScript definitions included
• Lightweight (6k min+gzip) and dependency-free

Limitations

• Custom property support is limited to :root and :host declarations
• The use of var() is limited to property values (per W3C specification)

Here are a few examples of what the library can handle:

Root-level custom properties

:root {
    --a: red;
}

p {
    color: var(--a);
}

Chained custom properties

:root {
    --a: var(--b);
    --b: var(--c);
    --c: red;
}

p {
    color: var(--a);
}

Nested custom properties

:root {
    --a: 1em;
    --b: 2;
}

p {
    font-size: calc(var(--a) * var(--b));
}

Fallback values

p {
    font-size: var(--a, 1rem);
    color: var(--b, var(--c, var(--d, red))); 
}

Transforms <link>, <style>, and @import CSS

<link rel="stylesheet" href="/absolute/path/to/style.css">
<link rel="stylesheet" href="../relative/path/to/style.css">

<style>
    @import "/absolute/path/to/style.css";
    @import "../relative/path/to/style.css";
</style>

Transforms web components / shadow DOM

<custom-element>
  #shadow-root
    <style>
      .my-custom-element {
        color: var(--test-color);
      }
    </style>
    <div class="my-custom-element">Hello.</div>
</custom-element>

For the sake of completeness: w3c specs

Hope this helps.

(Shameless self-promotion: Check)

Answer 2

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.

Answer 3

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

Answer 4

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">

Answer 5

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 6

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