Каталог RSS-каналов
Статистика

RSS-каналов в каталоге: 3390

Добавлено сегодня: 0

Добавлено вчера: 0

Hi-Tech / Интернет

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

CSS-LIVE 27.01.2020 в 14:48

Жизнь во фронтенде

Предпоследняя неделя января выдалась плодотворной для Рабочей группы по 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» и вовсе перестает казаться шуткой, правда? Теперь дело за браузерами, чтобы они так же оперативно это всё внедрили. А чего из новинок больше всего не хватало вам?

Другие записи ленты

Стандарт CSS для Masonry-раскладки: от идеи — к первым конкретным наработкам 09.01.2020 в 13:35

CSS-модуль режимов письма (Writing Modes) 3 уровня официально стал стандартом W3C 17.12.2019 в 21:13

CSS4 не будет… потому что он давно прошел. Встречайте CSS8! 15.11.2019 в 20:29

Маленькие хитрости кастомных свойств (CSS-переменных) 25.10.2019 в 02:49

Смогут ли React-хуки заменить компоненты высшего порядка (HOC)? 29.08.2019 в 12:25

Смогут ли React-хуки заменить Redux? 26.08.2019 в 13:47

Пользовательские CSS-атрибуты как механизм передачи данных из JavaScript в CSS 08.08.2019 в 11:22

Фантастические веб-спецификации и где они обитают 06.08.2019 в 14:30

W3C и WHATWG: неужели долгожданный мир? 28.05.2019 в 12:04

Селектор :has() станет доступен для оформления? 17.05.2019 в 08:58