サブセクションにある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などではフォントサイズに少し差ができてしまいます(多分将来的にも対応されることはないでしょう)。それに対処するにはリセットの方が手軽なことは確かでしょう。差があるので手軽にリセットか、差があるのでデフォルトを尊重してノーマライズか悩ましい所ですね。

おまけ

SCSSでパクるとするとこんな感じになりそうです。

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;
					}
				}
			}
		}
	}
}

わぁ汚い……。コンパイルするとすごくでかいCSSになるので使わない方が良いと思います。

さらにおまけ

WebKitのUAスタイルシートなどで使われている__qemという単位はQuirksモードでマージンの相殺を行わないようにする単位らしいです。単位にまで独自拡張の波が……。