2011-11-13

サブセクションにあるh1要素のフォントサイズ

全然知らなかったのですが、Chrome 15やFirefox 8ではベンダー拡張プリフィックス付きの:any擬似クラスを使ってサブセクションのh1要素のフォントサイズを調節するようになっているようです。Internet Explorer 9も見た感じそうなっているようですが、UAスタイルシートによるものなのかよくわかりません……。なんか変なことやってそう(偏見)。

Chrome 15の場合は、

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67__qem;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
}

h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

となっており、サブセクションのh1要素のフォントサイズがh2要素と同じになっていました。5階層あたりまで定義されているようですね。

こういうUAスタイルシートのことを考えると、リセットでいろいろやってしまうのはもう本格的にまずそうです。今後UAスタイルシートも複雑さが増していくことはまず間違いないでしょうから、やはりノーマライズでUAスタイルシートを尊重する形が望ましくなっていくのではないでしょうか。

その一方でOpera 11ではこのようなサブセクションのh1要素のフォントサイズを小さくしたりしないので、現在のnormalize.cssなどではフォントサイズに少し差ができてしまいます(多分将来的にも対応されることはないでしょう)。それに対処するにはリセットの方が手軽なことは確かでしょう。差があるので手軽にリセットか、差があるのでデフォルトを尊重してノーマライズか悩ましい所ですね。

article, aside, nav, section {
  h1 {
    margin-top: .83em;
    margin-bottom: .83em;
    font-size: 1.5em;
  }

  article, aside, nav, section {
    h1 {
      margin-top: 1em;
      margin-bottom: 1em;
      font-size: 1.17em;
    }

    article, aside, nav, section {
      h1 {
        margin-top: 1.33em;
        margin-bottom: 1.33em;
        font-size: 1em;
      }

      article, aside, nav, section {
        h1 {
          margin-top: 1.67em;
          margin-bottom: 1.67em;
          font-size: .83em;
        }

        article, aside, nav, section {
          h1 {
            margin-top: 2.33em;
            margin-bottom: 2.33em;
            font-size: .67em;
          }
        }
      }
    }
  }
}