Heads up! this post was created when Microthemer was at version 5. The current version is 7.
Some references to the interface may be out of date.
Happy New Year!
Another one related to “calc()” – this time when I hover over the property to show its value, it’s shown as “NaNpx” (see the image below).
The CSS is properly generated though and works fine, it’s just the actual value shown by MT that has a problem. The calc(100%/3 - 30px) expression is perfectly fine (https://developer.mozilla.org/en-US/docs/Web/CSS/calc)
Thanks for bringing this to my attention. I’ve just released version 5.5.2.0 which fixes the NaNpx issue. I noticed some interesting behaviour though, which I think might be due to the way the browser calculates flex-basis and certain formulas.
I entered your calc() style into the flex-basis field:
calc(100%/3 - 30px)
Now that the bug is fixed, the browser reports the computed value as a calc() value rather than a pixel value, which it does for other properties like padding-top:
calc(-30px + 33.3333%)
The values in the calc() are different, although I think they are mathematically equivalent to the input. As I mentioned, I suspect this is a quirk of the browser. It can convert other calc() values for flex-basis to pixels, just not the formula you were trying. As far as I can see, it’s up to the browser to enhance support for this rather than being something I can fix at the MT end. But thought it worth mentioning.
Re the computed value – your observation is correct and what you see is expected and aligned with the CSS specification – the browser must report not the final computed value in units but the calc expression itself. Please check section “Why calc()?” in https://bitsofco.de/how-calc-works/ and then section 8.1.3 in https://drafts.csswg.org/css-values-3/#calc-notation, the latter contains some additional info as to why is that needed.
.
