Математика в CSS: что и зачем считать для стилей

Есть 2 категории людей

🕹️ calc()

calc(1vh + 20px)

@property --scrollbar {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

html {
    container-type: inline-size;
}

body {
    --scrollbar: calc(100vw - 100cqw);
}

min(90px, 5vw, 5%)

max(90px, 5vw, 5%)

clamp(from, fn, to)

h1 {
    font-size: clamp(3rem, 5vw + 1.5rem, 7rem);
}

h2 {
    font-size: clamp(2rem, 4vw + 1.5rem, 5rem);
}

.effects {
    /* Фантазируем */
    @if (disabled) {
        filter:
            contrast(.9)
            opacity(.7);
    }

    [id='toggle']:checked ~ & {
        disabled: true;
    }
}

AND
OR
XOR
NOT

NOT

            --not: calc(1 - var(--a))
        

AND

            --and: calc(var(--a) * var(--b))
        

OR

not (A or B)
=
(not A) and (not B)

            --or: calc(1 - (1 - var(--a)) * (1 - var(--b)))
        

XOR

            --xor: calc((var(--a) - var(--b)) * (var(--a) - var(--b)))
        

.effects {
    --i: var(--disabled, 0);
    filter:
        contrast(calc(1 - var(--i) * .1))
        opacity(calc(1 - var(--i) * .3));

    [id='toggle']:checked ~ & {
        --disabled: 1;
    }
}

.effects {
    filter: if(
        style(--disabled: 1):
            contrast(.9) opacity(.7);
        else:
            none);
}

Зачем мне это в вебе?

Физика!

Ряды Фурье

$$R^2=x^2+y^2$$
$$1^2=co{s}^2+si{n}^2$$

Можно рисовать правильные фигуры

Как считали древние?

Ряд Тейлора

@function sin($angle) {
    $sin: 0;
    $angle: rad($angle);
    // Iterate a bunch of times.
    @for $i from 0 through 20 {
        $sin:
            $sin + pow(-1, $i)
            * pow($angle, (2 * $i + 1))
            / fact(2 * $i + 1);
    }
    @return $sin;
}

@function cos($angle) {
    $cos: 0;
    $angle: rad($angle);
    // Iterate a bunch of times.
    @for $i from 0 through 20 {
        $cos:
            $cos + pow(-1, $i)
            * pow($angle, 2 * $i)
            / fact(2 * $i);
    }
    @return $cos;
}

Функции шага

• round()
• mod()
• rem()

round(var(--w), 50px)
↓
Math.round()

round(up, var(--w), 50px)
↓
Math.ceil()

round(down, var(--w), 50px)
↓
Math.floor()

round(to-zero, var(--w), 50px)
↓
Math.trunc()

h1 {
    font-size: clamp(3rem, 5vw + 1.5rem, 7rem);
}

h2 {
    font-size: clamp(2rem, 4vw + 1.5rem, 5rem);
}

h1 {
    font-size: round(down, clamp(3rem, 5vw + 1.5rem, 7rem), 1px);
}

h2 {
    font-size: round(down, clamp(2rem, 4vw + 1.5rem, 5rem), 1px);
}

rem(7, 2)
↓
7 % 2 = 1

mod(7, 2)
↓
7 % 2 = 1

Экспоненциальные функции

• pow(5, 2) = 25
• sqrt(9) = 3
• hypot(3em, 4em) = 5em
• log(8, 2) = 3
• exp(1) = e

hypot(3em, 4em, 5em)

Функции знака

• abs(-20px) = 20px
• sign(-20px) = -1

Тригонометрические функции

• sin()
• cos()
• tan()
• asin()
• acos()
• atan()
• atan2()

atan(pi / 2)

atan2(4px, 3px)

:root {
    /* ❌ */
    --px-width: calc(100vw / 1px);

    /* ✅ */
    --px-width: tan(atan2(100vw, 1px));
}

Можно рисовать правильные фигуры

clip-path: polygon()

mask: radial-gradient()

.mercury {
    --size: 1vmin;
    --radius: calc(0.4 * var(--ae));
    --speed: calc(88 / 365);
    --x: calc(cos(var(--angle)) * var(--radius) - var(--size) / 2);
    --y: calc(sin(var(--angle)) * var(--radius) - var(--size) / 2);
    translate: calc(var(--x)) calc(var(--y));
    animation: spin linear calc(var(--speed) * 100s) infinite;
}

@keyframes spin {
    from { --angle: 0turn; }
    to { --angle: 1turn; }
}

const ball = document.querySelector('.ball');

function setPositions(e) {
    const viewportOffset = ball.getBoundingClientRect();
    ball.style = `
        --cx: ${viewportOffset.left + viewportOffset.width / 2};
        --cy: ${viewportOffset.top + viewportOffset.height / 2};
        --cursor-x: ${e.pageX};
        --cursor-y: ${e.pageY}
    `;
}

addEventListener('mousemove', setPositions, false);

.iris {
    --angle: atan2(
        var(--cursor-x) - var(--cx),
        var(--cursor-y) - var(--cy)
    );
    --x: calc((var(--cursor-x) - var(--cx)) / var(--cx));
    --y: calc((var(--cursor-y) - var(--cy)) / var(--cy));
    --scale: calc(
        0.2 * hypot(
            var(--cursor-y) - var(--cy),
            var(--cursor-x) - var(--cx)
        ) / hypot(var(--cy), var(--cx))
    );
    scale: 1 calc(1 - var(--scale));
    translate: calc(var(--x) * 50%) calc(var(--y) * 50%);
    rotate: calc(-1 * var(--angle));
}

* {
    --packed-int: 781; /* 11_00_001_101 */

    --bits-9-10: mod(
        round(down, calc(var(--packed-int) / 256)), 4
    );
    --bits-7-8: mod(
        round(down, calc(var(--packed-int) / 64)), 4
    );
    --bits-4-6: mod(
        round(down, calc(var(--packed-int) / 8)), 8
    );
    --bits-0-3: mod(var(--packed-int), 8);
}

Infinity

.very-top {
    /* ❌ */
    z-index: 9999999;

    /* ✅ */
    z-index: calc(Infinity);
}

.rounded {
    /* ❌ */
    border-radius: 100%;
    border-radius: 9999px;

    /* ✅ */
    border-radius: calc(Infinity * 1px);
}

Когда это всё не нужно?

❌ На странице нет динамики

❌ IE11

❌ SVG или JS весят меньше