重複の可能性:
最高のcssリセット
CSSリセットを実装するための最良の方法は何ですか?私の質問は、クロスブラウザー、クロスプラットフォームに準拠するレイアウトの実装に関連しています。たとえば、レイアウトは、Firefoxなどのデスクトップブラウザでも、iPadでも、ある程度はiPhoneでも同じように見えるはずです。
これを達成するためにCSSリセットを適用する必要があるかどうかを教えてください。
重複の可能性:
最高のcssリセット
CSSリセットを実装するための最良の方法は何ですか?私の質問は、クロスブラウザー、クロスプラットフォームに準拠するレイアウトの実装に関連しています。たとえば、レイアウトは、Firefoxなどのデスクトップブラウザでも、iPadでも、ある程度はiPhoneでも同じように見えるはずです。
これを達成するためにCSSリセットを適用する必要があるかどうかを教えてください。
CSSリセットを実装するための最良の方法は何ですか?
あなたの質問に答える前に、CSSリセットが何であるかを理解することが重要だと思います。
CSSリセットの目的は、ブラウザが使用するデフォルトのスタイルを上書きすることです。それについてです。
あまり使用されていない要素のいくつかを正規化するのに役立つ、最も人気のあるCSSリセットの間におそらく見つかる提案されたスタイルがたくさんあります。さらに、一部のブラウザでHTML5要素を正しくレンダリングするために必要なスタイルがいくつかあります。
魔法。真剣に、彼らは万能薬ではありません。見栄えの良いWebページを取得するには、CSSをさらに作成する必要があります。サイトでCSSリセットを使用しているからといって、そうでないサイトよりも優れているとは限りません。多くの非常に魅力的なサイトは、とにかくプロセスの一部としてすべてをオーバーライドすることを知っているので、CSSのリセットを気にしません。
デフォルトをはるかに超える要素のスタイル設定を計画していない場合は、CSSリセットを使用する必要があります。h#
、、、、などのブロックレベルのテキスト要素の余白、パディング、フォントサイズを正規化するのに非常p
にblockquote
役立ちul
ますol
。
レイアウトに何が起こるかを考えずに、他の誰かのCSSリセットに盲目的にリンクしている場合は、CSSリセットを使用しないでください。レイアウトで何が行われているのかを正確に理解していない場合は、そもそもそれを使用するべきではありません。
私は通常、単純なCSSのリセットを人々に勧めません。なぜなら、そのようなスタイルは役に立たないことがよくある* { margin: 0; padding: 0; }
からです。せいぜい、将来的に他のセレクターに対してより高い特異性を使用するように強制することになり、最悪の場合、あらゆる種類のスタイル継承の問題に遭遇することになります。
プレーンジェーンリセットを使用する代わりに、リセットテンプレートを使用しますが、知っている要素のスタイルを入力します。常に持つ代わりに:
p
{
margin: 0;
padding: 0;
}
デフォルトの段落スタイルに設定する必要があります(他の人のデザインを使用している場合、スタイルガイドは通常、リセットされたスタイルシートに属するほとんどのスタイルを指定します)。
p
{
border-bottom: 1px solid #000;
margin: 0 0 1em;
padding: 0 0 1em;
}
他の誰かからのリセットを盲目的に使用しないでください。代わりに、実際に使用される便利なスタイルを選択し、便利なデフォルトを指定してください。とにかくデフォルトのスタイルシートのすべてをオーバーライドするだけの場合は、CSSをリセットしても意味がありません。
私は通常、「リセット」スタイルシートを自分のスタイルシートと呼んcore.css
でいます。これは、作成しようとしているレイアウトのコアスタイルがすべて含まれているためです。
normalize.cssを使用できます:
Normalize.cssは、カスタマイズ可能なCSSファイルであり、ブラウザーがすべての要素をより一貫して、最新の標準に沿ってレンダリングできるようにします。正規化が必要なスタイルのみを正確にターゲットにするために、デフォルトのブラウザスタイルの違いを調査しました。
ただし、モバイルやタブレットなどをどれだけサポートできるかはわかりません。
これは最も一般的に推奨されているものであり、私が使用しているものであり、そこにある最高のものだと思います。