くまだどうも、くまだです。
@layer（カスケードレイヤー）で使えるrevert-layer のメモ。
revert-layerとは
revert-layer は CSS のグローバルキーワードのひとつで、現在のカスケードレイヤーで設定されたスタイルをなかったことにして、ひとつ下のレイヤーの値に戻すキーワードです。
@layerと組み合わせて使うことが前提です。
@layer base {
a {
color: blue;
text-decoration: underline;
}
}
@layer utilities {
a {
color: revert-layer; /* base レイヤーの blue に戻る */
}この例では utilities レイヤーで color を revert-layer にすると、base レイヤーで指定した blue が有効になります。
CSS系のリセット系との比較だと、以下のようになります。
- initial： CSS 仕様の初期値（ブラウザデフォルトも無視）
- inherit： 親要素の値を継承する
- unset：継承プロパティなら inherit、非継承なら initial
- revert：UA スタイルシート（ブラウザデフォルト）まで巻き戻す
- revert-layer： ひとつ下のカスケードレイヤーの値まで巻き戻す
revert-layer が役立つのは、レイヤーで管理しているベーススタイルを、特定のコンポーネントだけ打ち消したいときです。
<section>
<h2>例2：.btn-ghost（base の button スタイルを revert-layer でリセット）</h2>
<div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
<button>通常の button（base スタイル：royalblue）</button>
<button class="btn-ghost">Ghost button（revert-layer でリセット済み）</button>
</div>
</section>@layer base {
button {
background-color: royalblue;
color: white;
border: none;
padding: 0.5em 1em;
border-radius: 4px;
}
}
@layer components {
.btn-ghost {
/* base レイヤーのスタイルをすべてなかったことに */
background-color: revert-layer;
color: revert-layer;
border: revert-layer;
padding: revert-layer;
border-radius: revert-layer;
/* ここで改めてスタイルを当てる */
background-color: transparent;
color: currentColor;
border: 1px solid currentColor;
padding: 0.4em 0.8em;
}
}
all: revert-layer でまとめてリセットもできます。all: revert-layer は「このレイヤーで書いたスタイルをすべてなかったことにする」という意味になります。
@layer components {
.card--plain {
all: revert-layer; /* このレイヤーで指定したスタイルをまとめてリセット */
}
}- revert-layer は、現在のレイヤーで設定したスタイルだけをなかったことにするキーワード
- initial はすべてリセット、revert はブラウザデフォルトまで戻るのに対して、revert-layer はひとつ下のレイヤーまで戻る
- all: revert-layer でまとめてリセットすることも可能
ここまで読んでくださりありがとうございました。