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
<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>
要素のスタイル設定は、ユーザーエージェントオリジンの既定値にロールバックされます。
仕様書
Specification |
---|
CSS Cascading and Inheritance Level 5 # revert-layer |
ブラウザーの互換性
BCD tables only load in the browser