CSSのリセットと正規化の違いは？

開発者は、HTML 要素がどのブラウザーでも同じように見えることを望んでいますが、これは各ブラウザーの機能によって異なります。ブラウザは HTML ページをレンダリングするときに、独自のデフォルト スタイルを適用します。たとえば、タイトルタグのサイズやフォントはブラウザの種類によって異なります。つまり、コードを記述することなく、タイトルに余白や追加のパディングを含めることができます。

このチュートリアルでは、CSS をリセットおよび正規化する方法と、それらの違いについて説明します。

正規化とリセットの違い?

CSS を使用すると、ブラウザごとにタイトルのフォントやサイズが異なるなど、開発者はいくつかの問題に遭遇する可能性があります。デフォルトのパディングと同様に、上下のマージンも異なる場合があります。ここでリセットと正規化が登場し、ブラウザ間でデフォルト CSS の一貫性が高まりますが、どの方法を使用するかについての議論はまだ続いています。リセットと正規化の違いを確認するために、リセットと正規化を詳しく見てみましょう。

CSS でのスタイルのリセット

ブラウザ間の差異を避けるため、この手法では、CSS 作成者は CSS リセットを使用してブラウザのすべてのスタイルを無効にします。Web サイトをより読みやすくするために、ブラウザごとに独自の異なるユーザー エージェント スタイルシートが存在します。たとえば、次のようになります。ほとんどのブラウザではハイパーリンクが青色で、アクセスしたハイパーリンクが紫色で表示されるのを見たことがあるかもしれません。

デフォルトのスタイルの例は-

です。 リーリー

これらのデフォルト スタイルはすべてのブラウザに適用されますが、どのスタイルを適用するかはブラウザによって決定されます。ブラウザによっては、追加のパディングを適用したり、マージンを変更したり、フォント スタイルが異なる場合があります。

CSS リセットは、ブラウザーにすべてのスタイルを強制的に null にリセットさせ、ブラウザーのデフォルト スタイルによる差異を回避します。

すべての要素の重みとスタイルを同じに設定する例を見てみましょう。

リーリー

CSS 開発者は、Web サイトの見た目がブラウザごとに異なるため、不一致を発見します。リセットにより、デフォルトのブラウザ スタイルを null に設定できるようになり、ブラウザ スタイルの違いによって発生する可能性のある不一致が解消されます。

注意 - Internet Explorer は継承属性をサポートしていません。そのため、継承された値は適用されず、Internet Explorer のユーザー インターフェイスに影響を与える可能性があります。 Internet Explorer を使用している場合、リセットするとこの問題を解決できます。 ＃＃＃＃＃＃例 ＃＃＃

デフォルトのブラウザー スタイルをリセットする方法を示す例を見てみましょう。

リーリー

インポートしたリンクはブラウザのデフォルト スタイルをリセットします。リセットされたスタイルは他のスタイルよりも先に読み込まれるため、ブラウザのデフォルト スタイルが削除されます。

コードでリセットを使用したため、上記の出力はどのブラウザでも同じように見えます。リセットを使用した後の出力の違いは最小限になります。

CSS での正規化

ブラウザ間の互換性を向上させるために、HTML 要素への正規化を使用し、HTML のリセットを置き換えます。正規化は、有用なデフォルトをすべて消去するのではなく、ブラウザによって保持されるように行われます。の使用法を見てみましょう。正規化。

HTML 内の多くの要素のスタイルを標準化します。

• 一般的なブラウザからバグを削除します。

• ユーザビリティの向上により、コードをドキュメントで簡単に説明します。

• ＃＃＃例＃＃＃

  次は、正規化の概念を理解するための例です。この例では、ブラウザのスタイルをリセットせずに、すべてのブラウザで同じ出力を差異なく表示する正規化をインポートしました。
リーリー

上記はすべてのブラウザで同じ出力を表示します。

開発者の間では、どちらを選択するか、スムーズなフローにはどちらが優れているかについての議論が続いています。

正規化では、有用なデフォルトのスタイルが保持され、不要なスタイルが削除されますが、リセットではブラウザからすべてのスタイルが削除されます。リセットでは、ブラウザをリセットした後にすべてのスタイルを再宣言する必要がありますが、正規化では必要なスタイルが保持され、不要なスタイルのみが削除されます。標準化は使いやすく、最新のテクノロジーです。

＃＃＃結論は＃＃＃

正規化とリセットの目的は同じであり、Web サイトの UI を保持し、すべてのブラウザと互換性を持たせて、Web サイトがどのブラウザでも同じように見えるようにすることであるため、両者に大きな違いはありません。アプローチは異なり、ユーザーの好みによって異なります。

以上がCSSのリセットと正規化の違いは？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。