One thing I’ve noticed is that the custom CSS variable/property style values you can access using getComputedStyle are very precise in that the space between the property name and the value is annoyingly accounted for.
Let’s say I have the following style rule:
body {
--foo: false;
}
I try to access the value as follows:
var bodyStyle = getComputedStyle(document.body);
var fooValue = bodyStyle.getPropertyValue("--foo");
alert(fooValue);
You would think that what gets printed is just "false".
What actually gets printed is " false".
Ignore the quotation marks, but do focus on the leading space in front of the false. This only happens for values set by custom properties. Other properties return values that are properly formatted with leading spaces ignored.
I’ve seen this in both Chrome, Safari, and Firefox. Strange, right?
Cheers,
Kirupa
