0

Is anyone familiar with a means to make human readable the calculated value of a css custom property?

For example (and given the following precursor css code):

--div-width: 800px;
--computed-width: calc(100% - 100px);
--complex-width: calc(100vw - var(--div-width));
--complex-computed-width: clamp(0, calc((100vw - var(--div-width)) * 9999), 500px);

I can get --div-width from the computed tab in dev tools.

I can get --computed-width from hovering over the custom property in the styles panel.

But as soon as I introduce a calc AND a custom property, the VALUE I start getting back is calc(100vw - var(--div-width));. Now, in some cases I can deduce the value from the computed tab, when it's something straightforward like a distance. But... surely there's a way to read what the evaluated RESULT of the computation IS?

This is for my own use during development. I don't need it in JS/CSS/etc. I'll accept ANY mechanism for reading it. I'd even accept a browser extension. This is for my OWN knowledge as I'm trying to test stuff (e.g. I don't need to programmatically use the answer anywhere, I'd just like to be able to KNOW what answer the browser is arriving at).

Note:

And please, before someone slaps a "duplicate of" tag on this: please take 
note that I'm asking about BOTH custom properties AND calc() being 
used in the SAME evaluated expression. I KNOW the answer to either
individually. That's NOT what I'm asking here.
NerdyDeeds
  • 343
  • 1
  • 11
  • https://stackoverflow.com/a/56229876/8620333 – Temani Afif Aug 21 '22 at 22:59
  • The problem I'm having here, specifically, is that the results I get, seemingly from EVERYTHING (getPropertyValue, getComputedValue, DevTools, etc.) yields the EXPRESSION, not its RESULT. The browser clearly has an evaluated value stored in memory; when such an expression is used for a width or something trivial a value is clearly being APPLIED, I just cannot see what it IS in any scenario more complex THAN a width/height, and ONLY arises when its a calc(var(--some-var) * 123)-type scenario. There IS a value being derived, how can I SEE it? Seeing width:calc(var(--some-var) * 123) is useless. – NerdyDeeds Aug 21 '22 at 23:07

0 Answers0