Day 41: custom properties and url()s
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
Let’s say you want to swap the background image of an element based on a certain condition, like whether it’s pressed, using custom properties.
This looks fine, but it doesn't work because
var(--background-image) contains invalid characters. The reason the argument is invalid is that
url() works both with quotes
url('image.svg') and without quotes
url(image.svg). By passing a value without quotes you're not passing a string to a CSS function, but you're creating an url-token and this token expects a certain format that requires characters like ( to be escaped.
That's a very abbreviated explanation. For details, please read “Why custom properties don't work with the url() CSS function” by the amazing Stefan Judis.
To work around that issue, you have to move the
url() function into the value of the custom property.
See on CodePen.