継承を伴うCSS計算

Question

calc()でinheritを次のように使用したいと思います。

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

しかし、動作しないようです。

ブラウザのバグですか、仕様ですか？

Answer 1

inheritキーワードは、プロパティ宣言の値として単独でのみ存在できます。それはそれ自体が値であるため、それ以外のものを値として使用することはできません。つまり、calc()などの関数では使用できません。 CSS2.1 および css3-cascade を参照してください。

さらに、calc()関数自体 数値、次元、パーセンテージなどのリテラル数値のみを受け取ります 。

簡単に言うと、仕様ではinheritをそのように使用することはできません。