Ich mag würde inherit mit calc() wie folgt verwenden:CSS calc mit inherit
#foo{
animation-duration:10s;
}
#foo > .bar
{
animation-duration:calc(inherit + 2s); /* =12s */
}
Aber es funktioniert offenbar nicht.
Ist es Browser Bug oder Spezifikationen?
Das Schlüsselwort inherit kann nur als Wert in einer Eigenschaftsdeklaration allein existieren. Es kann nicht mit irgendetwas anderes als Wert verwendet werden, weil es ein Wert an und für sich ist. Dies bedeutet, dass es auch nicht mit Funktionen wie calc() verwendet werden kann. Siehe CSS2.1 und css3-cascade.
Darüber hinaus funktioniert die calc() Funktion selbst only takes literal numeric values such as numbers, dimensions and percentages.
Also um es einfach auszudrücken, erlaubt die Spezifikation inherit auf diese Weise nicht zu verwenden.
Das ist richtig, und es ist eine Schande, dass 100% keine Option ist. –
Funktioniert nicht so ... – DaniP
Scheint, du bist kein Glück. Ich testete, ob Sie 'calc (100% + 2s)' schreiben könnten, aber die Dauereigenschaften nehmen keine Prozentsätze an. (Nur '120%' alleine funktioniert auch nicht.) Entschuldigung. Gute Frage aber! –
Wenn [Less] (http://lesscss.org/) eine Option ist, können Sie '@duration: 10s; #foo {animation-duration: @duration;} #foo> .bar {animationsdauer: @duration + 2s; } '. Natürlich ist das nicht genau dasselbe. Es gibt auch [CSS-Variablen] (http://caniuse.com/#feat=css-variables), aber das ist momentan Science-Fiction. – Kobi