Posted at

calc()を使うとCSSで四則計算ができる。それもコンパイルしなくていいぞ!

More than 5 years have passed since last update.

【メモ】高さをcssで%指定し、可変に。

という記事を発見したので、ちょっと調べてみたら。

CSSで四則計算ができるではないか!それもコンパイルなしで。

SASSとかLESSとかStylusとかのメタ言語じゃなくてもできる!とかうれしすぎ。

特に横サイズを固定できないスマホでは、これができたら助かること山盛りだったんだけど。

【メモ】高さをcssで%指定し、可変に。

だとコード例が書かれているけど 「説明べたなので…」 とおっしゃってるので、ちょっと調べてみた。


ブラウザ・OS対応状況

ブラウザ
対応状況
特記

IE
IE9〜

Chrome
Chrome26~
-webkit-(ベンタープレフィックス)付きならChrome19~使用可能

Firefox
Firefox16
-moz-付きならFirefox4~使用可能

Safari
Safari6.1,7.0~
-webkit-付きならSafari6.0~使用可能

Opera
Opera15~

iOS
iOS7~
-webkit-付きならiOS6.0~使用可能

Android
Android4.4~

…あー。

これは、当分実務で使うの無理だわw

ちょっとがっかり。

PCはまだいけるような気がするけど、スマホはiOS6.0(プレフィックス付き)~/Android4.4~だと、ほぼ最新機種しか使えないなあ。

でも、諦めたくない!諦めないで!

と、なればフォールバック(代替機能)付けるしかないよね。記述増えるけど。


css

.sampleBox {

width: 97.9%; /*IE9未満とかプレフィックス使ってもだめなブラウザやOS対応*/
widht: -webkit-calc(100% - 20px);/*Chrome19~25対応*/
width: -moz-calc(100% - 20px);/*Firefox4~15対応*/
width: calc(100% - 20px);
}

うーん。長いなあ。


こんな部分に使うと便利

電卓持ち出して計算すればいいじゃん!というのも至極ごもっともな話なんですが、多くのブラウザやOSの最新バージョンでは対応してるので、あと1年くらい経てばバリバリ使えるプロパティになることは間違いないと思うし、時期を見て使ってみたいところです。


割り切れない計算

SASSなんかのメタ言語が便利だなーと指をくわえて見ているのは四則計算部分。

特に割り切れない数とかになると「ここで四則計算できればなあ」とか思っちゃう訳だ。

3分割とかすると「33.33%」みたいな数になっちゃうので、いつも見た感じが微妙に思っていた(SASSもコンパイルすると、33.33%みたいな数値になってしまうけど)。


css

/*使えない残念なブラウザとOS用*/

.sampleBox1of3 {
width:33.333%;
}

/*使える素敵なブラウザとOS用*/
.sampleBox1of3 {
widht: -webkit-calc(100% / 3);
width: -moz-calc(100% / 3);
width: calc(100% / 3);
}



こんな計算もできるよ


html

<html>

<style>
body {font-size: 20px;}

.sample {
font-size: 125%;
font-size: -webkit-calc(1em + 5px);
font-size: -moz-calc(1em + 5px);
font-size: calc(1em + 5px);
}

.sample2 {
font-size: 175%;
font-size: -webkit-calc(1em * (4/4) + 15px);
font-size: -moz-calc(1em * (4/4) + 15px);
font-size: calc(1em * (4/4) + 15px);
}
</style>

<body>
<p>20ピクセルのフォント</p>
<p class="sample">加算して25ピクセルのフォント</p>
<p class="sample2">除算・乗算・加算して35ピクセルのフォント</p>
</body>
</html>


ソースコードをコピペして確認できるように書いてみました。

.sample2が妙な計算してます。

35pxにするならfont-size: calc(1em + 15px);って書けばいいじゃないか!って話なんですが、こういう計算もできるという例で書いてみました。


スペシャルサンクス

以下のサイトを参考にしました。(人´∀`)アリガトウゴザイマス