Description
An often used hack with @property is the space toggle hack where you flip a custom property between a single space and initial to all some clever things with it.
While looking into registering a custom property with a space as a default value, I found that it is not possible to do so. The code below does not work (tested in Safari TP 174 and Chrome Canary 117):
@property --registered {
syntax: '*';
initial-value: ;
inherits: true;
}With the code above, it is as if --registered is not registered at all.
Its JS counterpart – using CSS.registerProperty(…) – does work, but that’s not what I was aiming at … I wanted a pure CSS version.
// This works …
CSS.registerProperty({
name: '--registered',
syntax: '*',
initialValue: String.fromCharCode(0x20), // (or just use ' ')
inherits: true
});Furthermore, for the CSS version, I tried all these variations, none of which worked:
initial-value: ; /* Single space, right? */
initial-value: ; /* Maybe two spaces will work? */
initial-value: \ ; /* Maybe escaping it will work? */
initial-value: '\ '; /* Maybe quoting it will work? */
initial-value: ' '; /* Oh, this is just a string "' '" */
initial-value: " "; /* If single quotes don’t work, double ones might? */
initial-value: 0020; /* Charcode, maybe? */
initial-value: \0020; /* O yeah, hex must have a leaving \ */
initial-value: "\0020"; /* Maybe quote it? */
initial-value: \\0020; /* Escaped \ before the charcode, maybe? */
initial-value: U+0020; /* Or a codepoint maybe? */
initial-value: "U+0020"; /* What if I quoted it? */
initial-value: 0000; /* This miraculously works for colors but not for anything else */
initial-value: ; /* A zero width space perhaps? */So now I’m wondering, what is the syntax to set the initial value of an @property-registered custom property to a single space? I don’t see any special mentions in the syntax for descriptor declarations, so expected it to behave like property declarations. Or is this a parser bug in both Chrome Canary and Safari TP?