Новые математические функции в модуле единиц и значений CSS 4 уровня – еще один шаг к полноценному программированию на CSS

Предпоследняя неделя января выдалась плодотворной для Рабочей группы по CSS. Целых три дня редакторы CSS-стандартов собирались в офисе Igalia (тех ребят из Испании, которым мы обязаны одновременным внедрением CSS-гридов в половину браузерных движков). В числе прочего обсуждались новые возможности математических вычислений в CSS, о которых давно мечтали верстальщики. Итог этого обсуждения Таб Аткинс подвел в своем твите, скриншот которого вы видите выше.

Итак, в добавок к привычной функции calc() и только-только набирающим популярность min(), max() и clamp(), модуль значений и единиц CSS 4 уровня теперь обзаведется аналогами почти всех функций объекта Math из JS:

• округление (round()). У нее будут разные режимы, как именно округлять, в зависимости от дополнительного параметра: к ближайшему целому, как round() в JS (ключевое слово nearest), вверх, как ceil() (up), вниз, как floor() (down) или к меньшему по абсолютному значению (to-zero);
• деление по модулю (mod()) и остаток от деления (rem()). Очень похожи, но различаются поведением для отрицательных значений: если mod(-18px, 5px) дает результат 2px (по правилам деления по модулю в математике), то rem(-18px, 5px) даст -3px (как оператор % в JS);
• абсолютное значение (abs()) и знак числа (sign() – -1 для отрицательных значений, 1 для положительных, 0 для нуля);
• натуральный логарифм (log()) и экспонента (exp());
• числовые константы e и pi (их можно будет использовать только в выражениях внутри calc());
• особые константы infinity, -infinity и NaN (в основном они задуманы как вспомогательные, для удобства сериализации, но infinity можно будет использовать и явно в значении«очень-очень много», вместо всевозможных 99999px).

И это не считая тригонометрических функций (sin(), cos(), tan(), asin(), acos(), atan() и atan2()), полезных при работе с трансформациями поворота, и функций возведения в степень (pow()), квадратного корня (sqrt()) и вычисления длины вектора по его координатам (hypot()), которые добавили еще раньше.

Если CSS и раньше был тьюринг-полным, то с новыми возможностями фраза «программирование на CSS» и вовсе перестает казаться шуткой, правда? Теперь дело за браузерами, чтобы они так же оперативно это всё внедрили. А чего из новинок больше всего не хватало вам?

P.S. Это тоже может быть интересно: