<calc-sum>
構文
公式定義
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
解説
この式のオペランドは、任意の <length>
構文の値にすることができます。 <length>
, <frequency>
, <angle>
, <time>
, <percentage>
, <number>
, <integer>
のいずれかを使用することができます。
異なる単位型を単一の式で使用することができます。例えば、calc(100% - 10px)
のように %
から px
を引くのも有効な式です。
CSS 変数 を calc-sum
式に含めることもできます。以下のコード calc(10px + var(--variable))
は有効な式です。
+
および -
演算子は、ホワイトスペースで囲む必要があります。例えば、 calc(50% -8px)
はパーセント値に負の長さが続くものとして解釈され、不正な式となります。同様に、 calc(8px + -50%)
は長さの後に加算演算子と負のパーセント値が続くものとして処理されます。
仕様書
No specification found
No specification data found for css.types.calc-sum
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
ブラウザーの互換性
BCD tables only load in the browser