Normalize.cssとReset CSSの違いは何ですか？

CSSリセットとは何か知っていますが、最近、Normalize.cssと呼ばれるこの新しいものについて聞きました

Normalize.cssとReset CSSの違いは何ですか？

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

CSSリセットの新しい流行語ですか？

normalize.cssに取り組んでいます。

主な違いは次のとおりです。

1. Normalize.cssは、すべてを「スタイル解除」するのではなく、有用なデフォルトを保持します。たとえば、normalize.cssをインクルードした後の「動作する」supなどの要素sub（実際にはより堅牢になります）に対して、reset.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はよりモジュール化されています。プロジェクトは比較的独立したセクションに分割されているので、Webサイトでセクションが不要になることがわかっている場合は、フォームの正規化などのセクションを簡単に削除できます。

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

これについては、normalize.cssに関する記事で詳しく説明しています

主な違いは次のとおりです。

• CSSのリセットは、すべての組み込みのブラウザースタイルを削除することを目的としています。H1-6、p、strong、emなどの標準要素は、まったく同じように見え、装飾がまったくありません。次に、すべての装飾を自分で追加する必要があります。

• CSSの正規化は、組み込みブラウザーのスタイル設定をブラウザー間で一貫させることを目的としています。H1-6のような要素は、ブラウザ全体で一貫した方法で太字で大きく表示されます。次に、デザインに必要な装飾の違いのみを追加します。

デザインがa）タイポグラフィなどの一般的な規則に従っている場合、およびb） Normalize.cssがターゲットユーザーに対して機能する場合、CSSリセットの代わりにNormalize.CSSを使用すると、CSSが小さくなり、書き込みが速くなります。

Normalize.cssは主に一連のスタイルであり、作成者が見栄えをよくするものに基づいており、ブラウザー間で一貫した外観にしています。リセットは基本的に要素からスタイリングを取り除き、すべてのスタイリングをより細かく制御できます。

両方使っています。

一部のスタイルはResetから、一部はNormalize.cssから。たとえば、Normalize.cssからは、すべての入力要素が同じフォントを持っていることを確認するためのスタイルがありますが、これは発生しません（テキスト入力とテキストエリアの間）。リセットにはそのようなスタイルがないため、入力には異なるフォントが使用されますが、これは通常は必要ありません。

したがって、基本的には、2つのCSSファイルを使用すると、すべてをより適切に「均等化」できます;）

よろしく！

1つ目reset.cssは、使用できる最悪のライブラリです。これは、HTMLの標準構造を削除し、マージンパディングやその他の属性の値をに割り当てた後、記述したすべてをテキストとして表示するため0です。したがって、たとえば<H1>、と同じであることがわかります<H6>。

一方Normalize.css、標準構造を使用し、そこに存在するほとんどすべてのエラーも修正します。たとえば、ブラウザ間でフォームを表示する際の問題を修正します。正規化は、この機能を変更することによってこれを修正し、要素がすべてのブラウザーで同じように表示されるようにします。

その説明から、リセットのようにすべてのデフォルトのスタイルを削除するのではなく、ユーザーエージェントのデフォルトのスタイルをすべてのブラウザーで一貫させるように試みているようです。

多くのCSSリセットとは異なり、有用なデフォルトを保持します。

特に複雑な非定型型の設計プロジェクトでは、カスタム設計仕様を満たすためにリセットする必要があるようです。正規化は純粋にWebプログラミングを進めるための良い方法であるかのように聞こえますが、多くの場合、WebサイトはWebプログラミングとUI / UXデザインルールの融合です。

場合によっては、両方を使用するのが最善の解決策です。どちらも使用しないこともあります。そして時々、それはどちらか一方を使用することです。すべてのブラウザーでマージンとパディングを含むすべてのスタイルをリセットする場合は、reset.cssを使用します。次に、すべての装飾とスタイリングを自分で適用します。組み込みのスタイリングが好きなだけで、ブラウザ間の同期性、つまり正規化が必要な場合は、normalize.cssを使用します。ただし、reset.cssとnormalize.cssの両方を使用する場合は、最初にreset.cssスタイルシートをリンクし、次に（すぐに）normalize.cssスタイルシートをリンクします。どちらが良いかは常に問題になるとは限りませんが、どちらを使用するか、どちらを使用するか、どちらを使用しないかを判断する必要があります。私見では。

この質問にはすでに何度か回答がありました。2019年9月の時点で、それぞれについて簡単に要約し、例と洞察を示します。

• Normalize.css-名前が示すように、ユーザーエージェントのブラウザーのスタイルを正規化します。つまり、デフォルトでは少し異なるため、すべてのブラウザーでスタイルを同じにします。

例：デフォルトでGoogle Chrome <h1>内のタグ<section>は、「予想される」<h1>タグのサイズよりも小さくなります。一方、Microsoft Edgeは、「予想される」サイズの<h1>タグを作成しています。Normalize.cssはそれを一貫させます。

現在の状態：npmリポジトリは、normalize.cssパッケージの現在のダウンロード数が現在週50万回を超えていることを示しています。リポジトリのプロジェクトの GitHubスターは36k以上です。

• CSSをリセット -名前が示すように、すべてのスタイルをリセットします。つまり、すべてのブラウザーのユーザーエージェントスタイルを削除します。

例：以下のようになります。

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

現在のステータス：Normalize.cssよりもはるかに人気が低く、reset-cssパッケージは、1週間あたり約2万6千のダウンロードであることを示しています。GitHubスターはプロジェクトのリポジトリからわかるように、わずか200 です。