v148 · CSS · demo

Conditional Polish

Compare approaches to conditional component styling. revert-rule lets a conditional rule surgically roll back specific properties to earlier cascade declarations — preserving base component updates without repetitive re-declaration.

A primary button, styled for whichever scheme is active.

Interactive Cascade Proof

Adjust the base component padding. Watch how revert-rule in dark mode automatically inherits the updated base size, while manual re-declaration locks into obsolete duplicate values.

Base component padding: 10px 22px

Live Button Computed Styles & Contrast

Property	Computed Value	Cascade Source / Contrast
`background-color`	—	theme rule
`color`	—	AAA ✓
`padding`	—	resolved via cascade
`font-weight`	—	600 (bold)

❌ Repetitive — must redeclare every changed property

.styled-btn {
  background: #1e40af;
  color: #ffffff;
  padding: 0.6rem 1.4rem;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .styled-btn {
    background: #93c5fd;   /* changed */
    color: #0f172a;        /* changed */
    border-color: #60a5fa; /* changed */
    padding: 0.6rem 1.4rem;/* redundant duplicate — doesn't adapt! */
    font-weight: 600;
  }
}

✅ Surgical — only override colors, revert structural properties

.styled-btn {
  background: #1e40af;
  color: #ffffff;
  padding: var(--base-pad);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .styled-btn {
    background: #93c5fd;
    color: #0f172a;
    border-color: #60a5fa;
    /* revert-rule rolls back to base .styled-btn declaration */
    padding: revert-rule;
    font-weight: revert-rule;
  }
}

references

ChromeStatus: The revert-rule keyword
CSS Cascade 5: revert-rule keyword
Cascade Unwinder — toggle revert-rule per property
Feature index

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗