CSSリセットの種類、どのCSSリセットが適しているかの選び方

Post on:2018年12月6日

ブラウザごとのデフォルトのスタイル

すべてのブラウザにはWebページのすべてに適用される「user agent stylesheet（以下、UA stylesheet）」と呼ばれるデフォルトのスタイルが付属しています。これらのスタイルシートはオープンソースで公開されています。

下記ページにuser agent stylesheetをまとめました。

user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート

多くのスタイルは、すべてのUA stylesheetで一貫されています。例えば、私はhead要素が特別な機能だから表示されないと思っていましたが、実際には「display: none;」が定義されており、ページ上の他の要素のように非表示になっています。そのスタイルは、Webkit, Chromium, Mozillaに記述されています。

また同時に、多くのスタイルがすべてのUA stylesheetで一貫されていないとも言えます。例えば、検索のinput要素がブラウザごとにどのように表示されるか見てみましょう。

ブラウザごとのinput要素のデフォルトのスタイル

なぜCSSリセットが必要か

UA stylesheetごとの矛盾を扱うために、CSSリセットは誕生しました。CSSリセットとはブラウザ間でより標準化されたベースを作成することが目的で、通常は他のスタイルの前にページに適用されるスタイルのセットです。

Eric Meyerは、2007年にCSSリセットを作成した理由についての記事を書いていますが、それは現在でも当てはまると思います。

基本的な理由は、すべてのブラウザにプレゼンテーションのデフォルトがありますが、ブラウザのデフォルトは同じではありません。CSSはドキュメントのデフォルトの外観を変更すると考えていますが、「リセット」スタイルシートを使用すると、ブラウザのデフォルトと戦う時間を短縮できます。
参考: Reset Reasoning

もちろんブラウザのデフォルトは2007年のとは異なりますが、私はリセットがまだ役に立つと考えます。

最近のUA stylesheetでは、矛盾は少なくなっていますか？

はい、ブラウザ間の多くのデフォルトのスタイルは非常に似ています。例えば、ほとんどのブラウザでは、h1要素に同じ0.67emの水平マージンと2emフォントサイズが適用されています。しかし、この一貫性は比較的新しいもので、一貫性の低いデフォルトのスタイルを持つ古いブラウザのサポートを検討する必要があります。

さらに、適用したいリセットのタイプ（下記参照）に応じて、モダンで一貫性のあるブラウザのみで使用されていても、リセットが必要な場合があります。

リセットを上書きするために自身のスタイルを適用しませんか？

CSSリセットを使用しない理由の1つは、多くのスタイルが最終的にメインのスタイルシートによって上書きされることです。つまり、リセットしたスタイルが不必要にページのロード時間に追加されます。
参考: Why Reset Style Sheets Are Bad

確かにこれは事実ですが、2つの理由で使用をやめる理由にはならないでしょう。

1つ目は、リセットがよりクリーンなスタイルを書くことを可能にするからです。Webサイトの実際のデザインのために、特定のブラウザと私のスタイルを対象にしたスタイルを分けることができます。デザイン固有のスタイルと同じ場所にブラウザ固有の修正を行うのではなく、それらを分けることができます.

2つ目は、リセットは（通常）非常に小さなファイルで、ロード時間にはほとんど影響しません。要素のスタイルを上書きおよび変更することは頻繁に行われるので、決してこれを実行しないとするならばパフォーマンスが向上する可能性はありますが、ロード時間的にはあまり価値がないでしょう。

CSSリセットの種類

たくさんの異なるCSSリセットが公開されています。2004年のundohtml.cssをはじめ、本当にたくさんのCSSリセットが存在します。

大別して、CSSリセットが達成しようとする3つの目標があります。リセットスタイルシートの中には、これらの3つの目標を組み合わせるものもあれば、1つだけを解決しようとするものもあります。

ユーザエージェントによるスタイルのエラーを修正する
ユーザエージェントによる独自スタイルを元に戻す
一貫したスタイルのベースを作成する

UAのエラーを修正するCSSリセット

CSSリセットの目的の1つは、UA stylesheetのエラーを修正することです。あなたが想像するように、これは古いブラウザに対応するためです。例えば、HTML5が導入され、IE 9などの古いブラウザがHTML5の新しい要素を正しく適用しなかった場合がよい例です。

Normalize.cssではこれらのエラーは具体的に記述され、スタイルが修正されています。

/**
 * Add the correct display in IE.
 */

main {
  display: block;
}

/**

* Add the correct display in IE.

main {

display: block;

}

参考: normalize.css 8.0.0がリリース！古いブラウザはサポート対象外、大幅に軽量化
参考: Normalize.cssの特徴や使い方などの解説

これらのスタイルは古いブラウザにのみ適用されるので、ブラウザリストとともにPostCSS NormalizeなどのPostCSSプロセッサを使用することもできます。これにより、特定のブラウザをサポートしている場合にのみ、これらのタイプのスタイルを条件付きで追加することができます。

また、いくつかのモダンブラウザに適用されているhidden属性を持つ要素のdisplayも修正されています。

[hidden] {
    display: none !important; // One of the good use cases of !important
}

[hidden] {

display: none !important; // One of the good use cases of !important

}

UAの独自スタイルを元に戻すCSSリセット

CSSリセットのもう1つの目標は、ユーザエージェントによる独自スタイルを元に戻すことです。

独自スタイルの定義には、多くの意見があります。独自スタイルにおける私の定義は「最低限」です。例えば、見出しに2emのmarginを追加することを検討します。ほとんどのUA stylesheetではそのように定義されています。なぜ、3em、あるいは4emではないのでしょうか？　私の意見では、独自ではないスタイルは0のmarginだけです。

この考え方を取り入れた簡単なCSSリセットが「Universal Reset」です。すべての要素からmarginとpaddingを取り除きます。

* {
    margin: 0;
    padding: 0;
}

* {

margin: 0;

padding: 0;

}

しかし、「Universal Reset」はinput要素のような予期しない要素からもpaddingを削除してしまうため、使いにくいです。その代わりに一般的に使用されるリセットが、Eric MeyerのCSS Resetです。特定の要素のmargin, padding, border, font-sizeを0または無しにします。また、input要素のようにpaddingが必要な要素は含まれていません。

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

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, 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,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

一貫したスタイルのためのCSSリセット

UAの独自スタイルを完全に元に戻すことによって修正しようとした場合、このカテゴリのリセットは、別の独自スタイルを定義することによって実現させます。

例えば、すべてのフォントサイズを1emに定義したり、marginを0に定義する代わりに、それとは別の独自スタイルを個別に定義します。

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

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

/**

* Correct the font size and margin on `h1` elements within `section` and

* `article` contexts in Chrome, Firefox, and Safari.

h1 {

font-size: 2em;

margin: 0.67em 0;

}

参考: reset.cssとnormalize.cssに続く新しいリセット用CSS -sanitize.css

Bootstrapで採用されている「Reboot.css」もこのグループです。このリセットでは例えば、body要素にfont-familyやbackground-colorを定義しており、さらに多くのスタイルが定義されています。

// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Set an explicit initial text-align value so that we can later use the
//    the `inherit` value on things like `<th>` elements.

body {
  margin: 0; // 1
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: $body-color;
  text-align: left; // 3
  background-color: $body-bg; // 2
}

// Body

// 1. Remove the margin in all browsers.

// 2. As a best practice, apply a default `background-color`.

// 3. Set an explicit initial text-align value so that we can later use the

// the `inherit` value on things like `<th>` elements.

body {

margin: 0; // 1

font-family: $font-family-base;

font-size: $font-size-base;

font-weight: $font-weight-base;

line-height: $line-height-base;

color: $body-color;

text-align: left; // 3

background-color: $body-bg; // 2

}

最近使用しているCSSリセット

私はTwitterで、どんなCSSリセットを使用しているかアンケートを行いました。

Thinking of writing about CSS resets and how they're used today. Do you use a CSS reset/normaliser? Which one?

— Ire Aderinokun (@ireaderinokun) 2018年11月26日

約半数が、ブラウザのエラーを修正して一貫性のある独自スタイルを定義するCSSリセット「Normalize.css」を支持しました。次いで多かったのが、独自にCSSリセットを用意するで、同様に3番目のカテゴリに分類されます。

私からの提案

私は以下の2つの理由により、「Eric Meyer’s CSS reset」を少し修正したバージョンを使用しています。

1つ目は、可能な限り余計なスタイルが無い状態を好むということで、必要に応じてスタイルを加えます。この方法は完全に私の好みに過ぎません。

2つ目は、私は一方向（通常は下向き）で余白を定義したいと考えており、ほとんどのUA stylesheetと同様に、この規則に従わないCSSリセットが多いためです。そのため、私はすべての要素のmarginとpaddingを0にし、私のルールで余白を加えたいと考えています。

最近、私はCSSリセットをさらに調整しています。例えば、「.sr-only」のようなclassを作成し、自分が作業しているすべてのプロジェクトで必要なユーティリティを追加することができます。リセットというより、むしろベースと呼んだ方がいいかもしれません。「Reboot.css」のように新しいCSSリセットが登場すると、使用するCSSリセットを見直すというのは一般的なテーマのように思われます。