Yukulélé Yukulélé - 2 months ago 51
CSS Question

CSS calc with inherit

I would like to use

inherit
with
calc()
like this :

#foo{
animation-duration:10s;
}
#foo > .bar
{
animation-duration:calc(inherit + 2s); /* =12s */
}


But it don't seem to works.

Is it browsers bug or specs?

Answer

The inherit keyword can only exist alone as a value in a property declaration. It cannot be used with anything else as a value, because it's a value in and of itself. This means it cannot be used with functions like calc() either. See CSS2.1 and css3-cascade.

Furthermore, the calc() function itself only takes literal numeric values such as numbers, dimensions and percentages.

So to put it simply, the spec doesn't allow using inherit that way.