Bring flexibility to your site with CSS3 Variables
Top

CSS has various useful features due to it’s constant development. One of such features is CSS3 variables (the second name is CSS Custom Properties). The main difference between CSS3 variables and SCSS variables is the dynamically changing value of a variable in media queries. It lets us conveniently manage properties of DOM elements.

The first release of the CSS variables draft appeared in 2012 but only now we can see that the browsers support is not that bad:

CSS3 Variables

In this short article, I will try to show you how variables work natively in CSS, and how you can use them to make your development easier.

Let’s consider several examples of CSS3 variables can be used.

Example #1: Creating Component Modifications with the help of CSS3 Variables

CSS3 Grids

The color styles of the button change from one colored box to the next in the GIF above.

:root{
    --button-color: #fff;
}
.btn{
    color: var(--button-color);
    background: var(--button-bg, green);
}
.white .box-inner{
    --button-color: orange;
}

Let’s look at this code. In the :root selector we can see a syntax of definition of the CSS3 variable. With the help of the :root selector we select the highest-level element in the DOM. Variables declared in this way are kind of scoped to the global scope. We can declare CSS3 variables on any DOM elements that are placed in the body tag.

We assign for the property background the value var(–button-bg, green). It means the background of the button will be green (second argument of var() is value by default), if variable –button-bg wasn’t defined earlier.

Also in the element with class white we redefine value of variable called –button-bg. So, the color of the text of the button in this element will change to orange.

You can try here the live example.

Example #2: Theme Styles Changes with CSS3 Variables

CSS3 Vars

This example shows how we can easily change the color scheme of a web-page by changing the value of the CSS3 variable with a little JavaScript help.

Access to CSS3 variables from JavaScript are provided by the following methods setProperty(nameVariable, valueVariable), getPropertyValue(nameVariable):

function sliderColorHandler(e){
    var body = $('body'),
        valueSlider = $(e.target).val();
    body.style.setProperty('--slider-value', valueSlider);
}

There is how we can set the value of the CSS3 variable in part of the code above. And here is how we can get the value of the CSS3 variable in part of code below.

var elementStyles = getComputedStyle(document.querySelector(".element"));
var valueVariable = elementStyles.getPropertyValue(nameVariable);

As you can see it is very easy to manage CSS3 variables.

You can try the live example here.

Example #3: Work with SVG Images with Help of CSS3 Variables

CSS3 Vars

CSS3 variables allow us to change SVG images that are placed in assets.

To reach it we should paste SVG image by using the tag <use>:

<svg viewBox="0 0 1024 1024" class="logo">
    <use xlink:href="assets/images/logo.svg#logo"></use>
</svg>

And file logo.svg will look like :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
  <g id="logo">
    <path id="ico4" style="fill: var(--image-color-4)" d="M0 544h480v480h-480v-480z"></path>
    <path id="ico3" style="fill: var(--image-color-3)" fill="#fec327" d="M544 544h480v480h-480v-480z"></path>
    <path id="ico2" style="fill: var(--image-color-2)" fill="#34b67a" d="M544 0h480v480h-480v-480z"></path>
    <path id="ico1" style="fill: var(--image-color-1)" fill="#f15723" d="M0 0h480v480h-480v-480z"></path>
  </g>
</svg>

Here we added an attribute style for paths of a SVG image and set up color of fill with the CSS3 variable –image-color-*. And now we can change the fill color of each path of the SVG image dynamically.

Here you can try a live example.

CSS3 Variables Grid

To get a real benefit of CSS3 variables we decided to implement them in a simple CSS grid (it was inspired from bootstrap:)).

There are several CSS3 variables that can be changed and set up how it needs for a project.

:root {
    --grid-gutter-width-xs: 10px;
    --grid-gutter-width-sm: 10px;
    --grid-gutter-width-md: 15px;
    --grid-gutter-width-lg: 15px;
    --grid-gutter-width-xl: 15px;
    --container-max-width-sm: 540px;
    --container-max-width-md: 720px;
    --container-max-width-lg: 960px;
    --container-max-width-xl: 1140px;
}

You can change all gutters of the grid and maximum widths of container on all screen resolutions.

You can install and try the CSS3 Variables Grid by the link. Also you can go to the repository on github. There is a short documentation of this plugin. Go there so that you can start enjoying all that comes with the CSS3 Variables Grid.

Conclusion

So, if you are a modern developer, are with-it, and don’t support IE11( 🙂 ) you need to discover CSS3 variables deeper . Their advantages are obvious. We think that CSS3 variables will help web-developers build excellent sites in the nearest future. Let’s play around with this feature and open new areas of usage for them!

up

Please turn your device