This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
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");
}
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-11-21T00:00:00+00:00) Day 41: custom properties and url()s. Retrieved from https://www.scien.cx/2022/11/21/day-41-custom-properties-and-urls-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.