CSSにはちょくちょく新しい単位が導入・実装されている。remなどは広まりきった感じはあるけど、これからも新たな単位が追加されるだろう。そういった時にYUI CSS Resetを始めとしたCSSリセットを利用していると、常に厳密なフォールバックが必要になってしまう。Normalize.cssならば、フォールバックを書かなくてもとりあえずデフォルト・スタイルシートで表示してくれるため、大幅に見た目が崩れるということは少なくなる。
例えばrem単位を使ってh1要素のマージンを調節することにしたとする。
h1 {
margin: 2rem 0;
}CSSリセットを使う場合、このルールセットより前にmarginプロパティーをリセットするコードがあることになる。
h1 {
margin: 0;
}
h1 {
margin: 2rem 0;
}これだとrem単位をサポートしていないブラウザーではマージンが0になってしまう。一方、Normalize.cssではmarginプロパティーの値を0にしたりはしないので、デフォルト・スタイルシートの値がそのまま使われる。
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
page-break-after: avoid;
}例えばrem単位をサポートしていないInternet Explorer 8では、h1要素にはこのようなデフォルト・スタイルシートが当たる。つまりマージンは(2 * 0.67)で1.34em確保されることが期待できる。0になるよりはかなりマシなはず。
もちろんこうメチャクチャにしないために「フォールバックを必ず書きましょう」などということになるわけだけど、CSSリセットを使っていなければ省略しても大丈夫そうなケースは結構ある。またremのような単位ならば容易にフォールバックを記述することが可能だけど、vwやvhのようにフォールバックを書くのが難しいことがある単位もある。そういう時にはNormalize.cssを使うことによりデフォルト・スタイルシートを期待して、フォールバックを行わないという決断もありだと思う。
HTMLをCSSで整形して表示することができる何かは増え続けるし、CSSの単位も増え続ける。CSSリセットはそれらを無視してリセットすることにより刹那的な安定をもたらしてくれるが、Future Friendlyにすることは難しくなる。増え続けるものの邪魔をせず、Future Friendlyさを壊さないようにするには、Normalize.cssのような現状を活かしたアプローチを意識する必要があるだろう。