rem単位

ルート要素の文字サイズを基準にする長さの単位remにOperaが11.6で対応した。これで5大ブラウザの最新安定バージョン全てで使えるようになったことになる。主に見出しのマージンの指定などで威力を発揮するんじゃないかと思うし、emよりもグリッドシステムに向いてそうな気配がある。ただrem単位をサポートしていないブラウザではガン無視されるので、書き方には工夫が必要になる。

一番使いそうなmarginプロパティーでの利用を考えてみる。まずまとめて指定するケース。

h1 {
  margin: 3rem 0 0 0;
  font-size: 250%;
}

これだとmarginプロパティーで指定した値全てが無視されてしまう。非対応ブラウザでのフォールバックを考えると先にem等で書いておいて、remで上書きする必要がありそう。

h1 {
  margin: 1.2em 0 0 0; /* 1.2 = 3 / 2.5 */
  margin-top: 3rem;
  font-size: 250%;
}

単なる計算なのでSassがあるなら$ratioとかいう変数を用意して書くとメンテナンスしやすそう。

h1 {
  $ratio: 2.5;
  margin: (3em / $ratio) 0 0 0;
  margin-top: 3rem;
  font-size: percentage($ratio);
}

rem使う意味ない……。

フォールバックを考えない、つまりIE8以下を無視する場合では便利で見通しの良いCSSを書けるようになることは確かなんだけど、rgba()などとは違って所詮は計算でどうにかなる程度のものでしかないことを考えると……。ブラウザーのデフォルト・スタイルシートですら使われてないし、まだちょっと使用には踏み切れない感じかなぁ。

ということ(？)でvim-css3-syntaxを更新して、remを始めとした新単位等に対応したりしました。これでcss3-values-20110906には追いついたと思う。正直忘れてた。cycle()とかなにこれカッコイイ。この更新でcss3-functions.vimからcss3-values.vimにファイル名を変えたので、HTMLやSassにシンタックス定義を追加している人はそちらも合わせて更新する必要がある。空で残しておこうかと思ったけどそれもアレなので消した。

コミット・メッセージにつづりミスを発見するのはなぜいつもpushした後なのだろう……。