デフォルトスタイルのinheritリセット

HTML5に移行しているサイトが増えてきましたね。

当サイトも HTML5 に移行したんですが、そこでちょっと悩んだのが、HTML5時代のデフォルトスタイルのリセットです。

色々試行錯誤して行き着いたのが、名付けてinheritリセットです。

inheritリセットを簡単に説明すると、親要素のプロパティをinherit(継承)させて、各要素のデフォルトスタイルを一括してリセットするというものです。

具体的なソースは以下のようになります。

body,
body *{
  font-weight: inherit;
  font-style: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  text-decoration: inherit;
  text-align: inherit;
  vertical-align: inherit;
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}
q:before, q:after{
  content: "";
}
ol, ul{
  list-style-type: none;
}
table{
  border-collapse: collapse;
}

全ての親要素となる、html要素にはスタイルが指定されていないので、そのhtml要素のスタイルをinheritさせることで、フォントやテキスト関連のスタイルを一括してリセットすることができます。

後は、inheritさせたくない背景、境界線、マージン、パディングと、特定の要素のみに指定されているスタイル、例えばリストやテーブルなどのスタイルをリセットすれば完了です。すごくシンプルでしょ?

フォーム関連の要素をリセットしたくない場合は、ソースの body * の部分を、リセットしたい要素に置き換えればOK。

なぜinheritでデフォルトスタイルをリセットするのかというと、従来のリセットはレアケースではあるものの、ちょっとした問題が発生することがあるんです。

例えば、text-decorationプロパティがデフォルトで設定されている要素にa要素とins要素があります。

a要素のみtext-decoration: none;でリセットし、かつ、ins要素の中にa要素を入れ子にしたソースがある場合、a要素以外の部分にだけアンダーラインが引かれた状態になります。

多くの場合、これは意図しない状況ではないでしょうか?このような問題が発生しない安全なリセットを考えた結果、inheritリセットを思いつきました。

ただし、現時点でいまだにシェアがあるIE6IE7がinheritに対応していないので、このリセット方法が問題なく使われるのは当分先になりそうです。