Can CSS Variables Be Interpolated with the `url()` Function?

Interpolation with CSS Variables

Can CSS variables be interpolated with the url() function?

Custom CSS properties facilitate interpolation for most functions, including rgba(). However, interpolation with url() presents challenges due to legacy reasons.

What is the limitation with url()?

The url() token cannot be split into var() expressions because the parser treats var(--url) as an unquoted URL. Consequently, interpolation does not occur, rendering the background declaration invalid.

Alternative Approaches

To avoid the url() limitation, viable options include:

• Specifying the entire url() expression in the custom property:

:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}

• Employing JavaScript for interpolation instead of var().

The above is the detailed content of Can CSS Variables Be Interpolated with the `url()` Function?. For more information, please follow other related articles on the PHP Chinese website!