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

Post on:2015年5月21日

sponsorsr

先日紹介した「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

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

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

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

/*! 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;
}

HTML5の新要素用の定義

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct <code>block</code> display not defined for any HTML5 element in IE 8/9.
 * Correct <code>block</code> display not defined for <code>details</code> or <code>summary</code> in IE 10/11 and Firefox.
 * Correct <code>block</code> display not defined for <code>main</code> 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 <code>inline-block</code> display not defined in IE 8/9.
 * 2. Normalize vertical alignment of <code>progress</code> 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 <code>audio</code> without controls.
 * Remove excess height in iOS 5 devices.

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

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

/**
 * Address <code>[hidden]</code> styling not present in IE 8/9/10.
 * Hide the <code>template</code> element in IE 8/9/10/11, Safari, and Firefox < 22.

 * IE8/9/10用、「&#91;hidden&#93;」は非表示を設定。
 * IE8/9/10/11, Safari, Firefox <22用、「template」要素は隠す。
 */

&#91;hidden&#93;,
template {
  display: none;
}
&#91;/css&#93;


<h2 id="h203">リンク系の定義</h2>

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

テキスト系の定義

/* 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 <code>bolder</code> 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 <code>h1</code> font-size and margin within <code>section</code> and <code>article</code> 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 <code>sub</code> and <code>sup</code> affecting <code>line-height</code> 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;
}

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

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside <code>a</code> 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;
}

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

/* 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 <code>em</code>-unit font size rendering in all browsers.

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

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

フォーム系の定義

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited styling of <code>select</code>, unless a <code>border</code> 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 <code>overflow</code> set to <code>hidden</code> in IE 8/9/10/11.

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

button {
  overflow: visible;
}

/**
 * Address inconsistent <code>text-transform</code> inheritance for <code>button</code> and <code>select</code>.
 * All other form control elements do not inherit <code>text-transform</code> values.
 * Correct <code>button</code> style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct <code>select</code> 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 <code>audio</code> and <code>video</code> controls.
 * 2. Correct inability to style clickable <code>input</code> types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type <code>input</code> 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 <code>line-height</code> on <code>input</code> using <code>!important</code> 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 <code>content-box</code> 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 <code>font-size</code> values of the <code>input</code>, it causes the cursor style of the decrement button to change from <code>default</code> to <code>text</code>.

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

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

/**
 * 1. Address <code>appearance</code> set to <code>searchfield</code> in Safari and Chrome.
 * 2. Address <code>box-sizing</code> set to <code>border-box</code> 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 <code>textfield</code> 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 <code>color</code> 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 <code>font-weight</code> (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;
}

テーブル系の定義

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.

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

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

td,
th {
  padding: 0;
}