How can I use CSS calc() with inherit?

css, css-animations, css-calc, inheritance

Solution

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.

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

With this in mind, in order to use an inherited property value as part of a child declaration, make a custom property which will be inherited instead:

#foo {
  --duration: 10s;
  animation-duration: var(--duration);
}
#foo > .bar {
  /* --duration is automatically inherited - no need for inherit keyword */
  animation-duration: calc(var(--duration) + 2s); /* =12s */
}

Problem

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?

Original source