Verwendung CSS-Zähler in Calc

Question

ich eine Liste ul haben> li * 5 (nicht immer die gleiche Menge). Ich habe einen Zähler für die ich erhalten:

li:nth-child(n):before { 
    counter-increment: skill; 
    content: counter(skill); 
    color: white; 
} 

Die Frage Kann ich den Zähler (Geschicklichkeit) in einem calc() oder kann ich hinzufügen Einheiten, um es % em rem px ms s

ich versucht habe:

transition: all 250ms linear #{counter(skill)} * 1s; 
transition: all 250ms linear counter(skill) * 1s; 

I erhöht die Verzögerung haben wollen zum Beispiel:

li 1s delay 
li 2s delay 
li 3s delay 
li 4s delay 
li Xs delay 

Answer 1

Die Frage Kann ich den Zähler (Geschicklichkeit) innerhalb eines Calc verwenden()

Nein, Sie können nicht.

Die calc-Funktion erlaubt nicht die Verwendung von counter Funktionen als ihre Komponenten. Aus den Angaben hier - https://www.w3.org/TR/css3-values/#calc-notation:

Komponenten eines calc() Ausdruck können Literalwerte oder attr() oder calc() Ausdrücke sein.

Es gab viele Anfragen dafür, aber immer abgelehnt. Der eigentliche Grund scheint zu sein, dass die counter() Funktion repräsentiert (Ausgänge) ein <string> und kann daher nicht direkt in calc verwendet werden. Außerdem werden die Zähler für die Browser als sehr teuer angesehen.

Referenz: https://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html

Allerdings gibt es Vorschläge für das Hinzufügen einer counter-value() Funktion, die den Wert als ganze Zahl zurückkommen würde und könnte in calc verwendet werden. Siehe hier: https://drafts.csswg.org/css-lists-3/#counter-functions (Scrollen Sie nach unten, um Ausgabe 4 zu sehen).

So ab sofort können Sie counter innerhalb von calc nicht verwenden und die counter-value existiert noch nicht.