W3G

calc()ファンクションの実装状況

IE

IE9よりサポート

Chrome

Chrome19より25まで-webkit-のベンダー識別子付きで先攻実装
Chrome26よりサポート

Firefox

Firefox4より15まで-moz-のベンダー識別子付きで先攻実装
Firefox16よりサポート

Safari

Safari6.0より-webkit-のベンダー識別子付きで先攻実装
Safari6.1, Safari7.0よりサポート

Opera

Opera15よりサポート

iOS

iOS6.0より6.1まで-webkit-のベンダー識別子付きで先攻実装
iOS7よりサポート

Android

Android4.4よりサポート

IE9からサポートしていたのですが、ChromeやSafariのサポートが中々進まなかったことから、便利ながらも影が薄いような感じで、注目を集めることがなかったファンクションだったのですが、今ではそれなりのサポート環境になっています（参考：Can I use calc() as CSS unit value?）。

iOSとSafariはごく最近のサポートになることを考えると、-webkit-のベンダー識別子のみを付ける必要があります。

calc()ファンクションの構文

.sample{
   width : 98% ; /* IE8以下とAndroid4.3以下用フォールバック */
   width : -webkit-calc(100% - 20px) ;
   width : calc(100% - 20px) ;
}

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

width, margin, padding, font-size, border-width, background-position, text-shadow, transform : rotate()などなどcalc()ファンクションは、CSS内で<長さ>、<周波数>、<角度>、<時間>、<数量>、<整数値> のいずれかの値を用いる場所ならどこでも使用可能です。

calc() 内での計算には以下の式が利用可能です。

+

加算

-

減算

*

乗算（引数の少なくとも1つは <数量> でなければならない。）

/

除算（右の引数は <数量> でなければならない。）

%とpxなど異なる単位同士での計算や、計算順序を決定するために括弧を用いることも、またcalc() 内部で別の calc() を用いることも可能です。

calc()ファンクションの便利な使い方例

/*3pxだけ大きくする*/
.sample {
    font-size : 105% ; /* IE8以下とAndroid4.3以下には近似値の指定でフォールバック */
    font-size :  -webkit-calc(1em + 3px) ;
    font-size : calc(1em + 3px) ;
}
/*3pxだけ小さくする*/
.sample2 {
    font-size : 95% ; /* IE8以下とAndroid4.3以下には近似値の指定でフォールバック */
    font-size : -webkit-calc(1em - 3px) ;
    font-size : calc(1em - 3px) ;
}

.col1, col3{
    width : 33% ;  /* IE8以下とAndroid4.3以下用フォールバック */
}
.col2{
    width : 34% ;  /* IE8以下とAndroid4.3以下用フォールバック */
}
.col1, .col2, .col3 {
    width : -webkit-calc(100% / 3) ;
    width : calc(100% / 3) ;
}

.row {
	padding : 0 40px ;
	width : 940px ;
	margin : 0 auto ;
}
.col1 {
	float : left ;
	width : 220px ; /* IE8以下は固定*/
}
.col2 {
	float : right ;
	width : 700px ; /* IE8以下は固定*/
}
html:root .row{
	width : auto ;
	max-width : 940px ;
}
html:root .col1 {
	width : 23.4042553191% ; /* Android4.3以下用フォールバック */
	width : -webki-calc(220 / 940 * 100%) ;
	width : calc(220 / 940 * 100%) ;
}
html:root .col2 {
	width : 74.4680851064% ; /* Android4.3以下用フォールバック */
	width : -webkit-calc(700 / 940 * 100%) ;
	width : calc(700 / 940 * 100%) ;
}