“无限”(max int) CSS专用计数器
“无限”(max int) CSS专用计数器
提问于 2022-04-21 08:02:43
我试图做一个“无限(最大int 2147483647)"计数器，我不能使用javascript或其他语言，我已经成功通过@属性，但它只支持Chrome，边缘和歌剧。在不使用javascript和不使用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; } }如果不可能的话，您能建议一种方法来检测当前和未来的浏览器，在我的脑海中，支持@property的浏览器有如下所示
@support (@property) { /* CSS HERE */ }回答 1
Stack Overflow用户
发布于 2022-04-21 10:17:48
我希望一些涉及步骤的东西能起作用，但它当然行不通。
因此，我认为答案是，在不支持@property规则的浏览器上，没有明显的方法可以做到这一点。
但是，您可以(某种程度上)在属性/值上使用@supports来检测浏览器，Chromium类型的浏览器也支持该属性/值，但Safari或Firefox不支持它。
感谢这条推特建议使用背景-图像:油漆(.)
@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>
我说“有点”是因为我想有一天会说FF支持一个而不是另一个。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71950877
复制相关文章
相似问题
腾讯云开发者
