俺の CSS リセット: 2009 冬

各ブラウザが持つデフォルトのスタイルをいったんリセットし、のちのスタイル指定を容易にするための「CSS リセット」。どこまでリセットするかは難しいところで、俺も常に試行錯誤を続けていますが、この頃はだいたいこんなふうにしてます:

html, body, div, h1, h2, h3, h4, h5, h6,
p, ul, ol, li, dl, dt, dd, address, hr,
pre, blockquote, ins, del, form, fieldset, legend,
table, caption, thead, tfoot, tbody, tr, th, td {
  padding: 0;
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
}
ul p, ol p, dl p, table p,
ul ul, ol ul, dl ul, table ul,
ul ol, ol ol, dl ol, table ol,
ul dl, ol dl, dl dl, table dl,
ul pre, ol pre, dl pre, table pre,
ul table, ol table, dl table, table table {
  font-size: 1em;
  margin: 0;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
img, object {
  border: 0;
  vertical-align: bottom;
}
sub {
  line-height: 1;
  vertical-align: text-bottom;
}
sup {
  line-height: 1;
  vertical-align: text-top;
}
q:before, q:after {
  content: "";
}
fieldset {
  border: 0;
}
input, button, select, optgroup, option, textarea {
  background: inherit;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-variant: normal;
  font-weight: inherit;
  font-size: 1em;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
}

簡単に説明すると、主に以下のようなことをやっています:

• ブロックレベル要素の padding と margin をリセット
• 見出しの font-size をリセット
• テキスト系の要素が入れ子になった場合の font-size と margin をリセット
• pre 要素の長いテキストを折り返す指定
• sub 要素と sup 要素の水平位置はブラウザ間の差異が大きいので調整
• フォームのコントロールにおけるタイポグラフィの継承を調整

とくにフォーム関連はどこまでいじるか悩むところですが、コントロールにおけるタイポグラフィの継承に重点を置いています。background プロパティを指定しているのは、これがないと Safari と Chrome で input 要素の submit/reset/button タイプや select 要素のタイポグラフィが継承されないため。ちょっと記述がウザいかなとは思うんですが、個人的にいつもつまずくとこなのであえてこうしてます。

br 要素の letter-spacing プロパティとか legend 要素の color プロパティといった、かつてはよく加えていた IE6 向けの指定をなるべくけずるようにしているので、以前に比べてだいぶすっきりしてきました。