v148 · CSS · cascade

Cascade Debugger

A visual CSS cascade tool. Six ordered rules contribute to the element below. Click "revert" on any rule to insert revert-rule and watch the cascade re-evaluate as if that rule were not present.

Checking revert-rule support…

subject element

The styled element

cascade layers

Each row is one rule contributing to the subject element. Toggle revert-rule on any rule to see the affected properties fall back to the previous matching declaration.

Computed styles — origin column shows where each value came from
Property Value Origin

layer conflict panel

Three overlapping rules all declare color. The last author rule wins unless revert-rule is applied, in which case the current rule is ignored for that property.

Rule 1 · base layer
color: var(--accent-blue)
loses
Rule 2 · theme layer
color: var(--accent-emerald)
loses
Rule 3 · override layer
color: var(--accent-rose) (or revert-rule)
wins (last layer)

Layer conflict subject — watch color change

live CSS editor

Edit the CSS applied to the subject element. Use revert-rule on any property to see it cascade back.

references

implementation reference

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