k8o

はじめに

ボタンの背景色を基本のルールで決めておき、カスタムプロパティが渡されたときだけ別のルールで差し替えたいとします。素直に書くと、--tintを渡さなかったボタンの背景はroyalblueではなく透明になります。

.button {
  background-color: royalblue;
}

.button.tinted {
  background-color: var(--tint); /* --tint が無いと → transparent */
}

.button.tintedの宣言が選ばれた時点で、.buttonのroyalblueは使われません。--tintが無いと値が無効になり、初期値のtransparentになります。これまでは、基本のルールをbackground-color: var(--tint, royalblue)のように書いておき、CSS変数を上書きして差し替えるしかありませんでした。

revert-ruleは、プロパティの値を、自身が書かれたスタイルルールがなかった場合の値に戻すCSSのキーワードです。Firefox 150とChrome 148に続いてSafari 27が対応し、Baseline 2026に加わりました。

revert・revert-layerとの違い

3つのキーワードは巻き戻す単位が違います。revertはオリジン、revert-layerはカスケードレイヤー、revert-ruleはスタイルルールを単位にします。同じcomponentsレイヤーに3つのキーワードを書き、背景色がそれぞれどの値になるかをコメントに示します。

@layer base {
  .highlight {
    background-color: lightgray;
  }
}

@layer components {
  .highlight {
    background-color: royalblue;
  }

  .highlight.rule {
    background-color: revert-rule; /* → royalblue */
  }

  .highlight.layer {
    background-color: revert-layer; /* → lightgray */
  }

  .highlight.origin {
    background-color: revert; /* → transparent */
  }
}

revert-ruleだけが同じレイヤーの.highlightに戻り、ほかの2つはレイヤーやオリジンごと飛ばします。

@layer rr-base {
  .rr-highlight {
    color: var(--color-fg-base);
    background-color: var(--color-bg-emphasize);
  }
}

@layer rr-components {
  .rr-highlight {
    color: var(--color-primary-fg);
    background-color: var(--color-primary-bg);
  }

  .rr-highlight.rr-quiet {
    color: revert-rule;
    background-color: revert-rule;
  }
}

変数が無いときだけ宣言を取り消す

冒頭の例は、var()のフォールバックにrevert-ruleを書けば解決します。フォールバックにはCSS全体キーワードを書けます。

.button {
  background-color: royalblue;
}

.button.tinted {
  background-color: var(--tint, revert-rule);
}

--tintが未定義なら、このルールの宣言はなかったことになり、.buttonのroyalblueが当たります。--tint: revert-ruleと変数のほうに書くと、戻るのは--tint自体なので注意してください。

同じルールの宣言には戻らない

revert-ruleは、同じルールで先に書いた宣言にも戻りません。

.highlight.quiet {
  color: red;
  color: revert-rule;
}

colorはredではなく前のルールの値になります。仕様では、そのスタイルルールが存在しなかったものとして値を計算し直すからです。

おわりに

revert-ruleを使うと、ルールの宣言だけをなかったことにできます。var()のフォールバックと組み合わせれば、変数が無いときだけ宣言を取り消せます。