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 キーワードのように動作します。

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

下記の例では、basespecial の 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;
  }
}

結果

colorrevert-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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
revert-layer

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報

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