web-dev-qa-db-ja.com

Calc（）メソッド内から+または-を空白で囲む必要があるのはなぜですか？

最近、CSS内でcalc（...）メソッドを使い始めました。 width: calc(100%-2)のようなコードは機能しないことをすぐに知りましたが、_-_演算子の前後に空白を追加すると問題が修正され、calcメソッドは正しく機能します。

少し調べてみたところ、空白が必要であるとのブログ投稿が複数あり、多くの人が次のような仕様（ CSS3 8.1.1 ）を指摘していることがわかりました。

さらに、+演算子と-演算子の両側に空白が必要です。 （*および/演算子は、周囲に空白を入れずに使用できます。）

さて、明らかに、仕様はこれらの演算子を空白でラップする必要があることを示していますが、なぜですか？私は仕様の範囲内で（セクション8.1.2-4を介して）さらに読みましたが、これらの追加部分で説明されている場合、その理由を理解していません。

簡単に言えば、calc(100% - 1)またはcalc(100%/2)でさえ許容できる構文であるが、calc(100%-1)ではないと指定された理由を誰かが説明できますか？

csscss-calc
50
RLH

_-_文字は、CSSIDで許可されている文字の1つです。与えられた解像度から判断すると ここ 、特に_-_などのキーワード値で_min-content_を空白なしで使用することから生じる可能性のある構文のあいまいさを防ぎたいようです（ただし、AFAIKキーワードcalc()内の値はまだ許可されていません—間違っている場合は修正してください）。

全員が同意するわけではありません ただし、この解決策に同意します。

42
BoltClock

Mozilla Developer Network はそれを非常によく説明しています：

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

_*_および_/_演算子は空白を必要としませんが、一貫性を保つために空白を追加することは許可されており、推奨されています。

32
sp00m

まず、CSSが長さを識別する方法を検討する必要があると思います。長さは、オプションの記号の後にモジュールとオプションの測定単位が続くものとして定義されます（ただし、多くのプロパティでは実際に長さが必要です）。

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

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

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

このように長さを定義すると、CSSエンジンは以下を解析します。

_calc(100% -1px);
_

長さとそれに続く別の長さとして。この場合、_100%_の後に_-1px_が続きますが、これはcalc()にはまったく意味がありません。これは、相対的な MDNドキュメントページ でも説明されています。

2つの長さを関連付けるには、個別の演算子を使用する必要があります。したがって、上記のロジックに従って、空白を使用する必要があります。

_calc(100% - 1px);
_
11
Marco Bonelli