2009-11-27

YUI 3: CSS Resetの問題

ブラウザごとのデフォルト・スタイルシートの違いを吸収するためのスタイルシートをメンテするのが面倒になったので、YUI 3のCSS Resetを使うことにした。が、このサイトではちょっとした問題が起こった。少し前にTwitterでつぶやいたりしたhtml要素にbackground-colorやbackground-imageを指定した場合、body要素の背景が描画エリアいっぱいにならなくなるというCSSの仕様絡みの問題。

この仕様によってbody要素に指定していたヘッダの背景画像がずれてしまった(ずれるサンプル)。ずれる理由は上記仕様によりbody要素の上下でmarginの相殺が起こり、marginの相殺が起こった部分は透明(親であるhtml要素)が透けて見える)ようになり、背景画像の開始点はそれに続くbody要素のコンテント・エリアになるから。

html {
  color: #000;
  background: #FFF;
}

問題になるのは以上の部分なので、reset(-min).cssより後に読み込まれるCSSファイル内で、

html {
  background-color: transparent;
  background-image: none;
}

とすればとりあえず回避できる。

YUI 2.4.0でbody要素からhtml要素にcolorプロパティとbackground-colorプロパティが移動されたようなんだけど、理由書いてない……。