width: calc()が効かないと思ったら書き方に問題があった

CSS3のcalc()ファンクションが最新のブラウザで効かない。。困った。。。

.hogeBlock
  width: calc(100%-320px) // ←こいつ

原因は計算式の書き方でした。計算式の間にちゃんとスペースを入れないと機能しません。

In addition, whitespace is required on both sides of the + and - operators. (The * and / operaters can be used without whitespace around them.)

CSS Values and Units Module Level 3

正しくはこちら。

.hogeBlock
  width: calc(100% - 320px)

思わぬトラップ(ﾉ∀`)ｱﾁｬｰ

参考

• css - CSS3 calc() not working in latest chrome - Stack Overflow
• CSS Values and Units Module Level 3