UAスタイルシートとリセットCSSとは - 2023

2023-02-26

以前に劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。
ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。

そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。

UAスタイルシートとは？

UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。

スタイルシートの種類と階層

スタイルシートといっても、いくつかあります。
多くのドキュメントや書籍では「UAスタイルシート」「著者スタイルシート」「ユーザースタイルシート」の3つで紹介されています。

UAスタイルシート
UAは、ユーザーエージェントの略。
ブラウザがデフォルトで提供しているスタイルシート。
著者スタイルシート
著者はスタイルシートを記述する人のこと。
web制作者が記述するスタイルシート。
ユーザースタイルシート
ユーザーは、webサイトの閲覧者のこと。
閲覧者が改変できるスタイルシート。

web制作で関わるスタイルシートは、UAスタイルシートと著者スタイルシートの2つです。

しかし私はここにもう一つのスタイルシートを定義しておきたいです。それは「CSSの初期値」です。
CSSのプロパティの値には、初期値というものが最初から設定されています。
UAスタイルシートと著者スタイルシートが、もしなかったとしたら、このCSSの初期値が表示されることになります。
例えば、displayプロパティであれば inline 。widthプロパティなら auto といったように、何も指定してない時のCSSには値が設定されています。

忘れがちの値ですが、UAスタイルシートと著者スタイルシートは、これらの初期値を上書きしているだけに過ぎません。
この初期値を1つのスタイルシートと定義して、UAスタイルシートよりも上の階層にあると捉えることで、CSSそのものの理解がより深くなるでしょう。

覚えておくCSSの初期値

CSSの初期値は、全てのプロパティで定義されています。その調べ方は、ブラウザによって異なる場合もありますが、大体はW3Cのドキュメントや MDN Web Docsのリファレンスで確認できます。
その中でもUAスタイルシートとの関係性があったり、ポイントとなるプロパティは、ボックスモデルに関わるプロパティが多いです。そのためこれらを主軸に、下記に列挙した初期値について説明します。

Display

display: inline

Sizing

width: auto
height: auto
min-width: 0
max-width: none
min-height: 0
max-height: none

Spacing

margin: 0
padding: 0

初期値: Display

displayプロパティの初期値は inline です。
HTMLのdiv要素やspan要素、本来見えるはずもないhead要素やtitle要素も、CSSの初期値を辿れば、全て display: inline です。

初期値: Sizing

widthとheightプロパティの初期値は auto です。
またmin-widthとmin-heightの初期値は 0 。max-widthとmax-heightの初期値は none です。

widthプロパティの auto は、ブロックレベル要素の通常の状態において、親のボックス幅から「marginの左右」「borderの左右」「paddingの左右」を合算して引いたものが、autoの値として算出されます。

heightプロパティの「auto」は、ブロックレベル要素の通常の状態において、絶対配置などの特殊な状態を除く子の高さによって高さが決定されます。

通常の状態に限定していえば、width: auto; は外からの影響によって幅が決定されるのに対し、 height: auto; は内部の影響によって高さが決定される違いがあります。
widthとheightプロパティの違いについては感覚的にわかっている方も多いと思います。ただ少しややこしいのがmin-widthとmin-heightプロパティです。
min-widthとmin-heightプロパティの初期値は 0 です。

しかしFlexboxやGridを使用した場合、flex/gridコンテナ（Flexbox/Gridの子要素）のHTML要素はmin-widthとmin-heightプロパティの初期値が auto になります。初期値が auto の場合、HTML要素は自身の内容に応じて最小幅が決まります。このように文脈の影響によって、初期値が変化する場合もあります。

初期値: Spacing

marginとpaddingプロパティの初期値は共に 0 です。
正確にいうとmargin-top, margin-right, margin-bottom, margin-leftプロパティの初期値が 0 で、これらのショートハンドであるmarginプロパティが必然的に 0 になっています。

margin: 0 0 0 0; /* 上,右,下,左の初期値が0 */

これはpaddingプロパティも同様です。

ブラウザとUAスタイルシートの歴史

UAスタイルシートの発祥などに関する歴史的な資料は、あまり見かけません。
ただUAスタイルシートではなく、ブラウザやCSSの歴史を見ると、その片鱗をうかがえます。

World Wide Web（WWW）を考案し、ハイパーテキストシステムを実装したTim Berners-Lee氏は、世界初のwebブラウザである「WorldWideWeb(Nexus)」も開発しました。
この時に想定していたwebの用途は、論文などの文章のデジタル化でした。そのため、各ブラウザで最適な表示方法をそれぞれで提供して欲しいという考えのもと、WorldWideWeb(Nexus)の見た目に関する情報は公開しなかったとしています。
おそらくこれが各ブラウザのUAスタイルシートの源流となるできごとです。

そして「ViolaWWW」などブラウザが開発され、Marc AndreessenとEric Binaが開発した「Mosaic」ブラウザの登場でwebは変革期を迎えます。
今までのブラウザは画像を、画像とテキストを別々にウィンドウを開くことしかできませんでした。
しかし「Mosaic」ブラウザによって同ウィンドウに画像とテキストを混在して表示できるようになりました。

しかしMosaicの開発に所属していたNCSAとMarc Andreessen氏らで対立があり、Marc Andreessen氏らは独立。モザイク・コミュニケーションズ社（同年、ネットスケープコミュニケーションズ社に社名変更）を立ち上げ、Mosaic + Killer = 「Mozilla」というコードネームで、Netscape Navigator(以後、NN)を開発します。

MosicとNNでHTMLの表示の資料があるので見てみましょう。
この資料は、oldweb.todayでエミュレーションしたものを、2020年ごろにキャプチャーした画像です。 HTMLの確認に使用するwebサイトは、世界最古のwebサイトを使用しています。こちらは復刻版なのですが、初期のHTMLしか書かれていないので、ブラウザが表示の確認に最適です。
http://info.cern.ch/hypertext/WWW/TheProject.html

Mosaic 2.2

Netscape Navigator 3.04

Mosaicはバージョン2系と3でHTMLの見た目が違うのですが、Mosaic 3の資料をここ数年で紛失したので、Mosaic 2のみでご確認ください。
Mosaic 2.2とNNを比べると、NNの方が全体のスペースが狭く、見出しのフォントサイズは大きく設計されています。
ただMosaic 3になると、body要素のスペースなどはNN似た感じになります。しかしMosaic 3の方が見出しのフォントサイズが小さく、下部のスペースが広くなっており、ブラウザの見た目の差が感じられるようになります。

MosaicとNetscapeのその後

元は同じ開発者から作られたMosaicとNNの2つのブラウザは、それぞれ違う道を歩むことになります。
Mosaicは、そののちにMosaicのライセンスを受け取ったMicrosoftによって、Mosaicをベースに「Internet Explorer」が開発されます。
本来はMosaic 3とIE4 Macを比較して欲しいところですが、p要素とdt要素の間にスペースがなく、他のブラウザでも見られない特徴がありました。
これがエミュレーターによる誤差なのか、実機でもそうだったのか確認できないのですが、おそらく1からスペーシングなどを考え直す必要もないので、Mosaicのルールをある程度そのまま使用していた可能性があります。

Internet Explorer 4: Windows

Internet Explorer 4: Mac

そして、この予想は当たっていました。
Body Margin 8px | Miriam Eric Suzanne は、「body要素のマージンはどこからきたのか？」という記事です。
この記事も私と同じように MosaicをベースにUAスタイルシートが作られたと結論付けています。

CSSの登場とCSSを使ったUAスタイルシートへ

Tim Berners-Lee氏が開発した世界初のwebブラウザ「WorldWideWeb(Nexus)」にもHTMLの見た目を制御するものもありましたが、ブラウザのためのものであり、著者が触るということは想定していません。開発者やデザイナーに、スタイルを指定する機能を与えるかどうかという問題は、かなりの物議を呼んだと云われています。

CSSが初めて実装されたブラウザは、Internet Explorer 3です。
ただIE3がリリースされた時は、まだCSS1の仕様が勧告にはなっておらず、IEのCSSのサポート状況はボックスモデルも不充分で適切ではありませんでした。
しかし、これがNetscape 4のCSSのサポートを促すことにつながり、これらのCSS実装のタイミングで現在のUAスタイルシートの原型ができたのではないかと考えています。

1996年にCSS1が勧告され、そこには付録Sample style sheet for HTML 2.0としてHTML2.0のブラウザのUAスタイルシートのサンプルが提案されています。

Sample style sheet for HTML 2.0の内容

  BODY {
    margin: 1em;
    font-family: serif;
    line-height: 1.1;
    background: white;
    color: black;
  }

  H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, 
  DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR { display: block }

  B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, 
  IMG, SPAN { display: inline }

  LI { display: list-item }

  H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
  H5, H6 { margin-top: 1em }
  H1 { text-align: center }
  H1, H2, H4, H6 { font-weight: bold }
  H3, H5 { font-style: italic }

  H1 { font-size: xx-large }
  H2 { font-size: x-large }
  H3 { font-size: large }

  B, STRONG { font-weight: bolder }  /* relative to the parent */
  I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
  PRE, TT, CODE, KBD, SAMP { font-family: monospace }

  PRE { white-space: pre }

  ADDRESS { margin-left: 3em }
  BLOCKQUOTE { margin-left: 3em; margin-right: 3em }

  UL, DIR { list-style: disc }
  OL { list-style: decimal }
  MENU { margin: 0 }              /* tight formatting */
  LI { margin-left: 3em }

  DT { margin-bottom: 0 }
  DD { margin-top: 0; margin-left: 3em }

  HR { border-top: solid }        /* 'border-bottom' could also have been used */

  A:link { color: blue }          /* unvisited link */
  A:visited { color: red }        /* visited links */
  A:active { color: lime }        /* active links */

  /* setting the anchor border around IMG elements
     requires contextual selectors */

  A:link IMG { border: 2px solid blue }
  A:visited IMG { border: 2px solid red }
  A:active IMG { border: 2px solid lime }

またブラウザの実装を遡ると、Netscape 7のUAスタイルシートの上部にライセンスの表記が記述されていますが、ネットスケープコミュニケーションズ社が1998年の開発した読み取れるところがあります。

/* ***** BEGIN LICENSE BLOCK *****
 * The Original Code is mozilla.org code.
 *
 * The Initial Developer of the Original Code is
 * Netscape Communications Corporation.
 * Portions created by the Initial Developer are Copyright (C) 1998
 * the Initial Developer. All Rights Reserved.
 */

1998年というと、Netscapeはすでにバージョン4が登場し、AOLに買収された時期であると同時に、バージョン5の開発を中止し、新しいプログラム（のちのGecko）をゼロからスタートする年でした。ここからNetscapeは現在につながるCSSを使用したUAスタイルシートが実装されたと予想できます。

またIEに関しては、いつCSSを使用したUAスタイルシートに切り替わったかの資料が見当たらないため断定ではできませんが、IE3でCSSが初めて実装されたタイミング。
もしくはIE4でHTMLレンダリングエンジンを「Trident」に変えています。この辺りでCSSのUAスタイルシートが実装された可能性があります。

2000年台前半のUAスタイルシート

UAスタイルシートにどのようなCSSが適用されているか調査した古い資料は、W3CがCSS2.1の仕様を作成する上で2003年に公開された資料「Appendix D. Default style sheet for HTML 4.0」で、これがおそらく公で調査された最も古い資料でしょう。
まだUAスタイルシートという言葉を使用しておらず、「Default style sheet」となっています。

この資料では、HTML 4.0に付与されているUAスタイルシートを調査し、その調査をもとに平均化したUAスタイルシートのサンプルが掲載されています。
スタイルシートの指定には「em」単位が使用されており、CSS1の仕様書のサンプルや昨今のUAスタイルシートに似たものを感じますが、当時のブラウザは、値や単位の指定がかなり違います。

Appendix D. Default style sheet for HTML 4.0 の抜粋

address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell; }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px; line-height: 1.12 }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }

この資料が登場した2003年頃のブラウザは、Internet Explorer 6やNetscape 7(Gecko)、Safari 1.0がリリースされ、Operaもまだ独自エンジンだった時代です。
特にUAスタイルシートとして違うのはIE6のUAスタイルシートで、IE7まで同じUAスタイルシートが使われています。このUAスタイルシートは、marginの値に 14pt や 30pt 、font-sizeの値は 10pt が多く使われ、単位に pt が多用されています。

Internet Explorer 6のUAスタイルシート抜粋

body {
	display: block;
	margin: 15px 10px;
	zoom: 1;
}
div {
	display: block;
}

dl {
	display: block;
	margin: 14pt 0;
}

dt {
	display: block;
}

em {
	font-style: italic;
}

embed {
	zoom: 1;
}

fieldset {
	border-style: groove;
	border-width: 2px;
	display: block;
	zoom: 1;
}

form {
	display: block;
	margin: 14pt 0;
}

h1 {
	display: block;
	font-size: 24pt;
	font-weight: bold;
	margin: 14pt 0;
}

h2 {
	display: block;
	font-size: 18pt;
	font-weight: bold;
	margin: 14pt 0;
}

h3 {
	display: block;
	font-size: 13.55pt;
	font-weight: bold;
	margin: 14pt 0;
}

h4 {
	display: block;
	font-weight: bold;
	margin: 14pt 0;
}

h5 {
	display: block;
	font-size: 10pt;
	font-weight: bold;
	margin: 14pt 0;
}

h6 {
	display: block;
	font-size: 7.55pt;
	font-weight: bold;
	margin: 14pt 0;
}

hr {
	text-align: center;
	zoom: 1;
}

html {
	overflow-x: auto;
	overflow-y: scroll;
	zoom: 1;
}

このIE6のUAスタイルシートで面白いところは、table要素のdisplayプロパティの指定にあります。
現在のUAスタイルシート及びCSSのテーブルの表示には display: table や display: table-cell などのテーブルを整形する値を指定します。
しかしこの頃のIEのUAスタイルシートのテーブル指定は display: block のみ。
そして zoom: 1 という指定。これは今のCSSのzoomプロパティとは異なり、IEが独自に実装していたレイアウト方法である「hasLayout」を有効にするための指定です。
特殊なレンダリングはまだHTMLに依存していることが、ここから読み取れます。

Internet Explorer 6のUAスタイルシートのtable要素抜粋

table {
	border-color: #D4D0C8;
	display: block;
	zoom: 1;
}

tbody {
	border-color: #D4D0C8;
	display: block;
}

td {
	border-color: #D4D0C8;
	display: block;
	padding: 1px;
	zoom: 1;
}

一方、同時期に近いNetscape 7のUAスタイルシートは、marginの上下やフォントサイズの単位に em が使用され、W3Cで公開されたUAスタイルシートのサンプルに近いものになっています。
またtable要素の宣言には display: table が使われており、CSSの仕様に沿った実装が垣間見えます。

Netscape 7のUAスタイルシート抜粋

html, div, map, dt, isindex {
  display: block;
}

body {
  display: block;
  margin: 8px;
}

p, dl, multicol {
  display: block;
  margin: 1em 0;
}

dd {
  display: block;
  margin-left: 40px;
}

blockquote {
  display: block;
  margin: 1em 40px;
}

address {
  display: block;
  font-style: italic;
}

center {
  display: block;
  text-align: -moz-center;
}

blockquote[type=cite] {
  display: block;
  margin: 1em 0px;
  padding-left: 1em;
  border-left: solid;
  border-color: blue;
  border-width: thin;
}

span[_moz_quote=true] {
  color: blue;
}

pre[_moz_quote=true] {
  color: blue;
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin: .83em 0;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

h4 {
  display: block;
  font-weight: bold;
  margin: 1.33em 0;
}

h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin: 1.67em 0;
}

h6 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin: 2.33em 0;
}

listing {
  display: block;
  font-family: -moz-fixed;
  font-size: medium;
  white-space: pre;
  margin: 1em 0;
}

/* tables */

table {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
  margin-top: 0;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  text-indent: 0;
}

table[align="left"] {
  float: left;
}

もう一つ同時期のUAスタイルシートを見ておきましょう。
ブラウザは「Konqueror」、正確にはwebブラウザ兼ファイルマネージャーのアプリケーションです。
レンダリングエンジンに「KHTML」が使用されており、のちにAppleがKHTMLをフォークして「WebKit」が開発されます。
その証拠にSafariのUAには、「KHTML」の文字が今でも記載されています。

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15

それでは「Konqueror」のUAスタイルシートを見てみましょう。

Konqueror 3.2.0のUAスタイルシートの抜粋

/*
 * The default style sheet used by khtml to render HTML pages
 * (C) 2000-2003 Lars Knoll (knoll@kde.org)
 *
 * Konqueror/khtml relies on the existence of this style sheet for
 * rendering. Do not remove or modify this file unless you know
 * what you are doing.
 */

html {
	display: block;
	color: -khtml-text;
}

/*
 * head and it's children all have display=none
 */

head {
	display: none;
}

meta {
	display: none;
}

title {
	display: none;
}

link {
	display: none;
}

style {
	display: none;
}

script {
	display: none;
}

/*
 * generic block level elements
 */

@media print {
	body {
		display: block;
		margin: 0px;
	}
}

@media screen {
	body {
		display: block;
		margin: 10px;
	}
}

p {
	display: block;
	margin: 1.0__qem 0px;
}

div {
	display: block;
}

/* to force a block level context for some cases (broken HTML) */

layer {
	display: block;
}

address {
	display: block;
}

CENTER {
	display: block;
	/* special centering to be able to emulate the html4/netscape behavior */
	text-align: -khtml-center;
}

/*
 * heading elements
 */

H1 {
	display: block;
	font-size: 1.7em;
	margin: .67__qem auto .67em auto;
	font-weight: bolder;
}

H2 {
	display: block;
	font-size: 1.4em;
	margin: .83__qem auto .83em auto;
	font-weight: bolder;
}

H3 {
	display: block;
	font-size: 1.17em;
	margin: 1__qem auto 1em auto;
	font-weight: bolder;
}

H4 {
	display: block;
	margin: 1.33__qem auto 1.33em auto;
	font-weight: bolder;
}

H5 {
	display: block;
	font-size: .83em;
	margin: 1.67__qem auto 1.67em auto;
	font-weight: bolder;
}

H6 {
	display: block;
	font-size: .67em;
	margin: 2.33__qem auto 2.33em auto;
	font-weight: bolder;
}

/*
 * tables
 */

TABLE {
	display: table;
	border-collapse: separate;
	vertical-align: middle;
	text-align: -khtml-auto;
	border-spacing: 2px;
        -khtml-flow-mode: -khtml-around-floats;
}

まず色々見るべきところがありますが、まずはコピーライトです。 2000-2003年頃に作成されたことが読み取れます。

そしてhtml要素に記載された color: -khtml-text という宣言。
-khtml- ベンダープリフィックスが記述されています。ベンダープリフィックスといえば、ブラウザがCSS3などのCSSを実験的に先行実装する時に使用されている印象があると思います。
ただKonquerorのベンダープリフィックスの役割は、ブラウザのレンダリングにあわせた独自実装です。
2016年以降のKHTMLで使用されてるCSSの値一覧ですが、GitHubより確認でき、ベンダープリフィックスがKHTMLにおいては、先進的な技術を導入ではないのが分かります。 https://github.com/KDE/khtml/blob/master/src/css/cssvalues.in

またh1要素の宣言で margin: .67__qem auto .67em auto と単位で __qem という独自の単位を使っているのも印象的です。
__qem は、通常は em として振る舞いますが、Quirksモードにてmarginの相殺を行わないようにする独自単位です。
Konquerorのレンダリングエンジン「KHTML」は、その後Safariの「Webkit」。Webkitから派生して、Google Chromeの「Blink」が開発されることになりますが、__qem 単位は現在のWebkitやBlinkのUAスタイルシートでも使用されています。

HTML5の登場

W3Cより2008年1月22日にHTML5の草案が発表されてから、先行実装を含めてHTML5がブラウザに順次実装されていきました。
ただ実装当初のHTML5の全ての要素は、UAスタイルシートにHTML5のスタイルがまだ定義されていませんでした。そのためdisplayプロパティであれば inline など、CSSの初期値が適用されていた状態でした。
初めてHTML5要素を使用したWeb製作者が「ブロックレベルの見た目にならないんかい」とTwitterで愚痴っていたのを、当時に何度か見かけています。 (note: IE8までのブラウザの仕様では、ブラウザで定義されていない要素があった場合に空要素になる仕様があり、JSを読み込ませるなどの対応も必要でした。)

UAスタイルシートで印象的な出来事があります。
ある日、ブラウザをアップデートするとfigure要素のレイアウトがおかしくなりました。ブラウザのアップデートによって下記のUAスタイルシートが反映されていたからです。

figure要素のUAスタイルシート

figure {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 40px;
	margin-inline-end: 40px;
}

ブラウザのアップデート前にW3Cの仕様書か何かを見ていたので、marginプロパティが付くというのを知っていました。
そのためUAスタイルシートの仕業というのにすぐ気が付きました。
しかし当時のHTML5の新要素のリセットCSS対応は、新要素に対して display: block のみを指定するものだったので、figure要素を使った一部のサイトでレイアウトは崩れていたのを今でも覚えています。

そして改めてみると、figure要素もMosaicの系譜を感じます。
figure要素と同じスタイルが適用されている要素は、blockquote要素です。

blockquote {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 40px;
	margin-inline-end: 40px;
}

さらにMosaicの後継であるIE6のblockquote要素まで遡りましょう。

blockquote {
	display: block;
	margin: 14pt 30pt;
}

marginの左右が 30pt です。ただ 30pt をピクセルに変換すると 40px になるのです！
特に技術の進歩によって、論理プロパティや em に変わっても 40px がそのまま残っているというのは、感慨深いものがあります。

話は戻って、IE11もHTML5のUAスタイルシートで印象深い1つです。
IE11はリリース後の数年後にMicrosoft公式から「もう機能の拡張しない」と明言したために、IE11の main要素 はUAスタイルシートに display: block の宣言がないまま、IEの歴史に幕を閉じたブラウザとなりました。

2010年頃のUAスタイルシート

2009年のIE8の登場や様々なモダンブラウザのUAスタイルシートに変化が生まれます。
FirefoxやSafari, Google Chrome, Operaといった主要なモダンブラウザのUAスタイルシートは、フォーム関するHTML要素以外の足並みが揃いだし、よく使う見出し要素や段落などのブラウザごとの見た目の差が少なくなってきました。

この変化は非常によく覚えています。なぜなら、2011年にUAスタイルシートをまとめてブログで紹介したからです。

そしてIE8からでモダンブラウザに合わせたようなUAスタイルシートが提供されるようになります。
以下はIE7, IE8, モダンブラウザ(Chrome v9)の比較表です。
(値や指定方向は同じですが、見やすさのために一部改変しています)

html要素	IE7	IE8	Chrome v9
html	display: block; overflow-x: auto; overflow-y: auto; zoom: 1;	display: block; zoom: 1;	display: block;
body	display: block; margin: 15px 10px; zoom: 1;	display: block; margin: 8px; zoom: 1;	display: block; margin: 8px;
h1	display: block; margin: 14pt 0; font-size: 24pt; font-weight: bold;	display: block; margin: 0.67em 0; font-size: 2em; font-weight: bold; page-break-after: avoid;	display: block; margin: 0.67em 0; font-size: 2em; font-weight: bold;
p	display: block; (margin: 14pt 0;)	display: block; margin: 1em 0;	display: block; margin: 1em 0;
ul	display: block; margin: 14pt 0 14pt 30pt; list-style-type: disc; list-style-position: outside; list-style-image: none;	display: block; margin: 1em 0; padding-left: 30pt; list-style-type: disc; list-style-position: outside; list-style-image: none;	display: block; margin: 1em 0; padding-left: 40px; list-style-type: disc;
table	display: block; border-color: #F0F0F0; zoom: 1;	display: table; border-color: #F0F0F0; box-sizing: border-box; border-spacing: 2px 2px; zoom: 1;	display: table; border-color: gray; border-spacing: 2px 2px; border-collapse: separate;

IE7までは、特殊な要素であるtable要素やli要素であっても、displayプロパティの値は block でした。
しかしIE8以降からモダンブラウザと同じように、table要素は display: table 、li要素は display: list-item が適用されるようになります。
また値と単位もモダンブラウザに合わせたものに移行しています。

そして2010年頃のUAスタイルシートで着目する箇所は、論理プロパティ です。
論理プロパティは、簡単にいうとCSS Writing Modesに依存した方向にあわせてレイアウトを制御する方法です。論理プロパティは、Firefoxや当時のwebkitブラウザであるSafari, Chromeに導入され始めました。

当時の論理プロパティは、marginとpaddingプロパティしか対応していませんでした。そしてプロパティ名も現在のものとは異なりますが、この時から論理プロパティの下地がUAスタイルシートで行われていました。

/* 論理プロパティ */
-webkit-margin-before
-webkit-margin-end
-webkit-margin-after
-webkit-margin-start
-webkit-padding-before
-webkit-padding-end
-webkit-padding-after
-webkit-padding-start

2023年までのUAスタイルシート

よく使われるタグは、2010年ごろに起きたUAスタイルシートの変化に比べれば、フォーム関連など以外は大した変化は起きていませんが、微妙に変化しています。

論理プロパティの変化

最新のUAスタイルシート

(Blinkは、ChromeやMicrosoft Edge、Operaを始めとする様々なブラウザで使われているので、ブラウザ名ではなく「Blink」と表記します。)

SafariとFirefoxのUAスタイルシートは CSS Logical Properties and Values Level 1 の仕様の通り margin-block-start margin-block-end などが適用されています。

先ほどのBlinkのUAスタイルシートのリンクには margin-before margin-end などの旧論理プロパティが使用されていますが、DevToolで確認するとBlinkも仕様書に則った論理プロパティが適用されるようになっています。

廃止された古いHTMLの仕様

今は廃止となったHTML5のアウトラインアルゴリズムの残滓もUAスタイルシートに見ることができます。
XHTML 2.0にあった section と h 要素の仕様がHTML5組み込まれ、後方互換を考えて h は h1 となりました。
そしてUAスタイルシートに見た目の変化が適用されましたが、最終的に仕様から削除されました。

後方互換のために残っているところが、歴史を感じます。
そしてBlinkのUAスタイルシートは :is() ではなく :-webkit-any() であることも歴史ポイントが高いですね。

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block-start: .67em;
  margin-block-end: .67em;
}

h2,
:is(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block-start: .83em;
  margin-block-end: .83em;
}

h3,
:is(article, aside, nav, section)
:is(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

新しいHTML要素

後方互換のために残っているスタイルもありますが、新しいHTMLもUAスタイルシートに適用されています。 dialog 要素を紹介しましょう。

まずはBlinkのUAスタイルシート。

dialog:not([open]) {
    display: none
}
dialog {
    position: absolute;
    left: 0;
    right: 0;
    width: -webkit-fit-content;
    height: -webkit-fit-content;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black
}
dialog::backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.1)
}

次にFirefoxのUAスタイルシート。

dialog:not([open]) {
  display: none;
}

dialog:modal {
  -moz-top-layer: top !important;
  position: fixed;
  overflow: auto;
  visibility: visible;
  inset-block-start: 0;
  inset-block-end: 0;
  max-width: calc(100% - 6px - 2em);
  max-height: calc(100% - 6px - 2em);
}

/* https://html.spec.whatwg.org/#flow-content-3 */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.1);
}

SafariのUAスタイルシートのソースには dialog の指定がないのですが、開発ツールで確認するとFirefoxに似た指定でした。

BlinkとFirefoxのコードを見比べると dialog:not([open]) には display: none; が適用されていますが、それ以降のコードの雰囲気が変わっています。
特に dialog::backdrop でFirefoxは position: fixed 指定がなく、 Top Layer に描写される前提であることが興味深いです。

記事公開時点のTop Layerは、FirefoxはもちろんのことBlink系のブラウザも実装されていますが、Safariには実装されていません。
Change dialog from position: absolute to position: fixed. - Chrome Platform Status

リセットCSSをざっくり

UAスタイルシートの歴史を振り返ってきました。UAスタイルシートは、そのままブラウザの歴史でもありました。
では、リセットCSSはどうだったのでしょう。リセットCSSは、ブラウザの見た目を制御したい開発者の工夫によって生まれました。

UAスタイルシートは今ほど似たスタイルではなく、もっとバラバラでした。
2000年台前半のことです。IEは単位にptを使っていたり、Quirksモードでmarginの相殺が消えたり、それぞれ値が異なっています。
そのままでは、全てのブラウザで同じような見た目になりませんでした。

そのためCSSの外観の一貫性を保つために「リセットCSS」が使用されるようになりました。
最初のリセットCSSと呼ばれる全称セレクタによるCSSも、少なくとも2004年には登場しています。

全称セレクタのリセットCSS

 * {
	 font-size: 1em;
	 margin: 0;
	 padding: 0;
 }

ここに至るまでテーブルレイアウトからCSSへのWeb標準の運動の話などありますが、UAスタイルシートとリセットCSSの話題から外れるので割愛します。

2000年代のリセットCSS

全称セレクタによるリセットCSSが広がっていましたが、2006年にYahoo! UI Library(YUI)よりReset CSSが登場。2008年にEric Meyer氏がCSS Tools: Reset CSSというリセットCSSを公開します。

この2つのリセットCSSの特徴は、全ての要素のmarginやpaddingプロパティを初期化しない、ということです。
Eric Meyer's "Reset CSS"を見てみましょう。

Eric Meyer's "Reset CSS"

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

全称セレクタでのリセットしてしまうと、意図していない要素の値までリセットしてしまい、input要素やtextarea要素のpaddingプロパティを 0 にしてしまうなどの問題があります。

そのためYUIやEric MeyerのリセットCSSでは、htmlやbody、pタグなど使用するHTML要素を列挙し、適用したい要素を限定してmarginやpaddingプロパティなどの値を初期化しています。

2009年には、Eric MeyerのリセットCSSにHTML5の新要素を追加したリセットCSSがHTML5の情報を積極的に公開していたHTML5 Doctorからリリースされます。

さらにHTML5に対応したリセットCSSがいくつも作られます。

2010年頃のリセットCSS

2010年頃のリセットCSSは、YUIやEric MeyerのリセットCSSを筆頭として大量の要素が記述されていました。この時、本当にこの記述が必要なのか、私は疑問を持ち始めました。

見出しの要素を使用する時に、結局デザインに合わせてmarginやfont-sizeプロパティは変更します。
またリセットCSSによっては、見出しやstrong要素のfont-weightプロパティをnormalにするリセットCSSもあり、太文字で使用する確率の高い要素をリセットしまうことに違和感を感じていました。

そこで私はUAスタイルシートを生かしつつ、最小限の新しいリセットCSSを作るために、2011年に当時の主要ブラウザのUAスタイルシートを表にまとめました。この時には、IE以外のほとんどのブラウザでUAスタイルシートの差は少なくなっていました。

しかし似たような思想で、すでに作られていたリセットCSSをすぐに知ることになります。それが「 Normalize.css 」です。
Normalize.cssは、これまでのリセットCSSとは異なります。よく使用するHTML要素の値を 0 にするのではなく、複数ブラウザのバグや仕様の違いなどによる不整合な箇所を修正します。
UAスタイルシートの保持と正規化を目的としたCSSです。
ただNormalize.cssの思想はUAスタイルシートを保持しますが、その理念はあくまでUAスタイルシートの正規化です。あとから自分の好きなようにベースのCSSを変更してもいいとしています。

そのためNormalize.cssを読み込んだあとに、下記のようなコードを見ることも少なくありません。

 * {
	 margin: 0;
	 padding: 0;
 }

使い方としては間違っていませんが、個人的にはそれなら最初から全称セレクタか、値を 0 にできるリセットCSSを使った方がスマートだと思っています。

リセットCSS と Normalize.css

リセットCSSの過去の流れも見てきました。
近年も新しいリセットCSSがいくつも出てきています。新しい技術を使っていますが、基本的には 0 にする方向性か、Normalize.cssの派生です。
リセットCSSは 0 にすることで、UAスタイルシートが分からないユーザーでも簡単に扱えるようになります。
CSSにこだわりがなければ好きなものを使えばいいじゃないかな、と思います。

Normalize.cssの派生は、Normalize.cssのようにUAスタイルシートを保持しすぎると使いにくいので、適度に宣言の追加や 0 にしている印象です。

それぞれのリセットCSS系とNormalize.cssを含めた派生のCSSを試せるページをとほほさんが用意してくれていました。
とほほのリセットCSSテスター

ベースルールによるCSS

CSS設計の SMACSS に「ベースルール」という考え方があります。
ベースルールは、1つの要素に対してクラスやIDセレクタは使用せずに、ページ全体で要素がどう見えるのかを定義するデフォルトスタイルのことです。
下記は、その例です。

/* SMACSS　のベースルールの例 */
body, form {
	margin: 0;
	padding: 0;
}
a {
	color: #039;
}
a:hover {
	color: #03F;
}

SMACSSの引用です。

多くのリセットフレームワークは必要以上に強引で場合によっては、問題を解決するよりも問題を生み出すことにもなりかねない。マージンやパディングを要素から削除することは、もう1度設定することを意味し、結果的にブラウザが読み込むコードが増えることもある。

多くの人はスタイルのリセットはサイト開発を行うのに便利なツールだと考えているが、リセットフレームワークがどのような欠点を抱えているのかきちんと理解し、それに基づいて利用してほしい。 (CSSリセット - SMACSS)

UAスタイルシートが頭に入っていれば、Normalize.cssを元にしてベースルールでCSSを作成することも可能です。
私は無駄の少ないCSSの作成を目指していたので、ベースルールという思想は非常に共感できます。

今もベースルールを常に意識してCSSを書いています。このブログのCSSは実験的な書き方をしている箇所もありますが、UAスタイルシートを多く残しつつ、ベースルールの思想で記述しています。

もちろん他社と協業する時やチームで作成する時は、知識レベルが異なるのでベースルールでやるか、リセットCSSを使うか、フレームワークに依存したものを使用するかの協議が必要になります。
ただ基礎を理解しておけば、どんなルールでも対応できます。

最後に

情報量が多いので間違いがありましたら、ご指摘をよろしくお願いします。

参考