【メモ】高さを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~だと、ほぼ最新機種しか使えないなあ。
でも、諦めたくない！諦めないで！
と、なればフォールバック（代替機能）付けるしかないよね。記述増えるけど。
.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%みたいな数値になってしまうけど）。
/*使えない残念なブラウザとOS用*/
.sampleBox1of3 {
width:33.333%;
}
/*使える素敵なブラウザとOS用*/
.sampleBox1of3 {
widht: -webkit-calc(100% / 3);
width: -moz-calc(100% / 3);
width: calc(100% / 3);
}
こんな計算もできるよ
<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);って書けばいいじゃないか！って話なんですが、こういう計算もできるという例で書いてみました。
スペシャルサンクス
以下のサイトを参考にしました。(人´∀`)ｱﾘｶﾞﾄｳｺﾞｻﾞｲﾏｽ
- 【メモ】高さをcssで%指定し、可変に。
- CSSで計算式を可能にするcalc()ファンクション｜Web制作 W3G
- css calc()で長さを計算して求める | このコードわからん
-
calc() - 汎関数記法 - CSS3 Pre-Reference ～ CSS3のリファレンスサイト ～
※ここにある演算子
mod(剰余）は現在演算子としては存在しないようです。