リセットと正規化について教えてください、どちらを使用するのが良いですか？
ドライバーとハンマーのようなものです-どちらが良いですか？ すべてが良いです。
HTMLはタグをスキップしたので良いです。それだけです-それらはすぐに見えます。 そして、すべてのブラウザーで、すべてがほぼ同じです：黒のTimes over white <body>
、および青のリンク。 ああ、美人！ しかし、問題は事実です。すべての要素の正確なスタイルは、 現在HTML5で推奨されていますが 、ブラウザごとに異なります。
HTML 4には、 head { display: none }
やtext-decoration: underline
linkのtext-decoration: underline
など、78個のデフォルトスタイルシートしかありhead { display: none }
。 WebKit、Chrome、Firefoxには現在、約1000行のスタイルがあり、考古学的な探検を安全に装備できます。 しかし、私たちはしません、私たちにはやることが十分にあります。
開発者は長い間、このスタイルのおおよその対応に干渉することはありませんでした。さらに、ブラウザーはときどきスタイルの改善と統合を試みました。 問題は異なっていました。これらすべてのインデント、フレーム、下線は常に設計上ではなく、要素ごとに何度もキャンセルする必要があります。 しかし、誰かがスタイルの最初のリセットである消しゴムを思いつきました。
* { margin: 0; padding: 0; border: 0; joffrey: kill; cersei: kill; frey: kill; }
アスタリスクはすべての要素を選択してから開始します： margin: 0
、 padding: 0
、 border: 0
、
、
、
およびその他の生活を妨げるすべてのプロパティ。 この方法は非常に野barです：リセットする必要のない要素を選択するだけでなく、一部のスタイルに触れないほうがよいため、そうでない場合はすべてがばらばらになります-たとえば、フォーム要素。
/* ORLY? */ div, span { margin: 0; padding: 0; border: 0; }
HTMLをキューブの無菌セットにしようとする次の試みは、 Yahoo UIからのCSSリセットでした。これは、必要な場合にのみスタイルをリセットします。 Yahoo UIに基づくEric Meyer Reset CSSは 、さらに人気を集めました。 これらのリセットは、インデントをリセットするだけでなく、フォントサイズとフォントファミリ、テキストの配置、およびその他のプロパティに共通の値をもたらします。
/* YUI Reset */ html { color: #000; background: #FFF; } select { *font-size:100%; }
YahooとMeyerのリセットには違いがありました。たとえば、Ericは賢明にもフォームの要素に触れませんでした。 他にも多くの解決策がありましたが、それらはすべて単一のタスクを解決しました-デフォルトで複雑なスタイルから単純なコンストラクターを作成し、組み込みのものをリセットせずにすぐにスタイルを書くことができました。
これらのリセットは決してブラウザスタイルの純粋なダンプではありませんでした。いいえ、いいえ、はい、色が割り当てられ、整列され、ブラウザ間の互換性の戦いが始まりました。 その結果、すべてのプロジェクトに特定の著者の好みの印が付けられました。 MeyerのReset CSSは依然として最も中立的なリセットですが、彼でも有害な:focus { outline: 0 }
を削除し、正しく実行しました。
/* */ :focus { outline: 0; } /* */
多くのリセットが悩まされました：コンテンツを含む内部ブロックでは、リストだけでなく、 <strong>
、 <em>
、などの基本的なテキスト要素のスタイルも復元する必要がありました。 Yahooには、適切なベーススタイルを割り当てるCSSベースさえありました。 リセット後、間違ったものをキャンセルしました。 なぜだ。
Nicholas GallagherとJonathan Nealは逆になりました。同じブラウザのデフォルトをリセットする代わりに、すべての違いと問題を徹底的に調査し、 Normalize.cssを作成しました。 彼はどこでも同じことをし、途中で多くの問題を解決します。
ノーマライズでは、リストからインデントを削除する必要があります。 これにより、多くの人々はより単純な要素を使用するようになりますが、注意してください-これは、占いに満ちています。 ただし、Normalizeは、フォーム要素の設計の複雑さ、モバイルブラウザの動作、および多くの小さなバグを引き受けます。
ほら 完全に異なるタスクがプロジェクトによって解決されます。 先日、Normalize.css後にReset CSSをオンにして正規化を終了するが、同時にニュートラルコンストラクターを取得するサイトを見ました。 これはもちろん、グローバルなスタイルの膨張につながる愚かなことです。 ハイブリッドを構築することをお勧めします-何もありません。
@import "normalize.css"; @import "reset.css"; @import "yui-reset.css"; @import "yui-base.css"; @import "h5bp.css";
Normalize.cssの利点は詳細に文書化されています。各プロパティには、それが必要な理由の説明があります。 正規化はされていないが、より適切な（著者による）デフォルトを割り当てる疑わしい場所-メモがあります。 これは、プロジェクト間で盲目的にコピーするだけでなく、必要な部分のみを使用するのに役立ちます。
プロジェクトのフレームワーク内でモジュールを作成し、別のサイトで使用することを想像してください。 ノーマライズはありますか？ またはその逆：サードパーティのモジュールがプロジェクトに付属します。ノーマライズはなく、すべてがブラウザのバグ、ウェル、または機能に合わせて調整されます。 または、ノーマライズすることもできますが、バージョンは異なります。 まあまあのモジュール性が得られます。
しかし、すぐにNormalizeに移動して、困難な状況ごとに必要な部分をコピーした場合、モジュールは独立した素晴らしいものになります。 ノーマライズは、ブラウザ間の複雑さの最も完全な百科事典でもあり、はい、簡単な複製を引き起こしますが、繰り返しのフラグメントの圧縮はgzipのパンとバターであるにもかかわらず、柔軟性を与えます。
Reset CSSは2011年以降更新されていませんが、それでも優れた機能を発揮します。 しかし、その時代はすでに過ぎ去りました-設定されていない値を持つ新しいすべてのプロパティは 、それを置き換えるために急いでいます。 必要に応じてブラウザのデフォルトをリセットします-MDNで読み取ります。 Normalize.cssは現在流行しており、 クロスブラウザの問題を解決していますが、参照として使用してみてください。 だからリセットまたは正規化？ タスクからダンス。
/* Welcome to the */ .future { all: initial; all: inherit; all: unset; }