CODEWITHSUNDEEP
htmlcsspure-css
Louis P
Louis P

Reputation: 33

Pure CSS - Persistent state in variables

I have some variables in my CSS sheet and I want to store a state (would be a number).

For example, I would like to create an "almost" infinite counter that would increment at each click.

The first thing I tried (after some issues with vars and calcs) was using a counter, keyframes with forwards fill mode but at each new click the counter was reset.

Code:

@keyframes increment {
  from {}
  to   { counter-increment: count; }
}

#counter {
  counter-reset: count;
}

#counter:active {
  animation: increment forwards;
}

#counter::after {
  content: "Count: " counter(count);
}
<button id="counter">Add 1</input>

I also tried using checkboxes and radio buttons that worked (once the element gets the checked state, then the display is set to none and the next one is displayed) but it was quite "limited" by the number of checkbox or radio.

Then I came across this: https://medium.com/@alexc73/state-in-css-ac57a1ebde09 which uses a pretty similar mechanism despite the fact that it was quite buggy for me (Firefox 134.0 64 bits on Windows 11).

The last part of the question is about using the state stored as a variable (in a calc for example), but I didn't find any way to use a counter as a variable.

So I'd like to ask if anyone already came across a similar problem and if a solution (even a hack) exists.

Upvotes: 0

Views: 54

Answers (0)

Related Questions