DEV Community

Discussion on: An Innovative Idea for Holding State in CSS

View post

Replies for: .test { --true: ; --false: initial; --variable: var(--false); --red-if-true: var(--variable) red; background: var(--red-if-true, blue); } .test:ho...

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • • Edited

Thanks for explanation. I've noticed that this doesn't work in Chrome:

html:hover {
  --enable: paused;
  animation-play-state: var(--enable) running;
}
Enter fullscreen mode Exit fullscreen mode

Inside this demo: codepen.io/propjockey/pen/b01b6646...

Does it only work with token initial and space?

Thread Thread
 
janeori profile image
Jane Ori •

Yes, the space toggle is only initial and space. The tl;dr on space toggles in the article should help explain what's happening. LMK if you want more clarity on something, happy to help!

Thread Thread
 
jcubic profile image
Jakub T. Jankiewicz • • Edited

So:

--var: initial;
Enter fullscreen mode Exit fullscreen mode

Just reset CSS variable to initial value which is no value at all. Am I right? If so I would write this in TL;DR section. I wonder how it would behave if you register the CSS variable in JavaScript with initial value.