The revert-rule keyword

concepts

1. Cascade Unwinder

   A component with multiple stacked rules. Toggle revert-rule on individual properties and watch the cascade peel back — one rule at a time — to the previous declared value.

2. Conditional Polish

   Style a button for light and dark mode. Use revert-rule inside @media (prefers-color-scheme: dark) to cleanly undo specific overrides instead of re-declaring every changed property.

3. Component Reset Demo

   The same button, input, and select styled four ways: unmodified author styles, revert-rule (undo only this rule), revert (undo all author styles back to UA), and initial (CSS spec default). See exactly when each keyword is the right tool.

4. Cascade Debugger

   A visual cascade tool. Six layers (UA, author base, @layer component, @layer theme, @layer utility, inline) contribute to a subject element. Toggle revert-rule on any layer to watch the cascade re-evaluate. A computed styles panel with an Origin column shows exactly where each property value came from, plus a live CSS editor.

5. Layer Reset Demo

   Three-layer design system (base → theme → overrides) with live controls that place revert-rule in different override rules. See when it falls back to an earlier rule in the same layer and when it continues to a lower-priority layer.

why it shipped

revert rolls back to the browser UA stylesheet. revert-layer rolls back to the previous cascade layer. But until now there was no way to roll back to the previous rule within the same layer — useful when you want to undo a theme override or a conditional tweak without re-specifying every property you want to keep. The revert-rule keyword fills that gap: it says "for this property, act as if this rule didn't exist" while leaving every other declaration in the rule untouched.

references

• ChromeStatus entry
• CSS Cascading and Inheritance Level 5 spec
• Chrome 148 release notes