v148 · CSS · Cascade

Component Reset Demo

Compare revert-rule, revert, initial, and the unmodified author styles applied to form controls. revert-rule is the surgical option: it undoes only the properties declared in the current rule, leaving everything else in the cascade intact.

The four columns show the same button, input, and select control with different reset strategies applied to their author style overrides. Use this to understand when each keyword is the right tool.

No reset

original

revert-rule

Chrome 148

revert

all author → UA

initial

spec default

No reset — Author styles (purple button, dark input) are fully applied. The component looks branded but may clash in a design system that needs neutral base styles.

When to use each

/* revert-rule — Chrome 148: undo only what THIS rule set.
   Other cascade layers (user styles, inherited values) survive. */
.theme-button {
  background: purple;
  color: var(--bg-paper);
}
.reset-zone .theme-button {
  background: revert-rule;  /* → restores pre-rule value; purple gone */
  color: revert-rule;       /* → white gone; inherited color survives */
}

/* revert — undo ALL author styles, fall back to UA stylesheet */
.ua-button { all: revert; }

/* initial — set to CSS specification initial value
   (may produce invisible elements — e.g. color:initial = black,
   background:initial = transparent) */
.spec-default { color: initial; background: initial; }

references

implementation reference

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