Rejoice, web warriors, CSS variables are here. Actually, they have been here for a while, but they have finally had the nod of recognition from the web overlords, and can be implemented with confidence.
What are CSS variables?
The W3C (World Wide Web Consortium) first introduced CSS variables in 2012. CSS (Cascading Style Sheets) essentially tells a web page what it should look like; what colours, fonts and layout it should have. It is set up in an external stylesheet that controls multiple web pages, saving programming time! For more information on CSS, head to the W3C breakdown. CSS variables have been avoided by various browsers for a few years, but have finally been acknowledged and implemented on a large scale.
CSS variables make CSS development/maintenance more straightforward. They allow you to change the instructions on one variable, instead of hunting through the entire script to find every time that specific style is mentioned.
Wait, what?
To give a real world example – you are teaching a class. Your class are spread across a building and all wearing noise cancelling headphones. You need to give them an instruction. You can either hunt round the building for each student, remove their headphones and tell them what they need to do individually (bearing in mind that some students may be hiding in hard to find places). Or you can speak into a microphone and have the instructions played out to all students through the headphones, regardless of their location. So. Much. Easier.
It’s basically this, but telling the web pages to change a specific predesignated colour or style in multiple locations. You give the variable a name and value and then, rather than changing each rule, simply change the value of the variable.
They are essentially a custom property; if you have used Cornflower Blue throughout your page, but wish to switch to Battleship Gray, you no longer need to search for every entry of Cornflower Blue to switch it.
When building your site, set a specific variable name, perhaps an easy to find one like;
–monkey-mischief-font-color
And then choose the variable value;
–monkey-mischief-font-color: #848482
You will need to establish this as property/pairs values so it is recognised. Use a selector like the :root pseudo-class. So;
:root {
–monkey-mischief-font-color: #848482;
}
Then, in later rules, you can retrieve the value by referencing the variable name as your value. So;
<h1 style=”color:–monkey-mischief-font-color;”>This Heading is whatever colour the original variable value is set to</h1>
Everywhere you use the –monkey-mischief-font-color variable will be set to the font color defined in the initial variable value (actually, this doesn’t just have to be used for font colours, but we won’t overcomplicate). So you only need to change the initial value to change the colour across the board. Shout one instruction down the microphone, and all the good little children should understand the new instruction!
Here’s an example using button colour:
First we establish the property/pairs value using the :root pseudo- class selector.
Then we retrieve these values later using the variable name.
Because we are clever monkeys, we have set up JavaScript so that it pulls in whatever is inputted and changes the variables that are set up in the DOM, meaning you get a live representation of the changes!
All of this results in the following…see how all of the buttons change colour and size when the values change? Pretty cool right?
If you want to chat variables, ridiculously named HTML colours or anything web based with us, then please get in touch. We love talking about web design, and can offer a host of web design services to support your business.
