The CSS variables, technically called “Custom properties” simplify your CSS files and allow you to create interesting effects such as dynamically change the styles applied on a page and improve the features of the standard CSS properties.
Google Chrome was the only major browser that did not yet support these CSS variables. However, from version 49 they are already available, so it is already safe to use CSS variables if your users use modern browsers (Firefox 43+, Safari 9.1+, iOS Safari 9.3+, Chrome 49+).
SIGNIFICANCE OF CSS VARIABLES
When designing a site or web application, it is common to reuse a series of colors to give consistency to the design. The problem is that repeating the same colors over and over is not only very boring, but also very prone to making mistakes. When you want to change a color, even if you do a “Find and replace” in your code editor, you will surely leave without changing any color in any file.
Of course, many designers have used preprocessors like Sass or LESS for a long time and define variables to store these values. However, these variables have a very important limitation: they cannot be modified in real-time while the page is displayed in the browser.
CSS variables do allow these changes in real-time, so it is possible, for example, to design various themes for the site so that the user can choose the style they like best.
CSS VARIABLE SYNTAX
The syntax that defines CSS variables or “non-standard CSS properties” is very simple:
--color-header : #06c ;The name of the properties is case sensitive, so –color-red and –color-Red considered different properties. Here’s How we can use CSS variables
section {
background-color: var (--color-header);
}
THE FUNCTION VAR()
The function var() gets the value of the indicated property. Its complete syntax is as follows
var (<property-name> [, <default-value>]?)property-name will be the custom property defined like –color: red and default value is a fallback in case somehow unable to find a property then the fallback value will be used
Example
p {
padding : var (--separation, 10px 15px 20px);
}
In above example for eg, browser unable to find –separation variable then fallback value will be used
CSS VARIABLES IN PRACTICE
CSS variables add two new functionalities to traditional CSS files:
- They allow assigning any value to a property whose name we can freely choose.
- They allow to reuse those values in any other property thanks to the function var()
This simple example shows how to define and use a CSS variable:
:root {
--color-main : # 06c ;
}
#tut h1 {
color : var (--color-main);
}
–color-principal is a CSS property arbitrarily defined by the creator of this style sheet and whose value is #06c. Although you can choose any name for the variables, they always have to start with two hyphens ( –).
The function var() gets the value of the property whose name is indicated and inserts it in the place where the function is called. Thus, the example above is equivalent to:
#tut h1 {
color : # 06c ;
}
How css variable will behave if given value is invalid?
If you are defining custom property for color
for eg.
:root {
--color: 20px;
}above property don’t have any issue because property name can be anything, But the issue is where this property we will be using
for eg.
section {
background-color: var(--color);
}As you can see above we are using –color property for section background.But value 20px is not a valid value for background-color. In this case, the default value will be assigned
Cyclic dependency should be avoided
cyclic dependency can be like
- A variable is dependent upon itsel. like below
:root {
--gutter: var(--gutter)
}
body {
margin: var(--gutter)
}2. two variables depend upon each other like below
:root {
--one: calc(var(--two) + 10px);
--two: calc(var(--one) - 10px);
}Above situations should be avoided
Defining css variables as inline style
css variable can be define as inline style also like below
<div style="--bgColor:green">
</div>and we can use property like below
div {
width: 100px;
height: 100px;
background-color:var(--bgColor);
}Don’t use unit and value seperately
If you are declaring custom property for font-size like below
:root {
--size: 20;
}and want to use it like
div {
font-size: var(--size)px;
}above will not work because browser unable to interpret it as 20px.So right solution for this
:root {
--size: 20px;
}
div {
font-size: var(--size);
}Accessing css variables in javascript
If you want to access CSS variable using javascript then you need to use getComputedStyle method of window object which returns object representation of CSS for a particular element
for eg.
:root {
--bgColor: red;
}getComputedStyle(document.documentElement)
.getPropertyValue('--bgColor');above javascript expression will return value as ‘red’
Using CSS variables with media queries
sometimes, you need to use different values for different devices then you need to make adjustment in the media queries
for eg.
:root {
--separation : 4px ;
}
section {
margin : var (--separation);
}
@media (min-width: 600px ) {
:root {
--separation : 16px ;
}
}
In above example, custom property –seperation has value 4px but when device width is greater than 600px then custom property value will be overwritter with 16px
So, css variables gives provision to define variable in media queries also
CSS variables follows CSS specificity rule
Non-standard CSS properties also follow the same “cascading inheritance” rules as standard CSS properties, so you can define the same variable with different levels of CSS specificity:
:root {
--color : blue;
}
div {
--color : green;
}
#alert {
--color : red;
}
.alert {
--color: blue
}
<div id="alert" class="alert">Demo text</div>In the above example, CSS for the id selector will be applied because of CSS specificity priorities
Reusing CSS variable for defining other CSS variables
the value of a variable can be defined from other variables, which is very useful to define the theme of a site.
:root {
--color-main : red;
--text-logo : var (--color-main);
}
As per the above example, –color-main used for defining –text-logo property so both the variables shares same value
SOME CSS VARIABLES EXAMPLES
Example 1:
Like regular CSS properties, CSS variables are inherited. All the elements inside the <html> element of the root where you choose to apply the –main-color variable, will inherit the red value.If you reassign a different value to your custom property inside another element, all children of that element will inherit the new value
foreg.
css file
--main-color: red;
}
.alert {
--main-color: green;
}
p {
color: var (- main-color);
}
//html file
<html>
<head>
</head>
<body>
<div>
<p>red paragraph. </p>
<div class="alert">
<p> green paragraph. </p>
</div>
</div>
</body>
</html>The first paragraph in the margin above inherits its value from the global variable – main-color, which makes it red. The paragraph inside the div element with the .alert class will be green because its color value is inherited from the main color variable with local scope, which has the value of green.
Output:
Example2: CSS var with SVG
CSS and SVG variables work well together! You can use CSS variables to change style and presentation attributes in online SVGs.
For example we will have a different color for your SVG icons depending on the parent container in which they are placed.
<!DOCTYPE html>
<html>
<body>
<style>
:root{
--bgColor: yellow
}
</style>
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="var(--bgColor)" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
As you can see above, we have used svg which creates circle where fill property is dynamic based on css variable –bgColor
and ouptut will be
like above you can use css variable to make things dynamic
Coclusion:
css variables is very effective functionality which can be used to reduce your css overhead, But before using it you should check its browser support here
