Press "Enter" to skip to content

CSS variables aka css custom properties

vpandzic 0

If you are programer first thing you learned is about what variable is. It is value that can be changed but you can refer to it to get it’s value as many time you want. In CSS however in 2017 you probably still can’t use them in production sites because global support for them in just 69% (August 2017).

In almost every web site (except those most basic) you have some brand colors you want to use and then reuse for different element on page.

Check this example:

CSS:

Both nav’s background color and text color of h1 are set to #125896. It is hard to understand completely what color  #125896 is (althought lot of editors will help), it is hard to write it few dozens times, but worst of all is to maintain that site).

CSS variables known also as CSS custom properties are resolving this problem.

This is how you use them:

 

  • --brandcolor is an author defined custom property with a value of #125896. All custom properties begin with two dashes. It can contain other dashes in it’s name so it could be defined as --brand-color but it should start with two dashes. Variables are case sensitive meaning that --brand-color and --brand-Color are two different variables.
    --brandcolor is defined under :root selector so it is available across the page.
  • Variables are used by var function which accepts variable name in this case --brandcolor

Code for this example is also available on JSFiddle.

Probably you are wondering why are they called custom properties. You are probably using or at least you heard of SASS and LESS and you are wondering why are CSS variables (properties) different. SASS and LESS variable can’t be changed dynamically, they aren’t aware of the DOM structure and they cannot be read or changed from JavaScript.

CSS variables can do some things SASS variables can’t and the other way around also holds true. This is the reason why CSS variables do not start with $ sign, so that can be used together in project.

CSS variables really behave like other properties so they can even be defined inline:

Considering the fact that custom properties now live inside browser  their values can be updated live. To change the --colour property above, for example, all we have to do is the following :

So when typical use case for css custom properties is theming of website.

I already mentioned browser support so you probably thought of fallbacks. There are fallbacks and they appear as second argument to var function. For example:

If browser supports custom properties but –color variable is not defined then div will have orange background color. Notice that there is another fallback – if browser doesn’t support custom properties then div will have background color of red. You will probably want to use both fallsbacks to handle both cases – when browser doesn’t support custom properties and when it does but variable is not defined.

 

 

    Leave a Reply

    Your email address will not be published. Required fields are marked *