+または - は、Calc（）メソッド内の空白で囲まなければならないのはなぜですか？

Question

最近、私はCSS内でcalc（...）メソッドを使い始めました。私はすぐにwidth: calc(100%-2)のようなコードは動作しませんが、-オペレータの前後に空白を追加することで問題が解決され、calcメソッドが正しく機能することがわかりました。

また

、空白は上の必要になります。

研究のビットを行った後、私は複数のブログの記事は、空白が必要とされ、多くがさえ述べ仕様（CSS3 8.1.1）を指摘していることを参照しました+と - オペレータの両側。 （*および/ operatersは、彼らの周りの空白 することなく使用することができる。）

今、明らかに、スペックは、これらの事業者が空白に包まれなければならないことを教えてくれるが、なぜ？私は仕様（8.1.2-4節を参照）の中でさらに読んだことがあり、これらの追加部分で説明されていれば、私は推論を理解していません。

簡単な言葉で言えば、なぜcalc(100% - 1)、さらにはcalc(100%/2)が受け入れ可能な構文ではあるが、calc(100%-1)ではないと指定された理由を説明できますか？

Answer 1

-文字は、CSSのidentsで許可される文字の1つです。解像度がhereであると判断して、などのキーワード値を使用すると、特にcalc()のようなキーワードの値を使用すると、文法のあいまいさを防ぐことができたようです。違う）。

Not everyone agreesこの解像度では、

Answer 2

Mozilla Developer Networkは非常によくそれを説明する：

注：+と-演算子は常に空白で囲む必要があります。たとえば、calc(50% -8px)のオペランドはパーセントで解析され、負の長さ、無効な式が続きます。一方、オペランドcalc(50% - 8px)はマイナス記号と長さが続くパーセントです。さらに、calc(8px + -50%)は長さとして扱われ、プラス記号と負のパーセントが続きます。

*と/演算子は空白を必要としませんが、一貫性のために追加することは許可され、推奨されます。

Answer 3

私は、CSSがどのように長さを特定するのかを最初に考えなければならないと考えます。長さは、（多くの特性が実際にそれを必要とするが）モジュール続くオプションの符号と尺度の任意単位として定義される：

<CSSlength> := [<sign>]<module>[<unit>] 

したがって、例えば、有効なCSSの長さは、次のとおり

-3px 
100em 
+10pc 
0 
91 
5% 

このような長さを定義する

、CSSエンジンは、次解析します

calc(100% -1px); 

を別の長さが続く長さとして。この場合、100%に続いて-1pxが続きますが、calc()には全く意味がありません。これは、相対MDN documentation pageでも説明されています。したがって、上記のロジック以下、あなたは空白を使用する必要があります、あなたは明確な演算子を使用する必要がある関係で2つの長さを置くために

：

calc(100% - 1px);