Edited at

calc()が効かない?: 中の演算子の間にはスペースが必要です


今日のハマりどころ

div要素を中央寄せしようとしてcalc()を使ってやりました


before.css

.example{

width:300px;
height:100px;
top:100px;
left:calc(50%-300px/2);
}

と書いたら全く反映されなかった。

Developer Toolで確認したらこのleftがInvalid Valueになってた


解決法

ピンとくるまで時間がかかりました。


after.css

.example{

width:300px;
height:100px;
top:100px;
left:calc(50% - 300px / 2); /*値と演算子の間にスペースが必要*/
}

はい、演算子との間にはスペースが要るんです。

他ファンクションでどうなるかは不明。

=====


【追記】2015-04-08

だいぶ前の記事ですが割と見て頂いてびっくりです。

Twitterで言及されていたのですが、

+, -には スペースが必要 で、*,/ には スペースが不要 なのだそうです。

参考:

1. https://twitter.com/terkel/status/553464271862902785

2. http://www.w3.org/TR/css3-values/#calc-syntax


Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces.


しかしややこしいのでのですべての演算子でスペース入れるようにしてます。