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.
button {
--background-image: "/not-pressed.svg";
background: url(var(--background-image));
}
button[aria-pressed="true"] {
--background-image: "/pressed.svg";
}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") or 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.
button {
--background-image: url("/not-pressed.svg");
background: var(--background-image);
}
button[aria-pressed="true"] {
--background-image: url("/pressed.svg");
}