revert-layer

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

revert-layer は CSS のキーワードで、カスケードレイヤー内のプロパティの値を、前回カスケードレイヤー内の要素に一致した CSS ルール内のプロパティの値にロールバックします。このキーワードが指定されたプロパティの値は、現在のカスケードレイヤーで対象とする要素にルールを指定していないものとして再計算されます。

一致する CSS ルールに対して他に戻すカスケードレイヤーがない場合、プロパティ値は現在のレイヤーから派生した計算値にロールバックします。さらに、現在のレイヤーに一致する CSS ルールがない場合、要素のプロパティ値は、前回のスタイルオリジンで定義したスタイルにロールバックされます。

このキーワードは、 CSS の一括指定プロパティ all を含めるために、あらゆる CSS プロパティに適用することができます。

revert-layer と revert

revert-layer キーワードを使うと、スタイルを前回のカスケードレイヤーで指定したものにロールバックすることができます。すべてのカスケードレイヤーは作者オリジンに存在します。それに比べて revert キーワードは、作成オリジンで適用されたスタイルを除去され、ユーザーオリジンまたはユーザーエージェントオリジンのスタイルにロールバックすることができます。

revert-layer キーワードは理想的にはレイヤー内のプロパティに適用することを意味しています。しかし、 revert-layer キーワードがレイヤーの外側のプロパティに設定された場合、プロパティの値はユーザーエージェントのスタイルシート（またはユーザースタイルが存在する場合はユーザースタイル）で設定された既定値にロールバックされます。つまり、このシナリオでは revert-layer キーワードは revert キーワードのように動作します。

例

既定のカスケードレイヤーの動作

下記の例では、base と special の 2 つのカスケードレイヤーが CSS で定義されています。既定では、 @layer 宣言文の base の後に special が記載されているため、 special レイヤーのルールが base レイヤーの競合するルールを上書きします。

HTML

html
<p>この例にはリストがあります。</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

css
@layer base, special;

@layer special {
  .item {
    color: red;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}

結果

すべての <li> 要素が special レイヤーの item ルールに一致し、赤くなります。これは既定でのカスケードレイヤーの動作で、 special レイヤーのルールが base レイヤーのルールよりも引き継がれます。

スタイルを直前のカスケードレイヤーに戻す

revert-layer キーワードが既定値でカスケードレイヤーの動作をどのように変更するかを見てみましょう。この例では、 special レイヤーに最初の <li> 要素をターゲットとする feature ルールが追加格納されています。このルールの color プロパティは revert-layer に設定されています。

HTML

html
<p>この例にはリストがあります。</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

css
@layer base, special;

@layer special {
  .item {
    color: red;
  }
  .feature {
    color: revert-layer;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}

結果

color を revert-layer に設定すると、 color プロパティの値は直前のレイヤー base で一致した feature ルールの値にロールバックされるので、 'Item one' は緑色になります。

直前のオリジンでのスタイルに戻す

この例では、戻す先のカスケードレイヤーがなく、かつ現在のレイヤーにプロパティ値の継承元となる一致する CSS ルールがない場合の revert-layer キーワードの動作を示します。

HTML

html
<p>この例にはリストがあります。</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

css
@layer base {
  .item {
    color: revert-layer;
  }
}

結果

すべての <li> 要素のスタイル設定は、ユーザーエージェントオリジンの既定値にロールバックされます。

仕様書

Specification
CSS Cascading and Inheritance Level 5
# revert-layer

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • initial を使用すると、プロパティを初期値に設定します。
  • inherit キーワードを使用すると、要素のプロパティを親と同じ値にします。
  • revert キーワードを使用すると、プロパティをユーザーエージェントのスタイルシート（またはもしあれば、ユーザーのスタイル）で設定された値に初期化します。
  • unset キーワードを使用すると、継承プロパティは継承値に、それ以外は初期値に設定します。
  • all プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。