Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: A completely different way to write responsive, vanilla, CSS

propjockey.github.io

Post reply on HN
Print view View original

11–20 of 48 posts

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#11

Post by Rotten194 »

So I think I understand how this works? Correct me if I'm wrong...

So I made this example: https://jsbin.com/meqibawotu/1/edit?html,css,output

We have two "toggle vars", `--is-hovered` and `--is-special`, which are triggered by a hover selector and a class, respectively, though they could be triggered by anything (like a media query or JS).

The "false" value for the toggle is "initial", so at the top I set:

    div {
      --is-hovered: initial;
      --is-special: initial;
    }
The first trick is that assigning a variable value as a single space token is valid according to spec (https://www.w3.org/TR/css-variables-1/#syntax), making the var(...) usage substitute a single space. So if our variable should be "true", we use whatever method to set it to a single space:

    div:hover {
      --is-hovered: ;
    }
    
    div.special {
      --is-special: ;
    }
The second trick is that an invalid property value will fall back to the second argument of the `var()` function. So we first create a property that only has a valid value if the flag is true (a single space):

    --hover-opacity: var(--is-hovered) 1.0;
If the div is hovered, `--is-hovered` is a single space, so the property value becomes:

    --hover-opacity:  1.0; // note two spaces
If the div isn't hovered, `--is-hovered` is `initial`, so the property value becomes:

    --hover-opacity: initial 1.0;
Which is invalid CSS!

We can then interpret this in our final opacity property:

    --regular-opacity: 0.5;
    --opacity: var(--hover-opacity, var(--regular-opacity));
If the div is hovered, the first argument is evaluated to:

    --opacity: var( 1.0, var(--regular-opacity));
And since that's valid syntax, the second argument is short-circuited (ignored). However, if the div isn't hovered, then the opacity property is computed as:

    --opacity: var(initial 1.0, var(--regular-opacity));
The first argument is invalid! So the property falls back to the second argument, and we get `var(--regular-opacity)`.

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#12

Post by James0x57 »

Rotten194 wrote: post #11

So I think I understand how this works? Correct me if I'm wrong... So I made this example: https://jsbin.com/meqibawotu/1/edit?html,css,output We have two "toggle vars", `--is-hovered` and `--is-special`, which are triggered by a hover selector and a class, respectively, though they could be triggered by anything (like a media query or JS). The "false" value for the toggle is "initial", so at the top I set: div { --i…

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/1283596399196680192 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

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#13

Post by teej »

James0x57 wrote: post #12
Rotten194 wrote: post #11

So I think I understand how this works? Correct me if I'm wrong... So I made this example: https://jsbin.com/meqibawotu/1/edit?html,css,output We have two "toggle vars", `--is-hovered` and `--is-special`, which are triggered by a hover selector and a class, respectively, though they could be triggered by anything (like a media query or JS). The "false" value for the toggle is "initial", so at the top I set: div { --i…

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/1283596399196680192 https://twitter.com/…

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

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#14

Post by James0x57 »

Rotten194 wrote: post #11

So I think I understand how this works? Correct me if I'm wrong... So I made this example: https://jsbin.com/meqibawotu/1/edit?html,css,output We have two "toggle vars", `--is-hovered` and `--is-special`, which are triggered by a hover selector and a class, respectively, though they could be triggered by anything (like a media query or JS). The "false" value for the toggle is "initial", so at the top I set: div { --i…

Heads up too, Firefox and Chrome both had trouble setting a var to space from the dev tools css panel. So if you play with this further, you may have to deal with that.

I filed bugs to get it fixed though: https://bugzilla.mozilla.org/show_bug.cgi?id=1630488 (not fixed yet)

https://bugs.chromium.org/p/chromium/issues/detail?id=107129... (fixed!)

And minifiers hate it. lol

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#15

Post by Rotten194 »

James0x57 wrote: post #14
Rotten194 wrote: post #11

So I think I understand how this works? Correct me if I'm wrong... So I made this example: https://jsbin.com/meqibawotu/1/edit?html,css,output We have two "toggle vars", `--is-hovered` and `--is-special`, which are triggered by a hover selector and a class, respectively, though they could be triggered by anything (like a media query or JS). The "false" value for the toggle is "initial", so at the top I set: div { --i…

Heads up too, Firefox and Chrome both had trouble setting a var to space from the dev tools css panel. So if you play with this further, you may have to deal with that. I filed bugs to get it fixed though: https://bugzilla.mozilla.org/show_bug.cgi?id=1630488 (not fixed yet) https://bugs.chromium.org/p/chromium/issues/detail?id=107129... (fixed!) And minifiers hate it. lol

Could you get around it with a special `--empty: ;` rule in root perhaps? Would potentially make things more clear, also.

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#16

Post by James0x57 »

teej wrote: post #13
James0x57 wrote: post #12

Earlier quoted context omitted.

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/1283596399196680192 https://twitter.com/…

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

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 ) 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. :)

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#17

Post by James0x57 »

Rotten194 wrote: post #15
James0x57 wrote: post #14

Earlier quoted context omitted.

Heads up too, Firefox and Chrome both had trouble setting a var to space from the dev tools css panel. So if you play with this further, you may have to deal with that. I filed bugs to get it fixed though: https://bugzilla.mozilla.org/show_bug.cgi?id=1630488 (not fixed yet) https://bugs.chromium.org/p/chromium/issues/detail?id=107129... (fixed!) And minifiers hate it. lol

Could you get around it with a special `--empty: ;` rule in root perhaps? Would potentially make things more clear, also.

Yes, that would work. Then you just assign your properties to that var as long as you never inspect --empty on the root and you're good to test. Good thinking.

Should be fixed in FF sooner or later though, I reported it in April

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#19

Post by tmpfs »

This is really smart, good job. I look forward to taking this for a spin, the point of not adding a build step is critical for some of my current work. I think the time for using CSS preprocessors is over, they add very little value now we can use variables and combined with tricks like these we can speed up our builds!
Post reply on HN