Yukulélé Yukulélé - 1 year ago 444
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download