リセットするか、リセットしないか - それは＆＃x27; s cssの質問です-jsチュートリアル-php.cn

To Reset or Not Reset -- That's the CSS Question

キーポイント

CSSリセットは、ほとんどのスタイル（フォント、ラインの高さ、マージン、充填、境界など）を削除することにより、さまざまなブラウザの一貫したスタイルの出発点を提供します。ただし、ページサイズも増加し、すべての要素をリセットする必要があり、ファイルサイズがさらに増加します。
CSSリセットはブラウザの互換性の問題を最小限に抑えますが、さまざまなデバイスのバグと脆弱性を解決する必要があるため、ブラウザテストの必要性を排除しません。また、さまざまなブラウザがページを異なる場合にレンダリングするため、すべてのデバイスでのピクセルの完全なレンダリングを保証するものではありません。
CSSリセットを使用する決定は、開発習慣としてではなく、特定のプロジェクトの実用性に基づいている必要があります。開発者は、CSSリセットが本当に有益であるかどうか、または不必要な作業を引き起こすかどうかを評価する必要があります。実験として、開発者はウェブサイトからリセットスタイルを削除して、大きな違いがあるかどうかを確認しようとします。

各Webブラウザは、基本的なスタイルシートを使用します。カスタムCSSを提供しない場合、HTMLが合理的にレンダリングされることを保証します。どのような状況を知っていますか：Visibibleリンクは青、アクセスリンクは紫で、太字のラベルは大胆で、H1タイトルテキストは大きいなどです。残念ながら、メーカーは私たちの生活を複雑にしたいと思っており、各ブラウザは別の基本スタイルを使用しています。では、特定のデバイスに実装されているデフォルトのスタイルによってカスタムCSSが影響を受けないことをどのように確認しますか？答えはCSSリセットです。ほとんどのスタイルを削除して、要素が異なるブラウザーで一貫してレンダリングされるようにします。通常、すべてのフォントとラインの高さは100％に復元され、マージンとパディングは0pxに設定され、境界線が削除され、順序付け/順序付けられていないリストが様式になります。 Eric MeyerのCSSリセットは最も早いものの1つであり、最も有名で最も一般的に使用されています。 HTML5のHTML5 StyleSheetをリセットするHTML5 Doctorは、新しい要素のスタイルも支援することができます。他にもいくつかあります。CSSReset.comには多くのオプションとドキュメントがあります。 CSSを使用してリセットしていますか？使用する必要がありますか？

30のサイトのランダムコレクションを見ましたが、そのほとんどはCSSリセットを使用しました。利点は明らかです。1。それらは、（ほぼ）適用されるすべてのスタイルを提供します。 2。開発はより論理的になる可能性があります。スタイルを削除したり変更したりするのではなく、スタイルを追加しています。 3.ブラウザの互換性の問題を最小限に抑えることができます。

これらの利点にもかかわらず、CSSリセットは使用しません。実際、これは正確ではありません - デフォルト値がめったに有用ではないため、基本的なマージンとパディングリセットを使用します。

{パディング：0;
```
<code></code>
```
ログイン後にコピー

これはすべてのタグに影響し、一部の開発者は、これが混乱やCSS処理の遅いことにつながる可能性があることを伝えます。私はそれが問題になるこの状況を持っていませんでした。 CSSリセットに関する私の主な問題は、余分なページサイズのほとんどのCSSリセットが約2kbのコード（非圧縮）を追加することです。これはあまり聞こえないかもしれませんが、CSSファイルのほとんどが10kbを超えることはめったにない場合、大きなオーバーヘッドです。追加の努力CSSリセットには、すべての要素を停止する必要があります。これにより、ファイルサイズがさらに増加します。時々、ブラウザのデフォルト設定に満足しています。フォントの重量、ラインの高さ、リンクアウトライン、弾丸ドット、およびその他のスタイルは通常良いです。そうでない場合は、それに応じて変更します。さまざまなブラウザが異なる方法でページをレンダリングします2つのブラウザは同じではありませんが、一部の人々はすべてのデバイスでPixelに最適なレンダリングを期待しています。 CSSリセットは通常、そのような目標が達成可能であるという印象を与えます。そうではありません。個人的には、FirefoxのタイトルがIEより2ピクセル大きいことを気にしません。または、Operaの「Bold」に対する理解は、Chromeよりもわずかに重いです。 CSSリセットは、これらの問題を決して解決しません。ブラウザテストの必要性を削除しません。CSSリセットがブラウザの一貫性に役立つとは思わない。コードやブラウザによって引き起こされるエラーや脆弱性を解決できるように、できるだけ多くのデバイスでウェブサイトまたはアプリケーションをテストする必要があります。彼らは私のワークフローに合わない私はCSSフレームワークが好きではありません。一般的なCSSメソッドが構築されているWebサイトで機能する状況に遭遇することはめったにありません。他の場所からコードスニペットをコピーするかもしれませんが、全体的には空のファイルから始めることを好みます。それはまだ私のコードであり、エラーが発生したときにどこに行くべきかを知っています。複雑ではありませんが、CSSリセットは、予期しない結果を生成できるフレームワークです。 CSSリセットが開発時間を節約した場合は時間を節約しませんか？私が怒っているCSSリセットファンの束に攻撃されるまで、私はあなたが決してそれらを使うべきではないと言っているのではありません。彼らはあなたのために働くかもしれません、それは素晴らしいことです。彼らはまた、Web開発の新しい人にも役立つと思います。しかし、CSSリセットを追加していますか？テストとして、ウェブサイトからリセットスタイルを削除して、大きな違いがあるかどうかを確認してください。 CSSを使用してリセットしていますか？最近、この慣行を採用または放棄しましたか？彼らは役に立ちますか？ CSSリセットに関するFAQ（FAQ）

CSSリセットの主な目的は何ですか？

CSSリセットは、デフォルトのラインの高さ、マージン、およびタイトルフォントサイズのブラウザの不一致を減らす方法です。 CSSリセットの背後にある全体的な理由は、開発者がクリーンなバックプレーンから始めて、予期しないブラウザの矛盾を使用してWebサイトまたはWebアプリケーションをスタイリングできることです。基本的に、すべてのブラウザにすべてのスタイルをNULLにリセットするように強制し、ブラウザ固有のデフォルトを回避します。

CSSリセットは今日でも関連していますか？

はい、CSSリセットは今日でも関連性があります。最新のブラウザはデフォルトのスタイルの観点からより一貫性がありますが、特により複雑なDesainを扱う場合、違いが発生する場合があります。 CSSリセットは、さまざまなブラウザーでデザインが可能な限り似ているようにするのに役立ちます。

CSSリセットを実装する方法は？

CSSリセットの実装は非常に簡単です。 CSSファイルの上部にCSSリセットスタイルを含めるだけです。これにより、カスタムスタイルが適用される前にリセットスタイルが適用されます。 MeyerのリセットCSSやremormize.cssなど、いくつかの一般的なCSSリセットが利用可能です。これをコピーしてCSSファイルに貼り付けることができます。

CSSリセットとremormize.cssの違いは何ですか？

CSSリセットは、すべてのHTML要素のスタイルを「ゼロ」またはnullに設定することにより、ブラウザの不一致を減らすように設計されています。一方、remormize.cssは、CSSリセットに代わる最新のHTML5対応の代替品です。すべてを「スタイリング」するのではなく、一連の合理的なデフォルトを作成します。また、従来のリセット範囲以外のいくつかの一般的なエラーを修正します。

CSSリセットは私のウェブサイトのパフォーマンスに影響しますか？

CSSリセットは、CSSファイルのサイズをわずかに増加させる可能性があり、Webサイトのパフォーマンスに影響を与える可能性があります。ただし、影響はしばしば小さく、クロスブラウザーの一貫性の向上など、CSSリセットを使用することの利点によって相殺されることがよくあります。

各プロジェクトにCSSリセットを使用する必要がありますか？

各プロジェクトにCSSリセットを使用することは厳密には必要ありません。ただし、ブラウザのデフォルトによって引き起こされる予期しないスタイリングの問題を回避するのに役立つため、通常、特に大規模プロジェクトで使用することが最善です。

自分のニーズに合わせてCSSリセットをカスタマイズできますか？

はい、もちろん、ニーズに合わせてCSSリセットをカスタマイズできます。実際、プロジェクトのニーズに合わせてリセットスタイルを調整することは一般的な慣行です。たとえば、一部の要素のリセットスタイルを変更するか、他のスタイルを追加して、覆われていない要素をリセットすることをお勧めします。

CSSリセットを使用する代替品は何ですか？

CSSリセットの使用に加えて、ブラウザの矛盾を処理する他の方法があります。一般的な代替案は、remormize.cssなどのCSS標準主義者を使用することです。別のアプローチは、通常、独自のバージョンのCSSリセットまたは仕様を含むBootstrapやFoundationなどのCSSフレームワークを使用することです。