CSSで計算式を可能にするcalc()ファンクション

Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15

[og_og]

Android4.3以下を対応しなきゃいけない現場だと使えないんだよね…

[nknkt]

計算する

[cbc10c6y]

dlでテーブルとか作る時に役立つぞこれ。

[yayocan]

calc

[kjtec]

レイアウト崩れをこれで解決

[tailtame]

IE9、Android4.4、iOS7～。iOSは今いくつなんだ…。

[nomaharu2013]

cssすごい。 width : calc(100% / 3) ;など

[masapon49]

なるほど演算できるとなると利用価値多そう

[metro-e]

神

[windish]

知らなんだ。

[uretaro]

"フォールバックとしてIE8以下とAndroid 4.3以下の標準ブラウザには.sampleの横幅に98%が適用され、calc()ファンクションに対応する環境では100% - 20pxの横幅が適用されます。"

[ghostbass]

なるほど、これがあればwidth 100%なブロックにボーダーつけるとか楽になる

[sutara_lumpur]

対応状況 http://caniuse.com/#search=calc

[willnet]

“「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」”

[heniha]

calc

[korinchan]

もう使える？と思ったらAndroid標準ブラウザ……

[mcddx30]

“width : -webkit-calc(100% / 3) ; width : calc(100% / 3) ;”

[astj]

便利っぽいけどドロイド君が取り残されてる

[side_tana]

Android使えないのか．．．