Using Modulus in CSS Calc Function

Using modulus in css calc function

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) + '%';

Css3 calc function : issue with mod operator

1) It looks like only IE supports the mod operator and it does function as you thought.

2) You need to add px on the units of the modulo (as C-link mentioned)

3) As @Harry mentioned, the current spec has dropped the mod operator from the calc function

FIDDLE - (try it on Internet explorer)

Sample markup -

<div class="container">
    <div class="no">no calc</div>
    <div class="simple">simple</div>
    <div class="mod1">mod1</div>
    <div class="mod2">mod2</div>
    <div class="mod3">mod3</div>
    <div class="mod4">mod4</div>
</div>

CSS (test cases)

.container {
    width: 450px;
    border: 1px solid black;
}
.no {
   background:aqua; 
}
.simple {
    width:calc(100% - 100px);
    background:green;
}
.mod1 {
    width:calc(100% mod 200px); /* = 450 % 200 = 50px */
    background:red;
}
.mod2 {
    width:calc(100% mod 300px); /* = 450 % 300 = 150px */
    background:brown;
}
.mod3 {
    width:calc(100% mod 50px); /* = 450 % 50 = 0 */
    background:orange;
}
.mod4 {
    width:calc(50% mod 100px); /* = 225 % 100 = 25px */
    background:yellow;
}

Performing calculations (calc) on data attributes in CSS (e.g. modulus)

Here's a simple JavaScript solution:

var pids = document.querySelectorAll('[data-pid]');
Array.prototype.forEach.call(pids, function(elem, index) {    elem.classList.add('pid-mod-' + (index % 4));});

.pid-mod-0 {  color: red;}
.pid-mod-1 {  color: orange;}
.pid-mod-2 {  color: yellow;}
.pid-mod-3 {  color: green;}

<div data-pid="0">0</div><div data-pid="1">1</div><div data-pid="2">2</div><div data-pid="3">3</div><div data-pid="4">4</div><div data-pid="5">5</div><div data-pid="6">6</div><div data-pid="7">7</div>

How to use calc css function in react render

First, you need to remove the () brackets from the properties. Then you can calculate them outside the return:

render(){
    // Assuming values are in pixels
    let topval = `calc(50% + ${top}px)`, leftval = `calc(50% + ${left}px)`;

    // rest of the code

    return(
        <div 
           style={{top: topval, left: leftval, transform: "translate(-50%,-50%)"}}
        />
    )
}

Also make sure to add units like px, em etc. when dealing with non-zero values otherwise the css is invalid.

For eg. calc(50% - 10) is wrong, calc(50% - 10px) works

CSS3 nested calc function using multiply and vw not rendering

You seem to expect the browser to figure out how much 200px (respectively 64px) is, as a ratio, from current browser width and automatically use that value.

Current browser implementation of calc only allows multiplication and division with numbers:

... : calc(100vw / 3) // valid
... : calc(1200px / 3) // valid
... : calc(1200vw / 200px) // NOT valid

See calc() current definition.

Use css counter in calc

The Question Can I use the counter(skill) inside a calc()

No. You can't.

The calc function does not permit the use of counter functions as its components. From the specs here - https://www.w3.org/TR/css3-values/#calc-notation:

Components of a
calc() expression
can be literal values or
attr() or
calc()
expressions.

There have been many requests for this but always declined. The underlying reason seems to be that the counter() function represents (outputs) a <string> and hence cannot be used directly in calc. Moreover, the counters are considered very expensive for the browsers.

Reference: https://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html

However, there have been proposals for adding a counter-value() function which would return the value as integer and could be used in calc. See here: https://drafts.csswg.org/css-lists-3/#counter-functions (Scroll down to see Issue 4).

So as of now, you cannot use counter inside of calc and the counter-value does not exist yet.

Using Modulus in CSS Calc Function