Reines CSS – Persistenter Zustand in Variablen ⇐ CSS

[Guest]

Ich habe einige Variablen in meinem CSS-Blatt und möchte einen Zustand speichern (wäre eine Zahl).
Zum Beispiel möchte ich einen „fast“ unendlichen Zähler erstellen das würde sich bei jedem Klick erhöhen.
Das erste, was ich versucht habe (nach einigen Problemen mit vars und calcs), war die Verwendung eines Zählers und Keyframes mit Vorwärtsfüllmodus, aber bei jedem neuen Klick war der Zähler zurückgesetzt.
Code:

Code: Select all

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

#counter {
counter-reset: count;
}

#counter:active {
animation: increment forwards;
}

#counter::after {
content: "Count: " counter(count);
}

Code: Select all

Add 1

Ich habe auch versucht, Kontrollkästchen und Optionsfelder zu verwenden, die funktionierten ( Sobald das Element den aktivierten Status erhält, wird die Anzeige auf „Keine“ gesetzt und das nächste wird angezeigt), aber es war ziemlich „begrenzt“ durch die Anzahl der Kontrollkästchen oder Radios.
Dann habe ich bin darauf gestoßen: https://medium.com/@alexc73/state-in-css-ac57a1ebde09, das einen ziemlich ähnlichen Mechanismus verwendet, obwohl er für mich ziemlich fehlerhaft war (Firefox 134.0 64 Bit unter Windows 11).
Im letzten Teil der Frage geht es um die Verwendung des als Variable gespeicherten Zustands (z. B. in einer Berechnung), aber ich habe keine Möglichkeit gefunden, einen Zähler als Variable zu verwenden Variable.
Ich möchte also fragen, ob jemand bereits auf ein ähnliches Problem gestoßen ist und ob es eine Lösung (sogar einen Hack) gibt.