Can CSS Variables Be Used Inside the `url()` Function?

Can CSS Variables Interpolate with url()?

Despite the widespread use of CSS variables, there remains a limitation when it comes to interpolating them within the url() function. This limitation arises from the legacy nature of the url() token.

In modern CSS, interpolation of custom properties is a fundamental feature. It allows dynamic values to be inserted into various functions, such as rgba(). However, the url() function stands as an exception to this rule.

When using url(var(--url)), the parser interprets it as a single url() token, not as a combination of a url() function token and a variable expression. As a result, the variable is treated as a URL itself, rendering the interpolation invalid.

To circumvent this issue, avoid constructing URL tokens from multiple variable expressions in url(). This includes approaches such as --uo: url(; --uc: ); and background: var(--uo) var(--url) var(--uc);. Custom properties cannot contain unmatched string delimiters or parts of url() tokens.

For backgrounds, the solution lies in specifying the complete url() expression within the custom property and substituting it directly:

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

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

Alternatively, JavaScript can be utilized to perform the interpolation instead of var().

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