[css-values-4][@property url] [Curiosity] URL interpretation differences with @property in CSS

[CavaliereDavid]

Hi, I am trying to understand whether this behavior is due to Apache or the CSS specification itself. Could you clarify if this is intended?

My questions are:

• Why does @Property cause the browser to encode spaces differently than a direct url()?
• Is this behavior specified in CSS Values and Units Level 4, or is it an implementation quirk of browsers?
• Is there a recommended, CSP-safe way to define URLs in @Property without manually encoding spaces?

Thank you in advance for your help!

I defined a CSS custom property to replace directly using a url() in a rule:

@property --ball {
  syntax: "<url>";
  inherits: false;
  initial-value: url('../../images/ajax-loader-big-circle-ball.gif');
}

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5) var(--ball) 50% 50% no-repeat;
}

I noticed something odd with how the URL gets interpreted by the browser:

When I use the url() directly in the CSS, the request is made to:
http://localhost:8081/images/ajax%20loader%20big%20circle%20ball.gif

When I use the @Property custom property with initial-value, the browser seems to request:
http://localhost:8081/images/ajax-loader-big-circle-ball.gif

To make it work, I had to change the initial-value to:
initial-value: url('../../images/ajax%20loader%20big%20circle%20ball.gif');

[Loirooriol]

Why would - be encoded as a space? There is something broken in your setup.

[emilio]

What's your stylesheet URL and your document URL? Without that it's hard to say whether what you're seeing is expected or not.__

[CavaliereDavid]

Thanks @Loirooriol and @emilio for taking the time to look at this. I eventually fixed the problem after stepping away, but I wanted to share what I did in order to fully grasp the behavior of @property.

The document url is http://localhost:8081/company/default.jsp?bsess=

The stylesheet is inside the header of a default.jsp : <link rel="stylesheet" type="text/css" href="css/company/company.css">

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5) url('../../images/ajax loader big circle ball.gif') 50% 50% no-repeat;
}

This is the network request that is being made: http://localhost:8081/company/images/ajax%20loader%20big%20circle%20ball.gif

If I define the variable with the following syntax:

html {
  --ball2: url('../../images/ajax%20loader%20big%20circle%20ball.gif');
}

and then use it in modal-backdrop, the request is made to http://localhost:8081/company/images/ajax%20loader%20big%20circle%20ball.gif

While if i use @Property

@property --ball {
    syntax: "<url>";
    inherits: false;
    initial-value: url('../../images/ajax loader big circle ball.gif');
}
@property --ball1 {
    syntax: "<url>";
    inherits: false;
    initial-value: url('../../images/ajax%20loader%20big%20circle%20ball.gif');
}

In both cases the request is made to: http://localhost:8081/images/ajax%20loader%20big%20circle%20ball.gif` therefore it loses the
`/company/'

I resolved by simply adding the \company\ but I did not grasp why the two request are being interpreted differently.

Thank you again

Update

I also noticed that by removing the ../../ the request is being correctly made to http://localhost:8081/company/images/ajax%20loader%20big%20circle%20ball.gif

@property --ball1 {
    syntax: "<url>";
    inherits: false;
    initial-value: url('images/ajax loader big circle ball.gif');
}