"Infinite" (max int) CSS only counter

user_1337147 0
Viewed 50

I am trying to do an "infinite (max int 2147483647)" counter in CSS only, I cannot use javascript or other languages, I have succeeded via @property but it is only supported on Chrome, Edge and Opera. Is there any way to achieve this without using javascript and without writing all the numbers in HTML?

@property --num { syntax: "<integer>"; initial-value: 0; inherits: false; }
.counter { counter-set: num var(--num); }
.counter::after { content: counter(num); }
.counter { animation: counter 2147483647s linear infinite; }
@keyframes counter { to { --num: 2147483647; } }

If not possible can you suggest a way to detect current and future browsers that supports @property In my mind there is something like

@support (@property) { /* CSS HERE */ }
css html
1 Answers

I was hoping something involving steps would work, but of course it doesn't.

So I think the answer is that there isn't an obvious way of doing this on browsers which don't support the @property rule

However, you can (sort of) detect the browser by using @supports on a property/value which is supported also by Chromium-type browsers but not by Safari or Firefox.

Thanks to this tweet for suggesting using background-image: paint(...)

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.counter::after {
  content: 'I have a feeling I do not support @property';
}

@supports (background-image: paint(thingo)) {
  .counter {
    counter-set: num var(--num);
  }
  .counter::after {
    content: counter(num);
  }
  .counter {
    animation: counter 2147483647s linear infinite;
  }
  @keyframes counter {
    to {
      --num: 2147483647;
    }
  }
}
<div class="counter"></div>

I say 'sort of' because I suppose there might come a time when say FF supports one not the other.

user_108674540
Related