CSS
ブラウザスタイルを正規化する
サーチ…
前書き
備考
Meyer's Resetは効果的ですが、ほぼすべての共通要素に同じ変更を行います。これには、繰り返し適用されるスタイルが同じWebブラウザのインスペクタウィンドウが繰り返し表示され、ブラウザに多くの作業が追加されます（さらに多くの要素に適用されるルールが増えます）。一方、ノーマライズ技術は、はるかに焦点が絞られており、幅広いブラシ技法はほとんどありません。これにより、ブラウザの作業が簡素化され、ブラウザ検査ツールの混乱が少なくなります。
normalize.css
ブラウザには、要素の描画に使用するデフォルトのCSSスタイルがあります。これらのスタイルの中には、ブラウザの設定を使用して、デフォルトのフォント面やサイズの定義を変更するなど、カスタマイズすることもできます。スタイルには、ブロックレベルまたはインラインであると想定される要素の定義が含まれます。
これらのデフォルトスタイルには言語仕様によって余裕があるため、またブラウザが仕様に正しく従わないためブラウザごとに異なる可能性があるためです。
これはnormalize.cssが機能するところです。これは最も一般的な不一致を無効にし、既知のバグを修正します。
それは何をするためのものか
- 多くのCSSリセットとは異なり、有用なデフォルトを保持します。
- 幅広い要素のスタイルを標準化します。
- バグや一般的なブラウザの矛盾を修正します。
- 微妙な変更で使い勝手を向上させます。
- 詳細なコメントを使用してコードが何をしているかを説明します。
したがって、プロジェクトにnormalize.cssを含めると、デザインがより似ていて、異なるブラウザ間で一貫して見えます。
reset.cssとの違い
あなたはreset.cssについて聞いたことがありreset.css 。両者の違いは何ですか？
normalize.cssは異なるプロパティを統一されたデフォルトに設定することによって一貫性を提供しますが、reset.cssはブラウザが適用できるすべての基本的なスタイルを削除することで一貫性を実現します。これは最初は良いアイデアのように聞こえるかもしれませんが、実際にはすべてのルールを自分で作成しなければならないということです。
アプローチと例
CSSのリセットはブラウザのデフォルトに対する別のアプローチをとります。 Eric MeyerのReset CSSはしばらくありました。彼のアプローチは、すぐに問題を引き起こすことが知られている多くのブラウザ要素を無効にします。以下は、彼のバージョン（v2.0 | 20110126）からのCSSリセットです。
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を他のもので正規化し、これらの多くを個別に処理します。以下は、コードのバージョン（v4.2.0）のサンプルです。
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* 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;
}
