簡単な話だcss:CSS resetsに代わるスキーム

簡単な話だcss:CSS resetsに代わるスキーム

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. —— [ normalize.css ]

前言

異なるブラウザができるだけ同じ表示効果を持つことを保証するために、開発フロントエンドの各開発者はresetsというスタイルを使用してブラウザのデフォルトスタイルをリセットします.しかし、通常、resetsはブラウザのデフォルトスタイルの変更が非常に多く、通常のul、liラベルなどのデフォルトスタイルの特殊な効果をほとんどカバーしているため、ブラウザのデフォルト効果を維持しながら、多くの閲覧器の効果と互換性を保つためにNormalizeがある.cssの誕生.

使用

Github

npm使用取付:npm install --save normalize.css

引用css:require("normalize.css")

とくせい

1.デフォルトのブラウザスタイルを保持
Normalize.cssは、再定義する必要がなく、多くのブラウザで役立つデフォルトスタイルを保持します.Normalize.cssは、異なるブラウザスタイルを一致させることを目的としています.
2.一般的なバグを修正
Normalize.cssは、HTML 5に表示される要素、事前定義されたフォーマットのフォントサイズ、IE 9のSVGオーバーフローなど、一般的なPCとモバイル端末のスタイルBugを解決します.
3.デバッグの手間がかからない
Resetsでは継承チェーンが大量に使用され、デバッグ時の要素が非常に混乱します.そしてnormalize.cssは、複数のセレクタを非常に慎重に使用します.
4.モジュール化されたスタイル
normalizeが見えます.cssの各スタイルの変更は独立した要素セレクタであり、Webサイトに必要なスタイルの内容を迅速に変更するのに役立ちます.

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

5.非常に詳細な文書を持っている
この点は多くの人にとって非常に役立ち、デフォルトのスタイルが変更された詳細をドキュメントを読むことで知ることができます.
多くのフレームワーク、ウェブサイトでnormalizeが使用され始めました.cssは、Twitter Bootstrapなどのデフォルトのスタイルを定義します.だから、normalizeも使ったほうがいい.cssはプロジェクトを開発し、追加のBufferがあるかもしれないと言った.