[CSS]Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意

サイト構築 -CSS

Post on:2017年3月30日

Normalize.cssの特徴

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

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

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

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

各ブラウザごとの異なるスタイルやバグを修正します。
ユーザビリティの改善

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

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

Normalize.css v6.0.0の対応ブラウザは下記の通りです。

Chrome
Firefox
Opera
Internet Explorer 8+
Safari 6+

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

Normalize.css v6.0.0のアップデート内容

「opinionated」のルールは、すべて削除。
ドキュメントの見出しコメントを修正。
abbr[title]のサポートを更新(Chrome 57+)。

v5.0.0からの変更箇所

v5.0.0で「opinionated」として記述されていたスタイルは、すべて削除されました。
追加されたスタイルはありません。

html {
  font-family: sans-serif;
}

body {
  margin: 0;
}

a:active,
a:hover {
  outline-width: 0;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
}

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

html {

font-family: sans-serif;

}

body {

margin: 0;

}

a:active,

a:hover {

outline-width: 0;

}

button,

input,

optgroup,

select,

textarea {

font-family: sans-serif;

font-size: 100%;

line-height: 1.15;

}

fieldset {

border: 1px solid #c0c0c0;

margin: 0 2px;

padding: 0.35em 0.625em 0.75em;

}

「button, input, optgroup, select, textarea」のスタイルは、「margin: 0;」だけ残っています。
「abbr[title]」についてはスタイルの変更はありません。下線を取り除くスタイルのサポートブラウザがFirefox39+から、Chrome 57も加わりました。