4 ms·

YEP! Absolutely nailed it. That's what's up! I've been calling it Space Toggle. It does all kinds of stuff beyond toggle though - the whole world of conditional

YEP! Absolutely nailed it. That's what's up! I've been calling it Space Toggle. It does all kinds of stuff beyond toggle though - the whole world of conditional logic is possible. You can combine them in any way, &&, ||, !, it's all possible. You can see some more of my examples here: https://twitter.com/James0x57/status/1283912525248069632 https://twitter.com/James0x57/status/1283912525248069632 https://twitter.com/James0x57/status/1283596399196680192 https://twitter.com/James0x57/status/1283596399196680192 https://twitter.com/James0x57/status/1282303255826046977 https://twitter.com/James0x57/status/1282303255826046977 The second version of augmented-ui is packed to the brim with it, I've been working on it for months :D

teej 6y ago
This is really cool. How did you come up with this technique?
- James0x57 6y ago
  Thanks! :D I wanted really badly to be able to do it, so I read the spec very carefully top to bottom a handful of times. And suddenly one day I just realized it. Dove right in and after a bit of progress, I discovered all the logic that was possible too. I had already been using spaces as a fallback value to do dynamic composition of standard properties ( https://twitter.com/James0x57/status/1233246818118533120 https://twitter.com/James0x57/status/1233246818118533120 ) so it wasn't too far off to combine it with the "initial" behavior that causes the entire var dependency tree to evaluate to initial, allowing fallback behavior from any point in the tree. :)
karmakatze 6y ago
Obviously this is really cool. Also obviously this is a hack. I wouldn't expect this behavior to stay the same and not break such sites at any time. Also, clearly this was not the intention of the spec writers so it is syntactically weird and semantically in an unexpected place. So, while obviously cool, maybe this is not something one should rely on, right?
tobr 6y ago
Can I ask, what’s the reason for using the keyword “initial”? As I understand it it could be any string that doesn’t accidentally create a valid value?
- uxamanda 6y ago
  I was playing around with this here: https://jsbin.com/zebipenidi/1/edit https://jsbin.com/zebipenidi/1/edit and tried editing the keyword to other things. When I tried other strings (my name, "null", other CSS "words" like opacity) it broke. I wonder if this is because the initial variable definition needs to be valid css in order to be replaced?
- uxamanda 6y ago
  The OP tweet this about it [0], which links to the CSS spec [1]. It seems like a variable defined as initial triggers a different behavior than a traditional "syntax" error. [0] https://twitter.com/James0x57/status/1283909866915074048 https://twitter.com/James0x57/status/1283909866915074048 [1] https://www.w3.org/TR/css-variables-1/#invalid-variables https://www.w3.org/TR/css-variables-1/#invalid-variables

teej 6y ago

This is really cool. How did you come up with this technique?

James0x57 6y ago
Thanks! :D I wanted really badly to be able to do it, so I read the spec very carefully top to bottom a handful of times. And suddenly one day I just realized it. Dove right in and after a bit of progress, I discovered all the logic that was possible too. I had already been using spaces as a fallback value to do dynamic composition of standard properties ( https://twitter.com/James0x57/status/1233246818118533120 https://twitter.com/James0x57/status/1233246818118533120 ) so it wasn't too far off to combine it with the "initial" behavior that causes the entire var dependency tree to evaluate to initial, allowing fallback behavior from any point in the tree. :)

karmakatze 6y ago

Obviously this is really cool. Also obviously this is a hack. I wouldn't expect this behavior to stay the same and not break such sites at any time. Also, clearly this was not the intention of the spec writers so it is syntactically weird and semantically in an unexpected place. So, while obviously cool, maybe this is not something one should rely on, right?

tobr 6y ago

Can I ask, what’s the reason for using the keyword “initial”? As I understand it it could be any string that doesn’t accidentally create a valid value?

uxamanda 6y ago
I was playing around with this here: https://jsbin.com/zebipenidi/1/edit https://jsbin.com/zebipenidi/1/edit and tried editing the keyword to other things. When I tried other strings (my name, "null", other CSS "words" like opacity) it broke. I wonder if this is because the initial variable definition needs to be valid css in order to be replaced?
uxamanda 6y ago
The OP tweet this about it [0], which links to the CSS spec [1]. It seems like a variable defined as initial triggers a different behavior than a traditional "syntax" error. [0] https://twitter.com/James0x57/status/1283909866915074048 https://twitter.com/James0x57/status/1283909866915074048 [1] https://www.w3.org/TR/css-variables-1/#invalid-variables https://www.w3.org/TR/css-variables-1/#invalid-variables