在计算器中使用css计数器 [英] Use css counter in calc
问题描述
我有一个清单 li> 5 (并非总是相同的数量)。我设置了一个我得到的计数器:
1 2 3 4 5
li:nth-child(n):之前{
counter-increment:skill;
content:counter(skill);
颜色:白色;
}
问题我可以使用计数器(技能)在 calc()中,或者可以向它添加单位 px em rem%ms s
我试过了:
transition:全部250ms线性#{counter(skill)} * 1s;
转换:全部250ms线性计数器(技能)* 1s;
我希望延迟时间增加,例如:
li 1s延迟
li 2s延迟
li 3s延迟
li 4s延迟
li Xs延迟
问题我可以使用计数器(技能) ()
没有。您不能。
计数器
作为其组件。从这里的规格 - https://www.w3.org/TR/css3
$ b
calc()
表达式
可以是字面值或
attr()
或
calc()
表达式。
为此,但始终拒绝。潜在的原因似乎是 counter()
函数表示(输出)一个< string>
,因此不能直接在 calc
中使用。此外,这些计数器对于浏览器来说是非常昂贵的。
参考: https://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html
然而,有人建议添加计数器值()
函数,该函数将返回值作为整数并可用于计算值
。请参阅此处: https://drafts.csswg.org/css-lists-3 /#counter-functions (向下滚动以查看问题4)。
因此,现在您不能使用 counter
calc
和计数器值
中的code>目前还不存在。
I have a list ul>li*5 (not always the same amount). I set a counter for which I get:
1 2 3 4 5
li:nth-child(n):before {
counter-increment: skill;
content: counter(skill);
color: white;
}
The Question Can I use the counter(skill) inside a calc() or can I add units to it px em rem % ms s
I have tried:
transition: all 250ms linear #{counter(skill)} * 1s;
transition: all 250ms linear counter(skill) * 1s;
I want to have the delay increased for example:
li 1s delay
li 2s delay
li 3s delay
li 4s delay
li Xs delay
The Question Can I use the counter(skill) inside a calc()
No. You can't.
The calc
function does not permit the use of counter
functions as its components. From the specs here - https://www.w3.org/TR/css3-values/#calc-notation:
Components of a
calc()
expression can be literal values orattr()
orcalc()
expressions.
There have been many requests for this but always declined. The underlying reason seems to be that the counter()
function represents (outputs) a <string>
and hence cannot be used directly in calc
. Moreover, the counters are considered very expensive for the browsers.
Reference: https://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html
However, there have been proposals for adding a counter-value()
function which would return the value as integer and could be used in calc
. See here: https://drafts.csswg.org/css-lists-3/#counter-functions (Scroll down to see Issue 4).
So as of now, you cannot use counter
inside of calc
and the counter-value
does not exist yet.
这篇关于在计算器中使用css计数器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!