Я хотел бы использовать inherit с calc() следующим образом:
#foo{
animation-duration:10s;
}
#foo > .bar
{
animation-duration:calc(inherit + 2s); /* =12s */
}
Но это, похоже, не работает.
Является ли это ошибкой браузера или спецификациями?
Ключевое слово inherit может существовать только как значение в объявлении свойства. Он не может использоваться ни с чем другим в качестве значения, потому что это значение само по себе. Это означает, что он не может использоваться с такими функциями, как calc(). См. CSS2.1 и css3-cascade.
Кроме того, сама функция calc() принимает только литеральные числовые значения, такие как числа, размеры и проценты.
Таким образом, спецификация не позволяет использовать inherit таким образом.