CSSリセットとは何か知っていますが、最近、Normalize.cssと呼ばれるこの新しいものについて聞きました。
Normalize.cssとResetCSSの違いは何ですか？
CSSの正規化とCSSのリセットの違いは何ですか？
それはCSSリセットの新しい流行語ですか？
238081 次
10 に答える
842
私はnormalize.cssに取り組んでいます。
主な違いは次のとおりです。
Normalize.cssは、すべてを「スタイル解除」するのではなく、便利なデフォルトを保持します。たとえば、 normalize.cssを含めると（実際にはより堅牢になります）
sup、subreset.cssを含めると、通常のテキストと視覚的に区別できなくなります。したがって、normalize.cssは視覚的な開始点（均質性）をあなたに課しません。これは皆の好みではないかもしれません。最善の方法は、両方を試して、どちらのゲルが好みに合っているかを確認することです。Normalize.cssは、reset.cssの範囲外であるいくつかの一般的なバグを修正します。これはreset.cssよりも広い範囲を持ち、HTML5要素の表示設定、
fontフォーム要素による継承の欠如、font-sizeレンダリングの修正pre、IE9でのSVGオーバーフロー、buttoniOSでのスタイルのバグなどの一般的な問題のバグ修正も提供します。Normalize.cssは開発ツールを乱雑にしません。reset.cssを使用する際の一般的な苛立ちは、ブラウザーのCSSデバッグツールに表示される大きな継承チェーンです。これは、ターゲットのスタイリングのため、normalize.cssではそのような問題ではありません。
Normalize.cssはよりモジュール化されています。プロジェクトは比較的独立したセクションに分割されているため、Webサイトでセクションが必要になることがないことがわかっている場合は、セクション（フォームの正規化など）を簡単に削除できます。
Normalize.cssにはより良いドキュメントがあります。normalize.cssコードは、インラインで文書化されているだけでなく、GitHubWikiでより包括的に文書化されています。これは、コードの各行が何をしているのか、なぜ含まれているのか、ブラウザー間の違いを知ることができ、独自のテストをより簡単に実行できることを意味します。このプロジェクトは、ブラウザーがデフォルトで要素をレンダリングする方法について人々を教育し、改善の提出に彼らが関与しやすくすることを目的としています。
normalize.cssに関する記事で、これについて詳しく説明しました。
于 2011-12-02T14:13:47.610 に答える
277
主な違いは次のとおりです。
CSSリセットは、組み込みのブラウザスタイルをすべて削除することを目的としています。H1-6、p、strong、emなどの標準的な要素は、装飾がまったくなく、まったく同じように見えます。次に、すべての装飾を自分で追加することになっています。
Normalize CSSは、組み込みのブラウザースタイルをブラウザー間で一貫させることを目的としています。H1-6のような要素は、ブラウザ間で一貫した方法で太字で大きく表示されます。次に、デザインに必要な装飾の違いだけを追加することになっています。
デザインがa）タイポグラフィなどの一般的な規則に従い、b） Normalize.cssがターゲットオーディエンスに対して機能する場合、CSSリセットの代わりにNormalize.CSSを使用すると、独自のCSSをより小さく、より速く作成できます。
于 2011-08-01T10:06:28.017 に答える
51
Normalize.cssは主に、作成者が見栄えがよいと考えたものに基づいた一連のスタイルであり、ブラウザー間で一貫して見えるようにします。リセットは基本的に要素からスタイリングを取り除くので、すべてのスタイリングをより細かく制御できます。
私は両方を使用します。
リセットからのいくつかのスタイル、Normalize.cssからのいくつか。たとえば、Normalize.cssには、すべての入力要素が同じフォントを使用するようにするスタイルがあります。これは、（テキスト入力とテキスト領域の間で）発生しません。リセットにはそのようなスタイルがないため、入力には異なるフォントがありますが、これは通常は必要ありません。
したがって、基本的に、2つのCSSファイルを使用すると、すべてを「均等化」するのに適しています;）
よろしく！
于 2012-06-01T00:32:16.703 に答える
7
その説明から、リセットのようにすべてのデフォルトのスタイルを取り除くのではなく、すべてのブラウザでユーザーエージェントのデフォルトのスタイルを一貫させようとしているように見えます。
多くのCSSリセットとは異なり、便利なデフォルトを保持します。
于 2011-07-31T03:21:26.220 に答える
6
1reset.cssつ目は、使用できる最悪のライブラリです。これは、HTMLの標準構造を削除し、マージンパディングやその他の属性の値をに割り当てた後、記述したすべてのものをテキストとして表示するため0です。したがって、たとえば、はと<H1>同じになります<H6>。
一方Normalize.css、標準構造を使用し、そこに存在するほとんどすべてのエラーを修正します。たとえば、あるブラウザから別のブラウザにフォームを表示する際の問題を修正します。Normalizeは、この機能を変更してこれを修正し、要素がすべてのブラウザーで同じように表示されるようにします。
于 2016-07-23T11:59:32.420 に答える
5
特に複雑な非ボイラープレートタイプの設計プロジェクトでは、リセットはカスタム設計仕様を満たす必要があるようです。正規化は純粋にWebプログラミングを念頭に置いて進めるための良い方法のように聞こえますが、多くの場合、WebサイトはWebプログラミングとUI/UXデザインルールの融合です。
于 2014-01-07T17:13:11.993 に答える
2
この質問はすでに数回回答されています。2019年9月の時点で、それぞれの概要、例、洞察を簡単に説明します。
- Normalize.css-名前が示すように、ユーザーエージェントのブラウザーのスタイルを正規化します。つまり、デフォルトではわずかに異なるため、すべてのブラウザーで同じスタイルになります。
例：デフォルト<h1>で内部のタグ<section>Google Chromeは、タグの「予想される」サイズよりも小さくなります<h1>。一方、Microsoft Edgeは、「予想される」サイズの<h1>タグを作成しています。Normalize.cssはそれを一貫性のあるものにします。
現在のステータス：npmリポジトリは、normalize.cssパッケージが現在1週間に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パッケージは、週に約26kのダウンロードがあることを示しています。GitHubのスターは、プロジェクトのリポジトリから確認できるように、わずか200個です。
于 2019-09-03T14:22:17.773 に答える
1
場合によっては、両方を使用するのが最善の解決策です。時々、どちらも使用しないことです。そして時々、それはどちらか一方を使用することです。すべてのブラウザでマージンやパディングのリセットを含むすべてのスタイルが必要な場合は、reset.cssを使用してください。次に、すべての装飾とスタイリングを自分で適用します。組み込みのスタイリングが好きであるが、より多くのクロスブラウザーの同期性、つまり正規化が必要な場合は、normalize.cssを使用します。ただし、reset.cssとnormalize.cssの両方を使用する場合は、最初にreset.cssスタイルシートをリンクし、次にnormalize.cssスタイルシートを（すぐに）リンクします。どちらが優れているかが常に問題になるとは限りませんが、どちらを使用するか、両方を使用するか、どちらも使用しないかが問題になる場合があります。私見では。
于 2017-09-22T20:18:40.570 に答える
1
Normalize.css
Normalize.cssは、HTML要素のデフォルトのスタイルでブラウザー間の一貫性を提供する小さなCSSファイルです。
つまり、ブラウザによって適用されるスタイルのW3C標準を見ると、いずれかのブラウザに不整合がある場合、normalize.cssスタイルによって、違いのあるブラウザスタイルが修正されます。
ただし、通常はIEまたはEDGEが原因で、障害のあるブラウザーを標準に従って修正できない場合があります。このような場合、Normalizeの修正により、IEまたはEDGEスタイルが残りのブラウザーに適用されます。
実例
Chrome、Safari、Firefoxは、// /タグ内<h1>にあるタグを、独立したタグよりも小さいフォントサイズで、マージンサイズが異なる形でレンダリングします。これらは、/ //内のタグの場合のChrome、Safari、Firefoxのユーザーエージェントスタイルです。<article><aside><nav><section><h1><article><aside><nav><section>
鬼ごっこ
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
}
例：
/*
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;}
CSSをリセット
CSSのリセットは別のアプローチを取り、ブラウザのデフォルトのスタイルはまったく必要ないと言っています。必要なスタイルが何であれ、必要に応じてプロジェクトで定義します。したがって、「CSSリセット」は、ブラウザのユーザーエージェントに付属するすべてのスタイルをリセットします。
このアプローチは、上記の例でうまく機能し、デフォルトのスタイル<h1>を使用し<h6>ます。ほとんどの場合、ブラウザーのデフォルトfont-sizeもブラウザーのデフォルトも必要ありませんmargin。
これは、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リセットの方法では、すべてのHTMLタグを、パディング、マージン、境界線、同じフォントサイズ、同じ配置を持たないように定義します。
CSSリセットの問題は、見苦しいことです。セレクターのチェーンが大きく、不要なオーバーライドが多数発生します。さらに悪いことに、デバッグ時に読み取り不能になります。
ただし、、、などのよう<h1>にリセットすることを好むスタイルはまだあります。<h6><ul><li>
于 2021-05-25T09:15:50.623 に答える
0
Normalize.css：すべてのブラウザにはデフォルトのcssスタイルが付属しており、たとえば、段落やタイトルの周りにパディングを追加します。normalizeスタイルシートを追加すると、これらのブラウザのデフォルトルールがすべてリセットされるため、このインスタンスではタグに0pxのパディングが適用されます。詳細については、いくつかのリンクを参照してください：https ://necolas.github.io/normalize.css/ http://nicolasgallagher.com/about-normalize-css/
于 2020-08-10T21:57:54.957 に答える