1. ホーム
  2. css

[解決済み] Normalize.cssとReset CSSの違いは何ですか?

2022-03-16 12:35:14

質問

CSS Resetは知っていますが、最近、Normalize.cssというのがあることを知りました。

とはどのような違いがあるのでしょうか? Normalize.css CSSのリセット ?

CSSの正規化とCSSのリセットの違いは何ですか?

CSSリセットの新しいバズワードに過ぎない?

解決するには?

normalize.cssで作業しています。

主な違いは以下の通りです。

  1. Normalize.cssは、すべてをスタイル解除するのではなく、有用なデフォルトを維持します。 例えば、以下のような要素です。 sup または sub reset.cssを含むと視覚的に通常のテキストと区別がつかなくなるのに対し、normalize.cssを含むとちょうど動く(そして実際より堅牢になる)。だから、normalize.cssはあなたに視覚的な出発点(均質性)を強制するものではありません。これは、すべての人の好みに合うとは限りません。行うための最善のことは、両方で実験し、あなたの好みに合わせてゲルを参照してくださいです。

  2. Normalize.cssは、reset.cssの範囲外であるいくつかの一般的なバグを修正します。 reset.cssよりも範囲が広く、以下のような一般的な問題のバグフィックスも提供します:HTML5要素の表示設定。 font の修正、フォーム要素による継承 font-size に対するレンダリング pre や、IE9でのSVGオーバーフロー、そして button iOSのスタイリングバグ

  3. Normalize.cssは、あなたの開発ツールを乱雑にすることはありません。 reset.cssを使用する際によくあるイライラが、ブラウザのCSSデバッグツールで表示される大きな継承の連鎖です。これは、ターゲットとなるスタイリングのため、normalize.cssでそのような問題ではありません。

  4. Normalize.cssはよりモジュール化されています。 このプロジェクトは、比較的独立したセクションに分割されており、あなたのウェブサイトで決して必要とされないことが分かっている場合、セクション(フォームの正規化など)を削除することが容易にできます。

  5. Normalize.cssはより良いドキュメントを持っています。 normalize.css のコードはインラインでドキュメント化されており、さらに包括的なドキュメントとして GitHub Wiki . つまり、各コードが何をしているのか、なぜそれが含まれているのか、ブラウザ間でどのような違いがあるのかを知ることができ、より簡単に独自のテストを行うことができるのです。このプロジェクトは、ブラウザがデフォルトで要素をどのようにレンダリングするかについて人々を教育し、人々が改善の提案に参加しやすくすることを目的としています。

これについては、以下の記事で詳しく紹介しています。 normalize.cssについて