0

I found a weired problem when working with custom properties. Definition in css file:

--testprop: /test/01234;

When I access this property by calling

const style = window.getComputedStyle(window.document.body);
const testprop = style.getPropertyValue('--testprop');

the string value of testprop is set to /test/1234.

This means the characters /0 are parsed browser internally to /.

When the custom property is defined like so:

--testprop: '/test/01234';

the javascript access results in a string value of "/test/01234" (something I expect).

Used browser: Chrome Version 97.0.4692.71 (Offizieller Build) (64-Bit)

Do I miss something here? I wouldn't expect the rewriting of /0 in any circumstances.

Peter Vogel
  • 101
  • 1
  • 4
  • Given, that everything in CSS should be a string, this looks like a bug in Chromium, as this issue can be reprocuded in Edge too, but not in Firefox. – Teemu Jan 18 '22 at 10:43
  • On the other hand, why to store such a value in a CSS variable, it can't be used anywhere in CSS. You can't do anything like `background-image: url(var(--testprop));`. If the variable is purposed to be used as a JS variable only, it's not reasonable to store it as a CSS variable. – Teemu Jan 18 '22 at 10:50
  • I Agree, it is a little bit specific. I just need the url and can only get it from a delivered css file. But anyway, the definitions for custom-property values do allow all the used character tokens as far as I understand the documentations. – Peter Vogel Jan 18 '22 at 10:58

1 Answers1

0

In fact this kind of problem is referenced in an existing bug report:

https://bugs.chromium.org/p/chromium/issues/detail?id=661854

Peter Vogel
  • 101
  • 1
  • 4