demo · v130

Cascade debugger

For each property on the selected element, the debugger walks the cascade and shows which value wins. The page contrasts the broken pre-130 ordering (bare declarations hoisted above all nested rules) against the Chrome 130 source-order parser — and explains, declaration by declaration, why the result differs.

examples

CSS source

rendered card (Chrome 130 parser)

Hover or focus me

cascade (pre-Chrome 130, hoisted)

cascade (Chrome 130, source order)

the code

.card {
  background: white;

  &:hover {
    background: aqua;
  }

  background: gold;   /* Pre-130: hoisted above &:hover, so :hover wins (aqua) */
                      /* Chrome 130: parsed AFTER &:hover, so this wins (gold)  */
}

see also