ここ数年のブラウザのデフォルトスタイルシート。縦書きとかHTML5とか。

UA Style Sheets の margin

p要素に定義されているUA Style Sheetsを例にすると、IE8などは私たちがいつも利用しているmarginによって指定されています。しかしGoogle ChromeやFirefoxなどのUA Style Shteetsでは、margin-start, margin-endなどの論理プロパティが利用されています。

IE8: p要素のUA Style Sheets

p {
  display: block;
  margin: 1em 0;
}

Webkit: p要素のUA Style Sheets
「__qem」という単位は、互換モードでmarginの相殺を行わないようにする独自拡張機能です。

p {
  display: block;
  -webkit-margin-before: 1__qem;
  -webkit-margin-after: 1__qem;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
}

margin-startなどの論理プロパティは、言語の方向に柔軟に対応できるプロパティであり、横書きから縦書きになったとしても一定の間隔を保てます。私たちがいつも使用しているmarginプロパティは、画面にあわせて間隔を指定するのに対して、論理プロパティは文字の始まりにあわせて相対的に間隔を指定できるものです。

marginとmargin-startの違い

このmarginの論理プロパティの変化は、リセットCSSの「margin: 0;」などで打ち消されてしまうことが多いため、気づきにくい変化です。今後、電子書籍を作成する場合に重宝しそうなプロパティなので、このような変化があることを覚えておいてもいいかもしれません。

HTML5の新要素の対応

HTML5にheader, article, section要素などの新要素が加わったことによって、UA Style Sheetsの対応も変化しています。

HTML5が登場し始めたブラウザのUA Style Sheetsは、新要素がインラインとして表示されていました。これはブラウザがHTML5に対応していなかった時のことであり、未知の要素として初期値の「display: inline;」が適用されていただけでした。

しかし現在のモダンブラウザでは、HTML5の新しい要素もブロックとして表示されるように変化し、marginなどの指定が追加されている新要素もあります。
そのためリセットCSSで新要素に、「display: block;」を定義するだけでは不十分です。Google Chromeではfigure要素にmarginが指定されているので、「margin: 0;」の指定も追加した方がいいでしょう。

よく見るHTML5のリセットCSS 抜粋

article, aside, figcaption, figure, footer, header, nav, section {
  display: block;
}

UA Style Sheetsの変化にあわせて、marginを追加
paddingについては、menu要素などを含める時に利用しましょう。

article, aside, figcaption, figure, footer, header, nav, section {
  display: block;
  margin: 0;
}

アウトライン・アルゴリズムとh1

「Normalize.css」というUA Style Sheetsを生かし、ブラウザごとの差異を少なくすることを目的としたCSSがあります。
このNormalize.cssには、見出し要素の中で唯一、h1のみが記述されています。

normalize.css v3.0.0 抜粋

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

なぜh2, h3要素などの見出しのCSSは記述されず、h1要素だけがNormalize.cssで定義されているか。それはHTML5のアウトライン・アルゴリズムが関係しています。

アウトライン・アルゴリズムは、article, sectionなどで見出し要素を囲むと、同じ要素でも見出しレベルが下がるというHTML5から加わった仕様です。

このアルゴリズムが分かりやすく視覚化できるように、IE9以上のブラウザやFirefox, Google Chromeでは、h1要素の見た目がセクショニング・コンテンツの深度よって変わります。

WebkitのUA Style Sheetsの抜粋

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

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

アウトライン・アルゴリズムを利用したHTMLの例

<h1>Section1</h1>
<section>
  <h1>Section2</h1>
  <section>
    <h1>Section3</h1>
    <section>
      <h1>Section4</h1>
    </section>
  </section>
</section>

Google Chromeの表示
h1要素しか定義していないが、セクショニング・コンテンツの扱い方によって、h2, h3要素と同等のスタイルになる。

h2, h3要素などは、セクショニング・コンテンツの深度が変わっても見た目に変化は起こらず、h1要素のみが変化します。
そのためNormalize.cssでは、唯一h1要素だけが指定されています。

ブラウザは変化してるよね

っていう、小ネタでした。