CSS の「all: unset」と「all: revert」の主な違いは何ですか?

<p>

<p>CSS の all: unset と all: revert の違いを理解する

<p>CSS の unset キーワードは、プロパティを継承された値にリセットするのに役立ちます親から継承する場合は初期値に、継承しない場合は初期値に戻ります。これは、最初のケースでは、inherit キーワードのように動作し、2 番目のケースでは、initial キーワードのように動作することを意味します。

<p>一方、revert キーワードは、少し異なるアプローチをとります。カスケードされたプロパティの値を、現在の値から、現在のスタイルの起点によって現在の要素に変更が加えられなかった場合の値に戻します。

<p>次に、で強調表示されている違いを詳しく見てみましょう。 MDN からの引用:

<p>ブラウザとカスタム スタイルシート

<p> unset と revert の主な違いは、ブラウザーまたはユーザーが作成したカスタム スタイルシート (ブラウザー側で設定) によって設定された値を持つプロパティの処理にあります。

<p>all を使用する場合: unset、browser-setまたは、プロパティのユーザー設定値は、継承された値または初期値に置き換えられます。対照的に、all: revert は、特定のプロパティをブラウザまたはユーザー スタイルシートが介入する前の状態に戻す機能がユニークです。

<p>例

<p>次の CSS スニペットを考えてみましょう。 :

p {
  margin: 50px;
}

<p>このブラウザがこのデフォルトの余白スタイルをすべての <p> に適用すると仮定しましょう。要素。ここで、

<p>

<p>を使用すると、あたかもブラウザがデフォルトのスタイルを適用していないかのように、margin プロパティは元の状態に戻ります。

<p>ただし、次のように使用します。

<p>

<p> はマージンを継承された値 (通常は 0) にリセットします。 したがって、この場合、unset はブラウザーによって設定された元のマージンを復元しません。

<p>結論として、all: unset はプロパティを継承値または初期値にリセットすることに重点を置いているのに対し、all: revert はブラウザまたはユーザー スタイルシートを変更する前の元の状態にプロパティを復元することに重点を置いています。

以上がCSS の「all: unset」と「all: revert」の主な違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。