normalize.cssで使用されている各スタイルがどのように機能しているか解説

先日紹介した「sanitize.css（紹介記事）」や「Marx（紹介記事）」などリセット用CSSの新しいアプローチが増える中、ブラウザごとの要素の相違を吸収するのに人気なのはまだまだ「normalize.css」でしょう。
そのnormalize.cssも細かい改良が重ねられ、最新のバージョンは3.0.3になっています。

normalize.cssで使用されている各スタイルが、どのように機能しているか確認してみましょう。

normalize.css
normalize.css -GitHub
※3.0.3はGitHubからダウンロードできます。

• normalize.cssの特徴
• html, body, :rootなどの全体系の定義
• HTML5の新要素用の定義
• リンク系の定義
• テキスト系の定義
• 埋め込みコンテンツ系の定義
• グルーピングコンテンツ系の定義
• フォーム系の定義
• テーブル系の定義

normalize.cssの特徴

normalize.cssとはブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。

• 有用なデフォルトはそのまま

  多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。

• スタイルの正常化

  さまざまな種類のエレメントのスタイルを正常化します。

• バグの修正

  各ブラウザごとの異なるスタイルやバグを修正します。

• ユーザビリティの改善

  ほんのわずかな改良でユーザビリティを改善します。

• コードの説明

  各コードには詳細な説明があります。

対応ブラウザは下記の通りです。

• Chrome
• Firefox
• Opera
• Internet Explorer 8+
• Safari 6+

※IE6+, Safari4+は、normalize.css v1をご利用ください。

normalize.cssについて、もっと深く知りたい人は下記を参考にしてください。

• 紹介記事：CSSリセットとは異なる、normalize.cssの特徴や使い方などの解説 -About normalize.css

参考資料：各ブラウザのデフォルトのスタイル

• IEのデフォルトのスタイルシート
• Chromeのデフォルトのスタイルシート
• Firefoxのデフォルトのスタイルシート

html, body, :rootなどの全体系の定義

各スタイルの説明を翻訳しました。
※原文もそのまま残してあります。

[css]
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change, without disabling user zoom.

* 1. デフォルトのフォントファミリーは「sans-serif」をセット。
* 2. iOSとIEにおけるデバイスの向きを変えた後にユーザーが文字サイズ調整を防ぐ。
*/

html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}

/**
* Remove default margin.

* デフォルトのマージンを取り除く。
*/

body {
margin: 0;
}
[/css]

HTML5の新要素用の定義

[css]
/* HTML5 display definitions
========================================================================== */

/**
* Correct block display not defined for any HTML5 element in IE 8/9.
* Correct block display not defined for details or summary in IE 10/11 and Firefox.
* Correct block display not defined for main in IE 11.

* IE8/9用、いくつかのHTML5の要素に「block」を定義。
* IE10/11とFirefox用、「details」と「summary」に「block」を定義。
* IE11用、「main」に「block」を定義。
*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}

/**
* 1. Correct inline-block display not defined in IE 8/9.
* 2. Normalize vertical alignment of progress in Chrome, Firefox, and Opera.

* 1. IE8/9用、「inline-block」を定義。
* 2. Chrome, Firefox, Opera用、「progress」の縦方向の揃えを正常化。
*/

audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}

/**
* Prevent modern browsers from displaying audio without controls.
* Remove excess height in iOS 5 devices.

* モダンブラウザで再生用のコントロールがない「audio」は阻止。
* iOS 5のデバイスでは超過の高さを取り除く。
*/

audio:not([controls]) {
display: none;
height: 0;
}

/**
* Address [hidden] styling not present in IE 8/9/10.
* Hide the template element in IE 8/9/10/11, Safari, and Firefox < 22. * IE8/9/10用、「[hidden]」は非表示を設定。 * IE8/9/10/11, Safari, Firefox <22用、「template」要素は隠す。 */ [hidden], template { display: none; } [/css]

リンク系の定義

[css]
/* Links
========================================================================== */

/**
* Remove the gray background color from active links in IE 10.

* IE10用、アクティブリンクから背景がグレーになるのを取り除く。
*/

a {
background-color: transparent;
}

/**
* Improve readability of focused elements when they are also in an active/hover state.

* リンクのアクティブ・ホバー時にフォーカスした要素のリーダビリティを改善するためにアウトラインを取り除く。
*/

a:active,
a:hover {
outline: 0;
}
[/css]

テキスト系の定義

[css]
/* Text-level semantics
========================================================================== */

/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.

* IE8/9/10/11, Safari, Chrome用、title属性を使用した「abbr」要素に点線を設定。
*/

abbr[title] {
border-bottom: 1px dotted;
}

/**
* Address style set to bolder in Firefox 4+, Safari, and Chrome.

* Firefox 4+, Sarafi, Chrome用、「strong」要素のフォントウェイトにボールドを設定。
*/

b,
strong {
font-weight: bold;
}

/**
* Address styling not present in Safari and Chrome.

* Safari, Chrome用、「dfn」要素にイタリックを設定。
*/

dfn {
font-style: italic;
}

/**
* Address variable h1 font-size and margin within section and article contexts in Firefox 4+, Safari, and Chrome.

* Firefox 4+, Safari, Chrome用、h1要素のフォントサイズとマージンを設定。
*/

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

/**
* Address styling not present in IE 8/9.

* IE8/9用、mark要素を設定。
*/

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

/**
* Address inconsistent and variable font size in all browsers.

* 全てのブラウザ用、small要素でも文字の可読性を確保。
*/

small {
font-size: 80%;
}

/**
* Prevent sub and sup affecting line-height in all browsers.

* 全てのブラウザ用、sub, supが「line-height」に影響を与えるのを妨げる。
*/

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}
[/css]

埋め込みコンテンツ系の定義

[css]
/* Embedded content
========================================================================== */

/**
* Remove border when inside a element in IE 8/9/10.

* IE8/9/10用、img要素がa要素の中にある時にボーダーを取り除く。
*/

img {
border: 0;
}

/**
* Correct overflow not hidden in IE 9/10/11.

* IE9/10/11用、svg要素に「overflow: hidden;」を修正。
*/

svg:not(:root) {
overflow: hidden;
}
[/css]

グルーピングコンテンツ系の定義

[css]
/* Grouping content
========================================================================== */

/**
* Address margin not present in IE 8/9 and Safari.

* IE8/9とSafari用、figure要素にマージンを設定。
*/

figure {
margin: 1em 40px;
}

/**
* Address differences between Firefox and other browsers.

* Firefoxと他のブラウザ間で異なるので、hr要素に設定。
*/

hr {
box-sizing: content-box;
height: 0;
}

/**
* Contain overflow in all browsers.

* 全てのブラウザ用、pre要素に「overflow: auto;」を設定。
*/

pre {
overflow: auto;
}

/**
* Address odd em-unit font size rendering in all browsers.

* 全てのブラウザ用、フォントサイズのレンダリングを設定。
*/

code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
[/css]

フォーム系の定義

[css]
/* Forms
========================================================================== */

/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited styling of select, unless a border property is set.

* 周知の限界：デフォルトでOS XのChrome, Safariは、select要素のスタイルを非常に限定します、borderプロパティのセットをしない限り。
*/

/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.

* 1. カラーが継承されないので、修正。
* 2. フォントのプロパティが継承されないので、修正。
* 3. Firefox 4+, Safari, Chrome用、マージンが異なるので設定。
*/

button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}

/**
* Address overflow set to hidden in IE 8/9/10/11.

* IE8/9/10/11用、button要素に「overflow: visible; 」を設定。
*/

button {
overflow: visible;
}

/**
* Address inconsistent text-transform inheritance for button and select.
* All other form control elements do not inherit text-transform values.
* Correct button style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct select style inheritance in Firefox.

* button要素とselect要素に「text-transform」を設定。
* 他の全てのフォーム コントロール要素は「text-transform」の値を継承しません。
* Firefox, IE8/9/10/11, Opera用、button要素に継承のスタイルを修正。
* Firefox用、select要素に継承のスタイルを修正。
*/

button,
select {
text-transform: none;
}

/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native audio and video controls.
* 2. Correct inability to style clickable input types in iOS.
* 3. Improve usability and consistency of cursor style between image-type input and others.

* 1. Android 4.0.*用、ネイティブのaudio要素とvideo要素のコントールのWebkitのバグを避ける。
* 2. iOS用、クリッカブルなinput要素のtypeのスタイルを修正。
* 3. 画像を使用したinput要素にはユーザビリティのためにカーソルをポインターに改善。
*/

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}

/**
* Re-set default cursor for disabled elements.

* disabledを指定した使用不可の要素にはカーソルをデフォルトにリセット。
*/

button[disabled],
html input[disabled] {
cursor: default;
}

/**
* Remove inner padding and border in Firefox 4+.

* Firefox 4+用、button要素とinput要素の内側のパディングを取り除く。
*/

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

/**
* Address Firefox 4+ setting line-height on input using !important in the UA stylesheet.

* Firefox 4+用、ブラウザに設定されているUAスタイルシートで設定されている「!important」を使った「line-height」を設定。
*/

input {
line-height: normal;
}

/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.

* これらの要素のスタイルは試さないことを勧めます。
* Firefoxの実装では、box-sizing, padding, widthを尊重しません。
*
* 1. Address box sizing set to content-box in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.

* 1. IE8/9/10用、box-sizingに「content-box」を設定。
* 2. IE8/9/10用、余分なパディングを取り除く。
*/

input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}

/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain font-size values of the input, it causes the cursor style of the decrement button to change from default to text.

* Chrome用、数値を増減させるinput要素はfont-sizeをある特定の値にするとカーソルのスタイルがデフォルトからテキストに変化してしまうのを修正。
*/

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}

/**
* 1. Address appearance set to searchfield in Safari and Chrome.
* 2. Address box-sizing set to border-box in Safari and Chrome.

* 1. Safari, Chrome用、検索フィールドのアピアランスを設定。
* 2. Safari, Chrome用、box-sizingにはborder-boxを設定。
*/

input[type="search"] {
-webkit-appearance: textfield; /* 1 */
box-sizing: content-box; /* 2 */
}

/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has padding (and textfield appearance).

* OS XのSarai, Chrome用、検索フィールドのキャンセルボタンの内側のパディングを取り除く。
* Safari用（Chromeではない）、検索フィールドの左にできてしまうパディングを切り取る。
*/

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

/**
* Define consistent border, margin, and padding.

* fieldset要素のborder, margin, paddingを同じスタイルで定義。
*/

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

/**
* 1. Correct color not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.

* 1. IE8/9/10/11用、カラーが継承されないのを修正。
* 2. 外側のfieldsetをゼロにした際のpaddingを取り除く
*/

legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}

/**
* Remove default vertical scrollbar in IE 8/9/10/11.

* IE8/9/10/11用、デフォルトの垂直方向のスクロールバーを取り除く
*/

textarea {
overflow: auto;
}

/**
* Don't inherit the font-weight (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.

* font-weightの継承をしない。
* メモ: OS XのChrome, Safariでは、デフォルトを安全に変更することができません。
*/

optgroup {
font-weight: bold;
}
[/css]

テーブル系の定義

[css]
/* Tables
========================================================================== */

/**
* Remove most spacing between table cells.

* テーブルのセル間のスペースを取り除く。
*/

table {
border-collapse: collapse;
border-spacing: 0;
}

td,
th {
padding: 0;
}
[/css]