Menu
Is there any way to use or implement modulus operator in css calc function?
I know there is mod operator and IE supports it, but what about other browsers?
For example
#element-id{
width: calc( 100% mod 5 );
}
894
On top of using CSS variables in calc you can also convert a value that has no units to a value with units by just multiplying the value by 1 of the unit type you want to convert to. This is very useful if you have CSS variables being set in JS that do not include the unit.
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.
You can use calc() anywhere where you would use numeric values (e.g.: width, max-height, margin-left, …) Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.
It is permitted to nest calc() functions, in which case the inner ones are treated as simple parentheses. For lengths, you can't use 0 to mean 0px (or another length unit); instead, you must use the version with the unit: margin-top: calc(0px + 20px); is valid, while margin-top: calc(0 + 20px); is invalid.
Unfortunately, there is no more mention of the mod operator in recent specs.
The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.
You may want to resort to using javascript to achieve such behaviour.
var el = document.getElementById('element-id');
el.style.width = (100 % 5) + '%';
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
