revert-layer

revert-layer キーワードを使用すると、作成者オリジン内の直前のカスケードレイヤーで指定されたスタイルにロールバックすることができます。一方、 revert キーワードを使用すると、作成者オリジンで適用されたスタイルをユーザーオリジンまたはユーザーエージェントオリジンで指定されたスタイルにロールバックすることができます。

revert-layer キーワードは、カスケードレイヤー内のプロパティに適用するのが理想的な意味です。しかし、カスケードレイヤー外のプロパティに適用すると、プロパティ値は表示ヒント（例えば、width や height 属性、HTML の <s> 要素）で設定された任意の値にロールバックされ、ユーザーエージェントのスタイルシートまたはユーザースタイルで設定された値が既定値となります。表示ヒントを作成者オリジンに属するものとして考慮し、それらも元に戻す revert キーワードとは異なり、 revert-layer キーワードはカスケードレイヤー外の表示ヒントを無視するため、それらを元に戻しません。

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

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

@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

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

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

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

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

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

CSS

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

結果

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

• initial
• inherit
• revert
• unset
• all
• CSS カスケードと継承モジュール