web-dev-qa-db-ja.com

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

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

Normalize.cssReset CSS の違いは何ですか?

CSSの正規化とCSSの再設定の違いは何ですか?

それはCSSリセットのための単なる新しい話題の言葉ですか?

529
Jitendra Vyas

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

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

  1. Normalize.cssは、すべてを「スタイル解除」するのではなく、便利なデフォルトを保持します。 例えば、supsubのような要素は、normalize.cssをインクルードした後は「正しく」(実際にはより堅牢に)なりますが、reset.cssをインクルードした後は通常のテキストと見分けがつきません。そのため、normalize.cssは視覚的な開始点(均質性)をユーザーに課しません。これは皆の好みには合っていないかもしれません。行うための最善のことは両方を試してみて、あなたの好みに合ったゲルを見ることです。

  2. Normalize.cssはreset.cssの範囲外の一般的なバグを修正します。 reset.cssよりも広い範囲を持ち、HTML5要素の表示設定、フォーム要素によるfont継承の欠如、prefont-sizeレンダリングの修正、IE9でのSVGオーバーフローなどの一般的な問題に対するバグ修正も提供します。 iOSのbuttonスタイリングのバグ。

  3. Normalize.cssは開発ツールを乱雑にしません。 reset.cssを使用する際の一般的なイライラは、ブラウザのCSSデバッグツールに表示される大きな継承チェーンです。ターゲットを絞ったスタイルのため、これはnormalize.cssの問題ではありません。

  4. Normalize.cssはよりモジュール化されています。 プロジェクトは比較的独立したセクションに分割されているため、Webフォームで不要になることがないとわかっている場合は、セクションの削除(フォームの正規化など)を簡単に行うことができます。

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

私はこれについてもっと詳しく about normalize.css に書いています。

766
necolas

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

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

  • CSSの正規化 は組み込みブラウザのスタイルをブラウザ間で一貫性のあるにすることを目的としています。 H1〜6のような要素は、ブラウザ間で一貫した方法で、大胆で大きいものなどに見えます。あなたはそれからあなたのデザインが必要とする装飾にdifferenceだけを追加することになっています。

あなたのデザインa)がタイポグラフィなどの一般的な慣習に従っていて、b) Normalize.cssがターゲットオーディエンスに対して機能する場合は、CSSリセットの代わりにNormalize.CSSを使用する書くのが速いです。

241

Normalize.cssは、主にその作者の考えを基にしたスタイルのセットで、ブラウザ間で一貫性を保っています。リセットは基本的に要素からスタイル設定を取り除き、すべてのスタイル設定をより細かく制御できるようにします。

私は両方を使います。

resetからのスタイル、Normalize.cssからのスタイル。たとえば、Normalize.cssから、すべての入力要素が同じフォントを持つようにするスタイルがあります。これは(テキスト入力とテキストエリアの間では)起こりません。リセットにはそのようなスタイルはないので、入力は異なるフォントを持ちます。

そのため、基本的には、2つのCSSファイルを使用する方が、すべてを「均等化」するのに適しています。

よろしく!

37
ricmetalster

特に複雑で定型的でないタイプのデザインプロジェクトでは、カスタムデザインの仕様を満たすことがリセットの必要性のように思われます。正規化は純粋にWebプログラミングを念頭に置いて進めるための良い方法であるように思えますが、WebサイトはWebプログラミングとUI/UXデザインルールの間の結婚であることがよくあります。

5
user3170099

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

便利なデフォルト設定を保持します。 多くのCSSリセットとは異なります。

5
dbb

最初のreset.cssは、HTMLの標準構造を削除し、マージンパディングや他の属性の値を0に代入した後に、テキストとしてそのまま表示するので、使用できる最悪のライブラリです。そのため、たとえば、<H1><H6>と同じになります。

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

5
Nader Elsayed

時には、最善の解決策は両方を使用することです。時々、それはどちらも使わないことです。そして時々、それはどちらかを使うことです。マージンやパディングを含むすべてのスタイルをすべてのブラウザでリセットしたい場合は、reset.cssを使用してください。それからあなた自身ですべての装飾とスタイルを適用してください。単にビルトインスタイルが好きだが、もっとブラウザ間の同期性、つまり正規化が必要な場合は、normalize.cssを使用してください。ただし、reset.cssとnormalize.cssの両方を使用することを選択した場合は、最初にreset.cssスタイルシートをリンクし、次に(すぐに)normalize.cssスタイルシートをリンクします。どちらが良いのかということが必ずしも問題ではない場合もありますが、どちらを使用するのか、両方を使用するのか、どちらを使用しないのか。私見では。

0