[Feature request] Provide UI to view inherited CSS custom properties (CSS variables) in DevTools
Reported by
m...@herchel.com,
Jan 18 2018
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36 Steps to reproduce the problem: Developer tools does not currently indicate where CSS Custom Properties (aka CSS Variables) are being inherited from. CSS Custom Properties cascade (like normal CSS properties), for example I can set the site default property at :root. Then I can override this at the component level (on a section tag), and then I can further override this inline to the element. What is the expected behavior? Proposed solution: Provide an “expand arrow” next to the CSS Custom property rule within the styles tab. After expanding, the UI will show where the custom property is inherited from, including what element, and what CSS. It will also show overridden custom properties, which are crossed out. (see the attached image for a mockup) What went wrong? The problem is that Developer tools does not tell me what value its getting, and where it’s coming from. Did this work before? No Chrome version: 63.0.3239.132 Channel: stable OS Version: OS X 10.11.6 Flash Version:
,
Jan 18 2018
,
Jan 18 2018
|
|||
►
Sign in to add a comment |
|||
Comment 1 by m...@herchel.com
, Jan 18 2018Note that CSS custom properties can be nested. So, it'd be useful to be able to track down these nested properties. Maybe more expansion arrows? Or click to jump to the element? Example here: :root { --primary: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-luminosity), var(--primary-alpha)); --primary-hue: 195; --primary-saturation: 100%; --primary-luminosity: 50%; --primary-alpha: 1; }