CSS Variables Polyfill

Advanced Development
1

Hi all, Just thought I would quickly share… If you are wanting to use the glorious, css variables feature of css (Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN) but still need to support IE, this polyfill works really well.

https://jhildenbiddle.github.io/css-vars-ponyfill/#/

Just need to have all your variable settings on the root (which is pretty standard anyway)

IE:

:root {
   --red: #FF0000;
   --default-color: var(--red);
   --body-font-color: #333333;
   --body-font-family: "Roboto", Arial, sans-serif;
}

body {
   color: var(--body-font-color);
   font-family: var(--body-font-family);
}
h1 {
   color: var(--default-color);
}

etc etc.

Enjoy.

3 Likes