Okay, we'll go with this quick and straight. When you first start diving into CSS, you do the usual thing like changing color, changing fonts, etc. Then you dive deep into media queries, cross-browser properties, and finally to variables.
Quick note on CSS variables 📝
Of course, some basics first.
CSS Custom Properties or CSS Variables allows us to store a value stored in one place, then referenced in multiple other places.
Sometimes specific values need to be reused throughout a document. A typical example is when you get a specific color palette from designers, and you need to add specific hex values of colors, font-sizes, or even some responsive breakpoints. You assign these values to your custom-made CSS properties called variables here.
This is useful not only because they can be used at multiple instances and makes editing the values easy but also, it makes the properties easier to read when referring to it later. For example: --headline-color is better to read than #000.
Check out this wonderful CodePen example:
Usage and syntax
Declaring a custom CSS property is created by assigning the double hyphen (--) in front of the variable name, and then the property value is written like any other CSS property.
Check out this example:
Now, to use this custom property anywhere in your CSS file you can do this:
So, you don't need to write lightgray value for the background-color in all places where there is a need to use the var() function and pass in the CSS custom variable inside.
Time to start interacting with the web developer's favorite language.
So, what these new functions mean?
- document.documentElement: this returns the Element which is usually the root element of your HTML document.
- style.setProperty(): it sets a new value for a property on a CSS style declaration object.
The setProperty() takes in the property name, it's value, and optionally the priority.
Yeah, exactly what you're thinking right now. Just as with any other language, we have setters and getters here too. With the setProperty we were setting a new value, and here with getPropertyValue, we return a DOMString containing the value of the above-specified CSS property.
Here's a practical example:
This will return the value of --accent-color as #663399 when the browser renders the webpage.
The removeProperty method will remove the provided property from a CSS style declaration object.
So, if you want to dynamically remove the attached custom CSS property, then you can have code similar to this:
Using event listeners 👂
First, start off with declaring the CSS variables:
By declaring them at :root, we're putting them into the root element of the DOM tree. Typically, it's the <html> element.
Next, we will be using these variables in our <div> as follows:
As you know by now, it translates into:
We have set the initial position of the <div>, now let's interact with an event listener.
The result will be similar to this:
More resources 🤩
Go ahead and learn more about custom CSS properties from the resources given below: