revert-layer
============

**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 with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

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