CSS calc с наследованием

Я хотел бы использовать inherit с calc() следующим образом:

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

Но это, похоже, не работает.

Является ли это ошибкой браузера или спецификациями?

Ответы

Ответ 1

Ключевое слово inherit может существовать только как значение в объявлении свойства. Он не может использоваться ни с чем другим в качестве значения, потому что это значение само по себе. Это означает, что он не может использоваться с такими функциями, как calc(). См. CSS2.1 и css3-cascade.

Кроме того, сама функция calc() принимает только литеральные числовые значения, такие как числа, размеры и проценты.

Таким образом, спецификация не позволяет использовать inherit таким образом.