css - css calc 関数でモジュラスを使用する

Question

css calc関数でモジュラス演算子を使用または実装する方法はありますか?
mod オペレーターがあり、IE がそれをサポートしていることは知っていますが、他のブラウザーはどうですか?

例えば

#element-id{
     width: calc( 100%  mod 5 );
}

Answer 1

CSS を動的に生成する場合は、abs()、ceil()、floor()、mod()、sign() などの単純な関数を実行する小さなクラスを作成しました。これを使用して、複雑な計算ルールを構築できます。互いに引数として渡します。「var(--my-variable)」をパラメーターとして使用すると、CSS 変数が使用されます。注: 生の数値で最適に機能し、最後にピクセル (など) に変換するためのユーティリティ関数 toUnit があります。

スタイルを設定する例としてjqueryのように呼び出すことができます：

 $('#my-element').css('width', `${cssHack.toUnit(cssHack.mod(254,25),'px')}`)

以下はクラスのコードです (es6、依存関係なし):

class cssHack
{
    //primary used for dynamic css variables-- pass in 'var(--dynamic-height)'
    static toUnit(val,unit)
    {
        unit='1'+unit;
        return ` calc(${val} * ${unit}) `;
    }

    static round(val)
    {
        // the magic number below is the lowest possible integer, causing a "underflow" that happily results in a rounding error we can use for purposeful rounding.
        return ` calc(${val} * ${Number.MIN_VALUE} / ${Number.MIN_VALUE}) `;
    }

    static abs(val)
    {
        return ` max(${val}, calc(${val} * -1)) `;
    }

    static floor(val)
    {
        return cssHack.round(` calc(${val} - .5) `);
    }

    static ceil(val)
    {
        return cssHack.round( `calc(${val} + .5) `);
    }

    static sign(val)
    {   
        let n = ` min(${val},0) `; //if val is positive then n =0. otherwise n=val.
        let isNegative= ` min(${cssHack.ceil(cssHack.abs(n))},1) `;
        let p = ` max(${val},0) `; //if val is negative then n=0, otherwise n = val;
        let isPositive= ` min(${cssHack.ceil(cssHack.abs(p))},1) `;
        return ` calc(${isPositive} + calc(${isNegative} * -1)) `;
    }

    static mod(val, base)
    {
        let abs = cssHack.abs(val);
        let div = ` calc(${abs} / ${base})`;
        let dec = ` calc(${div} - ${cssHack.floor(div)})`;
        return cssHack.round(` calc(${dec} * ${base}) `);
    }
}

Answer 2

それは 4 つのことをサポートしています。/, *, +, -. そして、いくつかの数学が必要です。

10 を 5 で割ってみましょう。 剰余を求めるには、「被除数」から「除数と商の乗算」を引く必要があります。10 / 5これで商が得られ、それで問題を回避できます。

--dividend = 10;
--divisor = 5;

// 10 - (5 * (10 / 5))
// 10 - (5 * 2)
// 10 - 10
// 0

15 割る 2 でもう一度試してみましょう。

--dividend = 15;
--divisor = 2;

// 15 - (2 * (15 / 2))
// 15 - (2 * 7)
// 15 - 14
// 1

ということで、こうなります…

calc(var(--dividend) - (var(--divisor) * (var(--dividend) / var(--divisor))));

参考までに+、-演算子は空白で囲む必要があります。ただし、演​​算子の前後に空白を使用することをお勧めします。詳しくはこちらをご覧ください。