6 ms·

Custom Properties as State

54 points by polm23 6y ago

bawolff 6y ago
I'm not sure what is so special about using css custom properties (aka css variables) as well, variables. That is their intended purpose after all, what else would you use them for? In fairness the author talks about using them very dynamically (rip cache), which is a bit different, but still its just an extension of the basic idea of setting a variable.
- pavlov 6y ago
  A lot of web front-end development these days is just very elaborate costume parties for global variables.
  - arthurcolle 6y ago
    wait until you hear about the song and dance needed for a modern React app
    - bawolff 6y ago
      That's my point though, react has an actual song and dance. This is literally just using a feature literally named "variables" to store data, as if it was like a variable or something.
- brundolf 6y ago
  One of the wonderful things about CSS is that because it's a domain-specific language, it can afford to be 100% declarative, with 100% deterministic behavior, and doesn't need any exceptions to be made or trap-doors to be added. The trap-door is JavaScript. So, the more things you can move over into CSS, the more things exist in this beautiful pure context that's highly debuggable thanks to modern browser tooling (and that's not even getting into the performance advantages vs doing things in JS). Put simply: it's really exciting every time CSS gets a new "real programming language" feature, even if these things are basic and familiar in other programming contexts. In this case we're not really getting a "new" feature, but people are used to thinking of CSS variables as like, a theming mechanism. I for one had never thought to use them as an API data format. The author is probing the boundaries of what's possible to do with them, and that's exciting and interesting. As an aside: there's also a huge community that loves to just push and abuse HTML/CSS as far as they can for the sport of it. CSS-Tricks and its sibling-site CodePen are at the center of that community. To people like that, the idea of an API endpoint that uses a stylesheet to relay raw data for arbitrary usage is pretty cool.
  - saurik 6y ago
    If you add enough "real programming language" features, aren't you going to lose the "wonderful thing" you cite about CSS?
    - valenterry 6y ago
      Yes, at some point. Check out, for example, dhall (https://dhall-lang.org/ https://dhall-lang.org/) to see where the sweet spot lies.
    - brundolf 6y ago
      Not if you don't add state/control flow. That's the key. That stuff is exiled to JS-land. And by "state" I mean it in its proper sense: something where CSS itself can mutate its own state. The OP calls CSS custom properties "state", but they're really just "constants" in the context of CSS itself (they can only be mutated by JS).
      - bawolff 6y ago
        I'd argue that css already has (very limited) control flow [calc() statements, and the cascading nature of selectors]. In combination with user interaction and html, it also has state. For example see the css implementation of celluar autonoma http://eli.fox-epste.in/rule110/ http://eli.fox-epste.in/rule110/
        brundolf 6y ago
        CSS has expressions, but not imperative logic or mutability (it's possible I misused the term "control flow") You're right that HTML (technically, the DOM) has a little bit of intrinsic state, despite our mental model of it being static. However that state is constrained to user interaction and is always very localized, so it avoids most of the maintainability problems that we think of as coming from having mutable state
- rriepe 6y ago
  > (rip cache) You'd have a separate theme.css that defined the new variables. Because of CSS variables you can keep the main style.css and all the markup the same.
  - bawolff 6y ago
    True, but you still cant do first paint until all css is loaded, and for people with fast connections, the latency of the extra roundtrip matters more than the size of the file downloaded (within reason)
    - rriepe 6y ago
      Yeah you'd have to load it in async to avoid that. You could start with a gray base and have the theme color pop in. Flash of original color.
    - bryzaguy 6y ago
      An alternative would be keeping theme state in JS as suggested at the end of the article which improves the cache-ability of the css file as themes change.
- deleted 6y ago
  [deleted]
brigandish 6y ago
As I read I wondered about the possibility of its abuse as a payload system, then I reached this linked post[1]: > What happens when you combine the fact that part after the : for CSS Custom Properties doesn’t need to be valid CSS with window.getComputedStyle()? You get a way of passing data – including Arrays, Objects, and even JSON – from CSS to JavaScript. The first article proposes the possibility of sending updated variables via a CDN, and the linked one shows a CSS variable being parsed as JSON and then executed by the Javascript engine. There's probably some fun and high jinks to be had there… [1] https://www.bram.us/2020/03/30/pass-data-from-css-to-javascript-with-css-variables/ https://www.bram.us/2020/03/30/pass-data-from-css-to-javascr...
- dillondoyle 6y ago
  I thought the same thing.... classic cross domain ad tracking trick. BUT seems like chrome is trying to limit by keying caches to the domain. BUT BUT maybe not in cross domain web workers? IDK though might be some interesting ideas. *edit maybe just cname cloak like are doing to get around itp poc: https://github.com/dillondoyle/css_cache https://github.com/dillondoyle/css_cache https://dillondoyle.github.io/css_cache/index.html https://dillondoyle.github.io/css_cache/index.html
  - dennisy 6y ago
    Could you explain what this POC shows?
    - dillondoyle 6y ago
      sure. - basic js generates a css file with a random uuid and an example just my name. puts into a css var as a JSON object - sets long term cache headers AND a matching etag (same as uuid) - etag is a classic tracking trick but this is really cool it makes it accessible as state in JS client side - index.html prints/logs the css var - if css file is cached the uuid you see is static. no cookies needed - i was also going to add just an array of recent request domains, last and first session. would help test the chrome cache keying. could even put a jwt in there it's just a cool hack I never thought of. it's really cool how one thing can trigger an 'omg that's so obvious' brain fart. Like even before CSS vars you could have done this just set really specific css width 12.999933/122.3333 or something then measure the div you set or maybe simpler just a random "'uuid_"+the_uuid_var+"'" classname add to body and then read if it exists with js. But I never thought of it until I saw this article!!! Same with just generating a JS file with static var which I've played with but never deployed. though I might guess a css file is cached longer? idk i don't have proof of that just a guess could be wrong could maybe extend this to get around chrome cache keying with cname cloaking *edit actually maybe more likely that doesn't make sense idk i'd have to think about it or just reading their docs last night about their new policy (only a couple months old) it looks like webworkers aren't enforced yet and you can explicitly control & cache a file with JS in a webworker
germanka 6y ago
Can't stop thanking Chris Coyier for his work!
1shooner 6y ago
I don't understand the purpose of suggesting loading non-presentational state in CSS. The author says 'pseudo-content is even accessible these days', but inserting non-decorative content via CSS an explicit failure of WCAG 2.1 SC 1.3.1[1]. [1]https://www.w3.org/WAI/WCAG21/Techniques/failures/F87 https://www.w3.org/WAI/WCAG21/Techniques/failures/F87

54 points by polm23 6y ago

I'm not sure what is so special about using css custom properties (aka css variables) as well, variables. That is their intended purpose after all, what else would you use them for? In fairness the author talks about using them very dynamically (rip cache), which is a bit different, but still its just an extension of the basic idea of setting a variable.

pavlov 6y ago
A lot of web front-end development these days is just very elaborate costume parties for global variables.
- arthurcolle 6y ago
  wait until you hear about the song and dance needed for a modern React app
  - bawolff 6y ago
    That's my point though, react has an actual song and dance. This is literally just using a feature literally named "variables" to store data, as if it was like a variable or something.
brundolf 6y ago
One of the wonderful things about CSS is that because it's a domain-specific language, it can afford to be 100% declarative, with 100% deterministic behavior, and doesn't need any exceptions to be made or trap-doors to be added. The trap-door is JavaScript. So, the more things you can move over into CSS, the more things exist in this beautiful pure context that's highly debuggable thanks to modern browser tooling (and that's not even getting into the performance advantages vs doing things in JS). Put simply: it's really exciting every time CSS gets a new "real programming language" feature, even if these things are basic and familiar in other programming contexts. In this case we're not really getting a "new" feature, but people are used to thinking of CSS variables as like, a theming mechanism. I for one had never thought to use them as an API data format. The author is probing the boundaries of what's possible to do with them, and that's exciting and interesting. As an aside: there's also a huge community that loves to just push and abuse HTML/CSS as far as they can for the sport of it. CSS-Tricks and its sibling-site CodePen are at the center of that community. To people like that, the idea of an API endpoint that uses a stylesheet to relay raw data for arbitrary usage is pretty cool.
- saurik 6y ago
  If you add enough "real programming language" features, aren't you going to lose the "wonderful thing" you cite about CSS?
  - valenterry 6y ago
    Yes, at some point. Check out, for example, dhall (https://dhall-lang.org/ https://dhall-lang.org/) to see where the sweet spot lies.
  - brundolf 6y ago
    Not if you don't add state/control flow. That's the key. That stuff is exiled to JS-land. And by "state" I mean it in its proper sense: something where CSS itself can mutate its own state. The OP calls CSS custom properties "state", but they're really just "constants" in the context of CSS itself (they can only be mutated by JS).
    - bawolff 6y ago
      I'd argue that css already has (very limited) control flow [calc() statements, and the cascading nature of selectors]. In combination with user interaction and html, it also has state. For example see the css implementation of celluar autonoma http://eli.fox-epste.in/rule110/ http://eli.fox-epste.in/rule110/
      - brundolf 6y ago
        CSS has expressions, but not imperative logic or mutability (it's possible I misused the term "control flow") You're right that HTML (technically, the DOM) has a little bit of intrinsic state, despite our mental model of it being static. However that state is constrained to user interaction and is always very localized, so it avoids most of the maintainability problems that we think of as coming from having mutable state
rriepe 6y ago
> (rip cache) You'd have a separate theme.css that defined the new variables. Because of CSS variables you can keep the main style.css and all the markup the same.
- bawolff 6y ago
  True, but you still cant do first paint until all css is loaded, and for people with fast connections, the latency of the extra roundtrip matters more than the size of the file downloaded (within reason)
  - rriepe 6y ago
    Yeah you'd have to load it in async to avoid that. You could start with a gray base and have the theme color pop in. Flash of original color.
  - bryzaguy 6y ago
    An alternative would be keeping theme state in JS as suggested at the end of the article which improves the cache-ability of the css file as themes change.
deleted 6y ago
[deleted]

brigandish 6y ago

As I read I wondered about the possibility of its abuse as a payload system, then I reached this linked post[1]: > What happens when you combine the fact that part after the : for CSS Custom Properties doesn’t need to be valid CSS with window.getComputedStyle()? You get a way of passing data – including Arrays, Objects, and even JSON – from CSS to JavaScript. The first article proposes the possibility of sending updated variables via a CDN, and the linked one shows a CSS variable being parsed as JSON and then executed by the Javascript engine. There's probably some fun and high jinks to be had there… [1] https://www.bram.us/2020/03/30/pass-data-from-css-to-javascript-with-css-variables/ https://www.bram.us/2020/03/30/pass-data-from-css-to-javascr...

dillondoyle 6y ago
I thought the same thing.... classic cross domain ad tracking trick. BUT seems like chrome is trying to limit by keying caches to the domain. BUT BUT maybe not in cross domain web workers? IDK though might be some interesting ideas. *edit maybe just cname cloak like are doing to get around itp poc: https://github.com/dillondoyle/css_cache https://github.com/dillondoyle/css_cache https://dillondoyle.github.io/css_cache/index.html https://dillondoyle.github.io/css_cache/index.html
- dennisy 6y ago
  Could you explain what this POC shows?
  - dillondoyle 6y ago
    sure. - basic js generates a css file with a random uuid and an example just my name. puts into a css var as a JSON object - sets long term cache headers AND a matching etag (same as uuid) - etag is a classic tracking trick but this is really cool it makes it accessible as state in JS client side - index.html prints/logs the css var - if css file is cached the uuid you see is static. no cookies needed - i was also going to add just an array of recent request domains, last and first session. would help test the chrome cache keying. could even put a jwt in there it's just a cool hack I never thought of. it's really cool how one thing can trigger an 'omg that's so obvious' brain fart. Like even before CSS vars you could have done this just set really specific css width 12.999933/122.3333 or something then measure the div you set or maybe simpler just a random "'uuid_"+the_uuid_var+"'" classname add to body and then read if it exists with js. But I never thought of it until I saw this article!!! Same with just generating a JS file with static var which I've played with but never deployed. though I might guess a css file is cached longer? idk i don't have proof of that just a guess could be wrong could maybe extend this to get around chrome cache keying with cname cloaking *edit actually maybe more likely that doesn't make sense idk i'd have to think about it or just reading their docs last night about their new policy (only a couple months old) it looks like webworkers aren't enforced yet and you can explicitly control & cache a file with JS in a webworker

germanka 6y ago

Can't stop thanking Chris Coyier for his work!

1shooner 6y ago

I don't understand the purpose of suggesting loading non-presentational state in CSS. The author says 'pseudo-content is even accessible these days', but inserting non-decorative content via CSS an explicit failure of WCAG 2.1 SC 1.3.1[1]. [1]https://www.w3.org/WAI/WCAG21/Techniques/failures/F87 https://www.w3.org/WAI/WCAG21/Techniques/failures/F87