Recently I have played around with CSS variables. CSS variables are what every frontend web developer has longed for; the ability to contain specific values throughout a website.
Lets say we want to define a primary colour we are going to use throughout a site; say #334433 for example.
:root { --my-colour: #334433; }
This assigns the value #334433 to a variable called --my-colour
which then can be accessed like so:
.my-class { background: var( --my-colour ); }
Great. But what if we want to see all the variables now assigned in the document? You might think (like I did) that you could just inspect the root element (the html element) and see all the variables assigned to it. Unfortunately that’s not the case… Yet.
Using Chrome’s debugging tools you cannot see all the CSS variables assigned to the root element
Inspect CSS Variables With Chrome’s Canary Browser
However if you use Chrome’s Canary browser, you can do this now:
- Open up the DOM inspector
- Select the html element
- Click on the Computed tab next to Styles
- Click the Show all filter
Click on the Computed styles tab
The computed styles also show the css variables now defined.
At the time of writing Google Chrome is at v48, and Chrome Canary is v50. So I wouldn’t expect to wait too long for this feature to be released into the regular version of Chrome we all know and love.