Designer & Front-end Dev, DJ and Gooner, based in sunny Barbados.
I’m Prince Bazawule, Graphic Designer and Front-end Developer based in sunny Barbados
I am Co-founder of PixlD Inc; a boutique new media outfit specialising in web, social media and app development, a hobbyist DJ, promoter and a Gooner! ( …like Arsène Wenger )
CSS Variables! They’re finally available and supported in all browsers – Yeay! 🎉… Well almost all. According to Caniuse, they’re currently available on all major browsers except IE as well as on all mobile browsers except Opera Mini.
What are CSS Variables?
CSS Variables allow the use of, well… variables in CSS without need for pre-processors. As developers, we know that as web projects grow bigger, it becomes more difficult to maintain large and often times messy CSS. Variables also gives us the ability to reuse and easily edit repeatedly occurring CSS properties. Although that has been achievable, to an extent, with Sass, Less and other extensions, they have been pre-processors, which require compiling before use. Variables, however, can be used right away in your browser.
Setting and Using CSS Variables
Like variables in Javascript, they are defined to contain specific values, which can be reused throughout a document. They are set using custom property notation (e.g. --color-black: #000;) and are accessed using the var() function (e.g. color: var(--color-black);) – simple.
Why are CSS Variables useful?
CSS Variables are potentially very useful; presenting opportunities to make our CSS more efficient as well as maintainable and in this post, I outline some of the reasons why you should explore and consider using them.
1. Change dynamically
Variables are dynamic. They can change at runtime, allowing for scoping to elements and overriding as required. On changing a variable, the lowermost definition in the stylesheet overwrites the ones above it; following standard cascade rules.
Variables can be saved with semantic/human readable name, which can be self-descriptive and easy to remember. For example: --color-grey is easier to understand than rgba(220, 231, 235, 1);
Variable, once defined, can be used repeatedly. For example, for a colour that might be used in hundreds of different places, CSS variables allow the value to be stored in one place, then referenced in multiple other places. If the colour needs to be updated, the change is made in only one place, rather that searching and replacing the hundreds of different places.
Variables are subject to the cascade, and inherit their value from their parent. For example: for the class="four" element, 10px is inherited from its parent
Mutiple fallback values can be defined, which will be used when the given variable is not yet defined.
.two {
color: var(--my-var, red); /* Red if --my-var is not defined */
}
.three {
background-color: var(--my-var, var(--my-background, pink)); /* pink if my-var and --my-background are not defined */
}
.four {
background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}
Variable values (of custom properties) can be used in Javascript, just like standard properties; presenting great potential.
// get variable from inline style
element.style.getPropertyValue("--my-var");
// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");
// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);
9. Case sensitive
Variables (custom properties) are case sensitive, so --header-color and --Header-Color are different
Allows for complex calculations; again, presenting great potential.
--foo: if(x > 5) this.width = 10;
BONUS* – CSS Variable Demo
A quick demo to display use of CSS Variables in action. This allows the use of variables in CSS without need for pre-processors. It is currently available on all major browser except IE and all mobile browsers except Opera Mini.