demo · v130

DevTools equivalence inspector

Edit a nested CSS source, then see how three engines model it: the pre-Chrome-130 parser (bare declarations hoisted before nested rules — wrong source order), Chrome 130's spec-conformant parser (each bare-decl run wrapped in CSSNestedDeclarations), and a DevTools-style flattened view. Side-by-side rendered preview shows whether the card was painted correctly.

CSS source

parsed structure


      

      

        
rendered card

        

          

            
Atlas of small explosions

            
hover to test &:hover, focus to test &:focus-visible

          

        

        
resolved on .card

        

      

    

  


  

    
the code


// In Chrome 130, the CSSOM exposes CSSNestedDeclarations rules:
const sheet = document.styleSheets[0];
const cardRule = [...sheet.cssRules].find((r) => r.selectorText === ".card");
for (const child of cardRule.cssRules) {
  console.log(child.constructor.name);
  // CSSStyleRule (for &:hover)
  // CSSNestedDeclarations (for the "background: gold; border: 2px solid;" run)
  // CSSStyleRule (for &:focus-visible)
  // CSSNestedDeclarations (for the "padding: 1rem;" run)
}

  


  

    
see also