Menu
Is there a limit to how many operands you can have within a CSS calc() function?
This works:
div { left:calc((100%/54)*26); left:-webkit-calc((100%/54)*26); } This does NOT work:
div { left:calc(((100%/54)*14)-140px); left:-webkit-calc(((100%/54)*14)-140px); } Of course, the latter is what I need, because I need to offset a few pixels, but as soon as I try to do that, the value seems to just go to zero. Any insight is appreciated!
602
calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.
CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.
HTML. In the above code example, the calc() function is used to give the width value to the heading. Here , we have used the value of the parent which is set to 100% of the screen width by default. The calc(50% – 100px) means that the width of the heading will be equal to “50% of the width of the parent – 100 px”.
So to actually debug CSS variables you can use the helper class that I added below. So then in console you set and read variable like so: CssVariables. setRootVar('--column-max-width', 'calc((90vw - var(--zoomer-width)) / (var(--columns-shown) + 1))'); console.
To quote MDN
The
+and-operators must always be surrounded by whitespace. The operand ofcalc(50% -8px)for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand ofcalc(50% - 8px)is a percentage followed by a minus sign and a length. The*and/operators do not require whitespace, but adding it for consistency is allowed, and recommended.
Space your stuff out, and it will probably work.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
