So you might be aware of CSS Custom Properties that let you set a variable, such as a theme color, and then apply it to multiple classes like this:
:root {
--theme: #777;
}
.alert {
background: var(—-theme);
}
.button {
background: var(—-theme);
}
Well, I had seen this pattern so often that I thought Custom Properties could only be used for color values like rgba or hex – although that’s certainly not the case! After a little bit of experimentation and sleuthing around, I realized that it’s possible to use Custom Properties to set image paths, too.
Here’s an example of that in action:
:root {
--errorIcon: url(error.svg)
}
.alert {
background-image: var(--errorIcon);
}
.form-error {
background-image: var(--errorIcon);
}
Kinda neat, huh? I think this could be used to make an icon system where you could define a whole list of images in the :root
and call it whenever you needed to. Or you could make it easier to theme certain classes based on their state or perhaps in a media query, as well. Remember, too, that custom properties can be overridden within an element:
:root {
--alertIcon: url(alert-icon.svg)
}
.alert {
background-image: var(--alertIcon);
}
.form-error {
--alertIcon: url(alert-icon-error.svg)
background-image: var(--alertIcon);
}
And, considering that custom properties are selectable in JavaScript, think about the possibilities of swapping out images as well. I reckon this might useful to know!
Yep, they can store URL references alright.
And also much more. They were considered for CSS “mixins” too (the now abandoned @apply rule proposal), because they can store whole CSS rules, so you could write
And you can do this right now and that CSS would be valid. Not that it’s of any use, alas… Not without JavaScript, at least.
And by the way, custom properties can also store strings or even JavaScript snippets…
You reckon correctly! Thanks for the tip
One gotcha is that the URL will be resolved relative to the file where you use the custom property, not relative to the file where you’ve defined them… That makes it a little bit if you want to override custom properties in another file for e.g. theming
You can also do this:
Why bother?
Saves an extra download, enables you to keep all of your icons in one easy to read file.
Note that this only works if your SVGs are clean and hand crafted. In this example the search icon is just a circle and a line, if it was regurgitated from a 1990’s style desktop publishing program as an SVG it would have all kinds of cruft in there as well as the circle defined as scores of points, all specified to nine decimal places which is a bit over the top when you can just type circle with radius and stroke width.
You can also do a filter on your icons, so if the above was set with white as the stroke then in the CSS you could push the brightness down to 0.1 to make it black.
The namespace is required for in CSS SVG whereas it is not needed for inline CSS.
The backslash on each line keeps it legible and enables line breaks.
Any references to colours with a hex code need the hash character escaped as %23. Hence in this example there are named colours (black).
The title attribute can be used too, this helps identify your icons.
Can you keep the variables in a separate file for easy theming?
Absolutely — if you’re using a preprocessor like Sass, then you can keep them in a partial and attach them to the
:root
or some other top-level element or parent component where they’ll be used.