September 27, 2019

CSS Custom Properties (Variables)

CSS Custom Properties is the formally correct name for the more commonly used synonym CSS variables. In this article we want to give you an insight how CSS variables help you to make CSS files more structured and semantically understandable, and how to modify them easily with JavaScript.

Documents or applications of any size contain many lines of CSS code. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. With CSS custom properties cascading variables can be defined as new primitive value type. They’re typically used to store colors, font names, font sizes, length units, etc.

Compared to preprocessor variables like Sass or Less, which have to be compiled into normal CSS to be read by the browser, CSS variables are real live CSS properties running in the browser. They can be changed in: Stylesheet documents, inline style attributes, SVG presentational attributes, media queries, animations and transitions. All this can also be manipulated via JavaScript. This opens up a whole world of possibilities!

However, this does not mean that you have to choose between one or the other. Take advantage of the CSS variables and preprocessor variables and let them work together.

Browser Support


(references: BrowserSupport 20.09.2019 https://caniuse.com/#search=css%20variables)

Syntax

Initialize variable:
Custom properties starts with two hyphens (-) like --color.

and accessed using var():

Attention: unlike other CSS properties, custom properties are case-sensitive!
For instance, var(--foo) and var(--FOO) refer to two different custom properties, --foo and --FOO respectively.

Custom properties are inherited. This means that if no value is set for a custom property on a particular element, the value of the parent element is used. As the following example illustrates:

CSS Variables in JavaScript

In JavaScript there are many methods (see references) to use the values of custom properties. It is useful to know that JavaScript initialized the variable in HTML as inline style.

In this CodePen example the variable --color is globally initialized.

After clicking the button the color changes to blue.
With setProperty('--color', 'blue') the following was initialized in the HTML file:

With removeProperty('--color') this inline style is deleted from the html file and the value initialized in the CSS file is used again.

Now that we know how JavaScript handles the variables we have to consider the following with the getPropertyValue() method.

If you call getPropertyValue() before you set it with JavaScript. You get the value “null”, because there is no inline style defined in the HTML file.
After you have clicked the button you get the value blue.

Workaround (getting styles like this wouldn’t be considered best practice):

Fallback and Invalid variables

As fallback, a unique definition after the CSS variable can be noted:

The CSS function var() contains a comma-separated fixed value in addition to the variable name. If the variable does not exist, it is used.
Attention: Older browsers that do not understand var() also ignore this statement.

When the browser encounters an invalid var() substitution, the initial or inherited value of the property is used, going back to the browser’s default settings.

Internet Explorer integration

CSS Custom Properties (Variables) are not supported in Internet Explorer, it is possible to use a postCSS plugin that adds the property with its value to each element.

https://github.com/postcss/postcss-custom-properties

References

Related Posts

Oliver Schwenk
Developer at thecodecampus </>


Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

```
code block
example
```

Your email address will not be published.