最近、CSS 内で calc(...) メソッドを使い始めました。次のようなコードはwidth: calc(100%-2)機能しないことがすぐにわかりましたが、演算子の前後に空白を追加すると-問題は解決し、calc メソッドは適切に機能します。
少し調べてみたところ、複数のブログ投稿で空白が必要であると書かれており、仕様を指摘している人も多くいました（CSS3 8.1.1） どの州：
さらに、+ 演算子と - 演算子の両側に空白が必要です。(* 演算子と / 演算子は、周囲に空白がなくても使用できます。)
さて、明らかに、仕様ではこれらの演算子は空白で囲む必要があると書かれていますが、なぜでしょうか? 仕様をさらに読み進めてみました (セクション 8.1.2-4 まで)。これらの追加部分で説明されているとしても、その理由がわかりません。
calc(100% - 1)簡単に言うと、または はcalc(100%/2)許容される構文なのに は許容されないと指定された理由を誰か説明できますかcalc(100%-1)?
ベストアンサー1
この-文字はCSS識別子で許可されている文字の1つです。指定された解像度から判断するとここ-、特に次のようなキーワード値で、空白なしで使用することで生じる可能性のある構文上の曖昧さを防ぎたかったようですmin-content(ただし、私の知る限り、キーワード値はまだ 内では許可されていませんcalc()。間違っていたら訂正してください)。
誰もが同意するわけではないしかし、この決議では。