[CSS]便利なのが登場！normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize

サイト構築 -CSS

Post on:2018年2月13日

modern-normalizeの特徴

modern-normalizeは、ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「normalize.css」をモダンブラウザ用に最適化したスタイルシートです。

normalize.cssとの相違点

軽量で、コンパクト。
最新のモダンブラウザをサポート。
「box-sizing: border-box;」を採用。
デフォルトのフォントの一貫性を向上。
タブのサイズをより読みやすく設定。

サポートブラウザ

最新のChrome
最新のFirefox
最新のSafari

MITライセンスで、個人でも商用でもクライアントのプロジェクトでも利用できます。

modern-normalizeの使い方

リセット用CSSと同様に、外部スタイルシートとしてhead内に記述します。

<head>
  ...
  <link rel="stylesheet" href="modern-normalize.css">
  <-- 使用するCSSファイルはこの後に記述 -->
</head>

<head>

...

<-- 使用するCSSファイルはこの後に記述 -->

</head>

modern-normalizeの中身

v.0.4.0を項目ごとに翻訳してみました。

html, :rootなどのドキュメントの定義

/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */

/* Document
   ========================================================================== */

/**
 * Use a better box model (opinionated).
 * プロジェクトに合ったボックスモデルを使用する (オプション)。
 */

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

/**
 * Use a more readable tab size (opinionated).
 * タブのサイズをより読みやすくする (オプション)。
 */

:root {
	-moz-tab-size: 4;
	tab-size: 4;
}

/**
 * Correct the line height in all browsers.
 * すべてのブラウザで、行の高さ（line-height）を修正。
 */

html {
	line-height: 1.15;
}

/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */

/* Document

========================================================================== */

/**

* Use a better box model (opinionated).

* プロジェクトに合ったボックスモデルを使用する (オプション)。

html {

box-sizing: border-box;

}

*::before,

*::after {

box-sizing: inherit;

}

/**

* Use a more readable tab size (opinionated).

* タブのサイズをより読みやすくする (オプション)。

:root {

-moz-tab-size: 4;

tab-size: 4;

}

/**

* Correct the line height in all browsers.

* すべてのブラウザで、行の高さ（line-height）を修正。

html {

line-height: 1.15;

}

セクション系の定義

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 * すべてのブラウザで、デフォルトのマージン（margin）を削除。
 */

body {
	margin: 0;
}

/**
 * Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 * すべてのブラウザで、デフォルトのフォントの一貫性を改善。
 */

body {
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol';
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 * Chrome, Firefox, Safariで、sectionとarticleのコンテキスト内のh1要素のフォントのサイズ（font-size）とマージン（margin）を修正。
 */

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

/* Sections

========================================================================== */

/**

* Remove the margin in all browsers.

* すべてのブラウザで、デフォルトのマージン（margin）を削除。

body {

margin: 0;

}

/**

* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)

* すべてのブラウザで、デフォルトのフォントの一貫性を改善。

body {

font-family:

-apple-system,

BlinkMacSystemFont,

'Segoe UI',

Roboto,

Helvetica,

Arial,

sans-serif,

'Apple Color Emoji',

'Segoe UI Emoji',

'Segoe UI Symbol';

}

/**

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

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

* Chrome, Firefox, Safariで、sectionとarticleのコンテキスト内のh1要素のフォントのサイズ（font-size）とマージン（margin）を修正。

h1 {

font-size: 2em;

margin: 0.67em 0;

}

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

/* Grouping content
   ========================================================================== */

/**
 * Add the correct height in Firefox.
 * Firefoxで、正しい高さを追加。
 */

hr {
	height: 0;
}

/* Grouping content

========================================================================== */

/**

* Add the correct height in Firefox.

* Firefoxで、正しい高さを追加。

hr {

height: 0;

}

テキスト系の定義

/* Text-level semantics
   ========================================================================== */

/**
 * Add the correct text decoration in Chrome, Edge, and Safari.
 * Chrome, Edge, Safariで、テキストの正しいデコレーションを追加。
 */

abbr[title] {
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 * Chrome, Edge, Safariで、フォントの正しいウェイトを追加。
 */

b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 1. すべてのブラウザで、フォントサイズの継承とスケーリングを修正。
 * 2. すべてのブラウザで、フォントの不規則なサイズを統一。
 */

code,
kbd,
samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 * すべてのブラウザで、フォントの正しいサイズを追加。
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 * すべてのブラウザで、subとsup要素が行の高さに与える影響を阻止。
 */

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Text-level semantics

========================================================================== */

/**

* Add the correct text decoration in Chrome, Edge, and Safari.

* Chrome, Edge, Safariで、テキストの正しいデコレーションを追加。

abbr[title] {

text-decoration: underline dotted;

}

/**

* Add the correct font weight in Chrome, Edge, and Safari.

* Chrome, Edge, Safariで、フォントの正しいウェイトを追加。

strong {

font-weight: bolder;

}

/**

* 1. Correct the inheritance and scaling of font size in all browsers.

* 2. Correct the odd `em` font sizing in all browsers.

* 1. すべてのブラウザで、フォントサイズの継承とスケーリングを修正。

* 2. すべてのブラウザで、フォントの不規則なサイズを統一。

code,

kbd,

samp {

font-family: monospace, monospace; /* 1 */

font-size: 1em; /* 2 */

}

/**

* Add the correct font size in all browsers.

* すべてのブラウザで、フォントの正しいサイズを追加。

small {

font-size: 80%;

}

/**

* Prevent `sub` and `sup` elements from affecting the line height in

* all browsers.

* すべてのブラウザで、subとsup要素が行の高さに与える影響を阻止。

sub,

sup {

font-size: 75%;

line-height: 0;

position: relative;

vertical-align: baseline;

}

sub {

bottom: -0.25em;

}

sup {

top: -0.5em;

}

フォーム系の定義

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

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 * 1. すべてのブラウザで、フォントのスタイルを変更。
 * 2. FirefoxとSafariで、マージン（margin）を削除。
 */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 * EdgeとFirefoxで、テキストのトランスフォームの継承を削除。
 * 1. Firefoxで、テキストのトランスフォームの継承を削除。
 */

button,
select { /* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 * iOSとSafariで、クリック可能なタイプをスタイルできない問題を修正。
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 * Firefoxで、インナーボーダー（-moz-focus-inner）とパディング（padding）を削除。
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 * 前のルールで設定したフォーカスのスタイルを元に戻す。
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 * Firefoxで、パディング（padding）を修正。
 */

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 * すべてのブラウザで、fieldset要素をゼロにした際のパディング（padding）を削除。
 */

legend {
	padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome and Firefox.
 * Chrome, Firefoxで、vertical-alignの正しい値を追加。
 */

progress {
	vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 * Chromeで、増減ボタンのカーソルのスタイルを修正。
 */

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

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 * 1. Chrome, Safariで、不規則な外観を修正。
 * 2. Safariで、アウトラインのスタイルを修正。
 */

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 * macOSのChrome, Safariで、内側のパディングを削除。
 */

[type='search']::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 * 1. iOSとSafariで、クリック可能なタイプをスタイルできない問題を修正。
 * 2. Safariで、フォントのプロパティを「inherit」に変更。
 */

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

/* Forms

========================================================================== */

/**

* 1. Change the font styles in all browsers.

* 2. Remove the margin in Firefox and Safari.

* 1. すべてのブラウザで、フォントのスタイルを変更。

* 2. FirefoxとSafariで、マージン（margin）を削除。

button,

input,

optgroup,

select,

textarea {

font-family: inherit; /* 1 */

font-size: 100%; /* 1 */

line-height: 1.15; /* 1 */

margin: 0; /* 2 */

}

/**

* Remove the inheritance of text transform in Edge and Firefox.

* 1. Remove the inheritance of text transform in Firefox.

* EdgeとFirefoxで、テキストのトランスフォームの継承を削除。

* 1. Firefoxで、テキストのトランスフォームの継承を削除。

button,

select { /* 1 */

text-transform: none;

}

/**

* Correct the inability to style clickable types in iOS and Safari.

* iOSとSafariで、クリック可能なタイプをスタイルできない問題を修正。

button,

[type='button'],

[type='reset'],

[type='submit'] {

-webkit-appearance: button;

}

/**

* Remove the inner border and padding in Firefox.

* Firefoxで、インナーボーダー（-moz-focus-inner）とパディング（padding）を削除。

button::-moz-focus-inner,

[type='button']::-moz-focus-inner,

[type='reset']::-moz-focus-inner,

[type='submit']::-moz-focus-inner {

border-style: none;

padding: 0;

}

/**

* Restore the focus styles unset by the previous rule.

* 前のルールで設定したフォーカスのスタイルを元に戻す。

button:-moz-focusring,

[type='button']:-moz-focusring,

[type='reset']:-moz-focusring,

[type='submit']:-moz-focusring {

outline: 1px dotted ButtonText;

}

/**

* Correct the padding in Firefox.

* Firefoxで、パディング（padding）を修正。

fieldset {

padding: 0.35em 0.75em 0.625em;

}

/**

* Remove the padding so developers are not caught out when they zero out

* `fieldset` elements in all browsers.

* すべてのブラウザで、fieldset要素をゼロにした際のパディング（padding）を削除。

legend {

padding: 0;

}

/**

* Add the correct vertical alignment in Chrome and Firefox.

* Chrome, Firefoxで、vertical-alignの正しい値を追加。

progress {

vertical-align: baseline;

}

/**

* Correct the cursor style of increment and decrement buttons in Chrome.

* Chromeで、増減ボタンのカーソルのスタイルを修正。

[type='number']::-webkit-inner-spin-button,

[type='number']::-webkit-outer-spin-button {

height: auto;

}

/**

* 1. Correct the odd appearance in Chrome and Safari.

* 2. Correct the outline style in Safari.

* 1. Chrome, Safariで、不規則な外観を修正。

* 2. Safariで、アウトラインのスタイルを修正。

[type='search'] {

-webkit-appearance: textfield; /* 1 */

outline-offset: -2px; /* 2 */

}

/**

* Remove the inner padding in Chrome and Safari on macOS.

* macOSのChrome, Safariで、内側のパディングを削除。

[type='search']::-webkit-search-decoration {

-webkit-appearance: none;

}

/**

* 1. Correct the inability to style clickable types in iOS and Safari.

* 2. Change font properties to `inherit` in Safari.

* 1. iOSとSafariで、クリック可能なタイプをスタイルできない問題を修正。

* 2. Safariで、フォントのプロパティを「inherit」に変更。

::-webkit-file-upload-button {

-webkit-appearance: button; /* 1 */

font: inherit; /* 2 */

}

インタラクティブ系の定義

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 * Edge, Firefoxで、displayの正しいプロパティを追加。
 */

details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 * すべてのブラウザで、displayの正しいプロパティを追加。
 */

summary {
	display: list-item;
}

/* Interactive

========================================================================== */

* Add the correct display in Edge and Firefox.

* Edge, Firefoxで、displayの正しいプロパティを追加。

details {

display: block;

}

* Add the correct display in all browsers.

* すべてのブラウザで、displayの正しいプロパティを追加。

summary {

display: list-item;

}

modern-normalize.min.css

コメントや改行が削除された軽量版もリリースされています。

/**
 * Minified by jsDelivr using clean-css v4.1.9.
 * Original file: /npm/modern-normalize@0.4.0/modern-normalize.css
 * 
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */
html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15}body{margin:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}h1{font-size:2em;margin:.67em 0}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}
/*# sourceMappingURL=/sm/b8427ae79f001842dec31421d2331d1bf01b09f0794a6b49d15ae566d4d6b5b7.map */

/**

* Minified by jsDelivr using clean-css v4.1.9.

* Original file: /npm/modern-normalize@0.4.0/modern-normalize.css

* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files

/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */

html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15}body{margin:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}h1{font-size:2em;margin:.67em 0}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}

/*# sourceMappingURL=/sm/b8427ae79f001842dec31421d2331d1bf01b09f0794a6b49d15ae566d4d6b5b7.map */