v148 · CSS · Cascade

Component Reset Demo

Compare revert-rule, revert, initial, and unmodified author styles on form controls. revert-rule rolls back the cascade to earlier matching rules in the author origin, rather than stripping all author styles back to the user agent.

Click any column card below to inspect its computed styles and cascade explanation. You can submit buttons, edit inputs, and change select options in all four states.

No reset

author theme

revert-rule

Chrome 148

revert

author → UA

initial

spec initial

No reset — Author theme styles are fully applied: primary blue button with white text and light-blue inputs.

Selected Strategy Computed Styles (No reset)

Property	Computed Value	Cascade Origin & Resolution
`background-color`	—	—
`color`	—	—
`font-weight`	—	—

Cascade comparison in CSS

/* Base component (Rule 1) */
.styled-btn {
  background: var(--bg-stone);
  color: var(--text-black);
}

/* Theme override (Rule 2) */
.accent-theme .styled-btn {
  background: #1e40af;
  color: #ffffff;
  font-weight: 700;
}

/* revert-rule (Rule 3) — Rolls back background & color to Rule 1,
   preserving Rule 2's font-weight: 700 */
.reset-revert-rule .styled-btn {
  background: revert-rule;  /* → restores Rule 1 stone background */
  color: revert-rule;       /* → restores Rule 1 black text */
  /* font-weight is untouched, so 700 remains active */
}

/* revert — rolls back ALL author rules to user agent defaults */
.reset-revert .styled-btn { all: revert; }

/* initial — resets properties to CSS spec initial values (transparent, normal) */
.reset-initial .styled-btn { background: initial; color: initial; }

references

implementation reference

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