Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。
calc() 自体は CSS3 で策定中の機能としてかなり前から仕様が存在しますが、まだサポートしているブラウザがないので、馴染みはないかもしれません。Firefox にしてもまだサポート予定の段階ですし、正式に使えるようになるのは先の話ではありますが、calc() を使うことでどんなことができるようになるのか簡単に触れてみたいと思います。
まず、calc() の仕様がどこにあるかですが、CSS3 Values and Units の中、「3.7.4. The 'calc' function」 にあります。
The calc(
) function can be used wherever length values are allowed. The expression within the parethesis is computed at the same time as 'em' lengths are computed, (…) The simple expression language of the 'calc()' function supports five arithmetic operators (+ and - have lowest precedence, *, /, and 'mod' have highest precedence) and parentheses. At a later date new operators such as min/max, conditionals, etc, and maybe new constants may be added.
小難しく書いてありますが、簡単に言ってしまえば幅や高さといった長さの指定を計算式で書くことができますよっていう機能です。使える演算子に関しても記述がありますが、詳しくは下記で触れます。
では具体的な使い方を。W3C 仕様書のサンプルはちょっと煩雑なので Mozilla Hacks の記事内のサンプルを例に挙げると、
#a {
width: 75%;
margin-right: 1em;
}
#b {
width: -moz-calc(25% - 1em);
}
例えば、2つの div 要素を float で横並びにしている （所謂 2カラムのレイアウトを作っている） として、両カラムの横幅をウィンドウサイズに合わせて可変にしたい場合、width の値を % 指定とかにしますよね。
単純に ウィンドウサイズを 100% として、左：75% / 右：25% とかで指定すれば、可変、かつ2カラム自体は実現できますが、これに margin や padding、さらには border なんかを指定しだすと、計算がメンドクセって感じになっていました。ま、div 要素の入れ子でなんとでもなるんですが、こういう場合でも 「それ calc() で簡単にできるよ」 って言えるようになります。
具体的にどう書くの？っていうのが上のサンプルソースでわかります。先に書いた、左：75% / 右：25% っていうのが、それぞれ div#a と div#b になりますが、ここで #b の方に calc() を指定していますね （先行実装なので -moz- プレフィックスが付いています）。
#a には 「margin-right: 1em」 が指定されていますので、#b に横幅 25% を単純に指定してしまうと、全横幅の合計値が 100% を超えてしまう （75% + 25% + 1em） のでそのままだとカラム落ちします。
（この辺の話はボックスモデルの理解が必要です。わからない人はこちらを参考に → 「CSSの主なプロパティ - ごく簡単なHTMLの説明」）
そこで、#b の横幅の指定を 「width: -moz-calc(25% - 1em);」 とすることで、「25% から、1em 分引いた値を横幅にしてね」 ということにできるわけです。便利ですね。計算機片手に CSS コーディングする日々ともお別れですよ。
この計算は、加減算だけでなく、乗算や除算も指定できます。同じく引用元のサンプルソースだと
input {
padding: 2px;
border: 1px solid black;
display: block;
width: -moz-calc(100% - 2 * 3px);
}
この場合、「padding: 2px」、「border: 1px」 の指定がありますので、実際に表示される幅は width の値に対して左右それぞれ 3px 分の上乗せがあることになります。それらを含めて、親要素に対して 100% の横幅を input 要素に持たせたい場合、「width: -moz-calc(100% - 2 * 3px)」 とすることで、「横幅は、100% から 3px×2 を引いた値にしてね」 という指定になるというわけです （計算順番は昔学校で習った通りですよ）。
さらに複雑な計算も。
width: -moz-calc(3px + 50%/3 - 3em + 1rem);
いつ使うんだよと言うのは別として… ちなみに、「rem （root em)」 はルート要素の文字サイズを参照しますが、エラスティックレイアウトで組んでるときなんかに使えるかも。
Firefox 4 でサポートされる calc() の演算子は下記の通り。
The current implementation supports the +, -, *, /, mod, min, and max operators.
Firefox 4: CSS3 calc() – Mozilla Hacks - the Web developer blog
現在サポートしているのは、四則演算（加, 減, 乗, 除）に 剰余演算 （modulo / 整数除算における「余り」を導き出します）。つまり、現時点で W3C 仕様書に記載の演算子はすべてサポートしているというわけです。それにしても剰余演算とか学生時代に戻った気分…
また、min / max 演算子もサポートするよと書かれていて、記事内でも使用例が挙げられています。ちなみにまだ W3C 仕様書でも 「後日追加されるかも」 って書かれているレベルの演算子なのでよくわかりません。記事内でもこんな感じで使えるようになる予定だよという書き方になっています。
div {
height: -moz-min(36pt, 2em);
width: -moz-max(50%, 18px);
}
この辺、詳しく知っている人がいたら教えてください。
calc() がサポートされると可変レイアウトがものすごくやりやすくなると思いますが、あまり多用しすぎるとレンダリング処理に負荷がかかりそう。でも使いどころによってはいいかもしれませんね。期待して待ちましょう。
参考リンク
- Bug 363249 - implement css3-values calc() ※ calc() の実装状況
- CSS3 Values and Units, W3C Working Draft 19 September 2006
