「all: unset」と「all: revert」: それぞれをいつ使用する必要がありますか?

<p>

<p>CSS のニュアンス: all: unset と all: revert

<p>CSS キーワード間の微妙な点を理解すると、スタイル設定の機能が向上します。 all: unset と all: revert の場合、違いはブラウザで適用されたスタイルシートとユーザー定義のスタイルシートの処理にあります。

<p>all: unset

<p> MDN に記載されているとおり、unset を使用すると、プロパティを親から継承した場合はその継承値に、そうでない場合は初期値にリセットできます。その結果、前者のシナリオでは継承キーワードをエミュレートし、後者のシナリオでは初期キーワードをエミュレートします。

<p>all: revert

<p>対照的に、revert はプロパティのカスケード値を元に戻します。その状態は、現在の要素に変更が加えられていません。これは、プロパティを継承値にリセットするか、存在しない場合はブラウザのスタイルシートまたは該当するユーザー スタイルによって設定されたデフォルト値にリセットすることを意味します。

<p>主な違い

<p>主な違いは、ブラウザがデフォルトのスタイルを要素に適用するときに現れます。 revert を使用すると、これらのスタイルを効果的に元に戻すことができますが、unset では元に戻すことはできません。

<p>Illustration

<p>次の HTML および CSS コード スニペットを考えてみましょう:

<p>

<p>ブラウザがデフォルトのマージン 50px を <p> に自動的に設定すると仮定します。要素。この例では、margin:revert を指定した段落内のテキストのマージンが 0px にリセットされ、ブラウザのデフォルトのスタイルが効果的に削除されます。一方、margin:unset を指定した段落内のテキストは、ブラウザのデフォルトのマージン 50 ピクセルを維持します。

以上が「all: unset」と「all: revert」: それぞれをいつ使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。