CSS Variables

I learned about the CSS preprocessors 6 years back. Sass took my breath away with its awesome features, my favorite being nesting and variables. CSS preprocessor variables took away the headache of changing the theme of your web application in one go. You change the variables declared and abracadabra the whole application is painted with a different color theme. With the web world evolving we have now CSS custom properties or CSS variables.
The sad part of CSS preprocessor variables is that the browser does not recognize these static variables, yes they cannot be changed at runtime. It has to be compiled to normal CSS.

$font-color: #1a0dab;
..........
p{
color: $font-color
}

The above code written in sass will be compiled to as below , so that browsers can understand.

p{
  color:#1a0dab;
}

Though CSS variables itself is not a replacement for any CSS preprocessors, combining both could make our code sleek and DRY. You could create a CSS variable as below, beginning with two dashes (root being the global scope). However variable names cannot be a property name, say ‘padding-left’, this would end up in error.

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

The scope of changing CSS variables at runtime helps a lot in the dynamic theming of your web/hybrid applications. It also has a deeper impact on Responsive Web Design.

A quick demonstration

:root{
  --text-color: #e60404;
 }
 label{
   color: var( --text-color);
 }

--text-color is the developer defined custom property assigned with #e60404 as value. The var() function pulls the custom property written anywhere in your stylesheets and replaces it with corresponding value.
What if the CSS rules are not respected? Say I put the –-text-color as 30px; . For the element label, color value as 30px does not make any sense. In most cases, it will look for the parent element property or it will then switch to the default value which is black.

Cascading

The normal CSS cascading rules are valid in case of CSS variables.

:root{-- text-color: black;}
p{-- text -color: green;}
p.highlight{-- text -color: red;}
*{color: var( --text-color);}
............................
<div> Hi ! My text color is black</div>
<p> Hi ! My text color is green</p>
<p class=”highlight”> Hi ! My text color is red</p>

The var()

The exact syntax of var() looks like this:

var(<custom-property-name> [, <declaration-value> ]? )

custom-property-name is the developer defined property and the declaration value being the fallback value if the custom-property-name (it’s value) is invalid.
Let’s say we have

.container{
     background-color: var(--bg-color, blue);
     border-radius: var(--brdr-radius, 5px); 
}
body{
     -- bg-color: #f1f3f4;
}
// container will have border radius 5px as default value, since the --brdr-radius is not set

I got the opportunity to familiarize myself with CSS variables one year back when we are working on an Ionic 4 project. Guess what, we saw the ultimate usage of CSS variables in the web components used in Ionic 4. The idea of web component theming was made effortlessly with CSS variables.

A Web Component author can create an initial design using fallback values, and expose theming “hooks” in the form of custom properties.

Typically I can change the web component custom properties to create my own themes for the components.

Setting the custom properties in run time

The setProperty() allows us to manipulate the custom properties in runtime.

:root{
    -- text-color: red
}
p{
  color: var(--text-color);
}
// inside the javascript
element.style.setProperty('--text-color', ‘blue’);

Browser support

Latest versions of all modern web browsers support CSS variables.
Google chrome 😄
Safari 😄
Microsoft Edge 😄
Firefox 😄
IE 11 😢

Happy coding , enjoy quarantine !!