Day 41: custom properties and url()s

posted on November 21., 2022

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.

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");
}

See on CodePen.

Further reading