Custom properties

Why do we need custom properties and how do they work?

There are variables in programming languages: you declare something once, assign a value, and then use it again and again. If the value of a variable changes, then it changes everywhere. It looks like pronouns in the language: it is always clear from the sentence or paragraph who is “we” or what is “it”, we seem to have announced them earlier and will probably redefine them later.

But these are programming languages, and what about styles? In general, the declarative nature of CSS does not imply any variables, and CSS co-author Bert Bos is very opposed to read. But life made its own adjustments to the original idea, and the variables in the styles appeared - it was too convenient. But first in preprocessors.

How do preprocessors work? You write in some language that looks like CSS, and sometimes doesn’t look like it at all.

@mixin sass @if & &:hover color: tomato @else a color: plum 

Then it compiles into real styles. Variables there is such a complex auto-replacement of variables for their values. Sass, Less, Stylus, PostCSS-plugins - they all work just like that. These variables exist only in development, they are no longer in the browser.

 .scss { $variable: value; color: $variable; } 

If we compare this behavior with JavaScript, it becomes very disappointing for CSS. In JS, variables live right in the browser, they can be created and changed on the fly. Nevertheless, such variables and other programming elements in CSS preprocessors have gained immense popularity. There are almost no large projects without preprocessors.

Fortunately, there were people who were dissatisfied with such scanty variables. After a number of drafts and syntax variations, Tab Atkins wrote the specification of full-fledged CSS variables, more precisely, custom properties. These variables are already supported in 70% of browsers around the world and greatly change the principle of writing styles.

Custom who? I explain. Remember, I said that CSS is not very ready for variables? In order to preserve syntactic compatibility with old browsers and not contradict the language model, it was decided to make not just variables with the dollar at the beginning, but a mechanism for creating your own properties for the developer’s needs. They are also translated as “user-defined” properties, but this causes confusion: who is the user here and who is the developer here? I must say, their syntax is a bit strange, but you will understand why.

For example, we now have a box-shadow property to cast a shadow. And before it was not, it appeared first in the Safari browser in 2008. But it appeared not just like that, but as -webkit-box-shadow , with a prefix starting with a hyphen. That is, the developers of the WebKit engine have come up with their own property. Only then, when it became part of the standard and appeared in other browsers, the prefix was removed.

 .shady { -webkit-box-shadow: 0 0 0 4px tomato; box-shadow: 0 0 0 4px tomato; } 

Now you can also create your own properties , just do not need to specify the name of the engine between hyphens: hyphen, hyphen, property name. Let's create the --box-shadow-color property and set it to the value tomato . To use this value in code, you need to pass it to the var() function.

 .shady { --box-shadow-color: tomato; box-shadow: 0 0 0 5px var(--box-shadow-color); } 

We have now announced a new property, which can then be reused over and over. Moreover, the box-shadow-color properties have never been in nature and in order to change the shadows, for example, when hovering over, one had to rewrite box-shadow entirely. And now on a hover, you can simply change the value of a variable. Cool?

 .shady { --box-shadow-color: tomato; } .shady:hover { --box-shadow-color: plum; } 

If you use a custom property, which for some reason has not been declared, you can specify its default value, which will be used in this case. Your component can then be configured, but without setting it will not break.

 .shady { font-size: var(--font-size, 12px); } 

Due to the fact that these are custom properties, and not just dollars with auto-replacement, they behave like normal properties: they are inherited in depth for all children of the element and are not visible between neighboring elements. In order for a variable to be clearly visible throughout the entire document, it must be set to the root <html> element itself, but even better :root , in case this is the root <svg> element.

 :root { --font-size: 12px; --theme-color: tomato; } 

The coolest thing is that variables can be redefined inside media expressions. For example, if the window is larger than a certain size, now you don’t need to copy the whole block and change it to fit the new width, just change the necessary custom properties.

 @media (min-width: 320px) { .shady { --font-size: 48px; } } 

Custom properties can be used even inside the calc() function, which calculates the result of the expression inside. Already not very similar to the usual CSS, right? Needless to say, all the preprocessors have already died of envy, looking at this.

 .shady { font-size: calc(var(--font-size) * 2); } 

More custom properties become the ideal transport for data between scripts and styles. For example, you can dynamically read the coordinates of the mouse in JS and forward them to custom properties via setProperty to the desired element.

 element.style.setProperty('--pointer-left', event.clientX); 

Next in the styles you can already decide: use them in top and left or transform: translate() . And vice versa: the value of the property can be obtained in JS using getPropertyValue .

And I just touched the custom properties with my paw, then there is still a lot of interesting things that radically change the work with styles. Read and see for yourself: articles , videos and slides.

Custom properties are not border-radius , which either does beautifully or not. It’s too early to rush everything on them, the layout can break badly in browsers that do not support them. But the time has come to try and be able to.

Video version

Questions can be asked here .