Description

Cross-browser support for CSS Math Functions:

• Stepped value functions: round(), mod(), rem()
• Trigonometric functions: sin(), cos(), tan(), asin(), acos(), atan(), atan2()
• Exponential functions: pow(), sqrt(), hypot(), log(), exp()
• Sign-related functions: abs(), sign()

Rationale

Developer needs:

• It will help framework developers, like me, to create complex calculations using CSS.
• My CSS data visualization framework Charts.CSS has no JS, only CSS.
• I can use trigonometric functions to style complex layouts using CSS.
• Additional needs include calculations inside CSS animations.
• Non static layouts - replacing simple units with calculations.

Impact:

• No JS rendering - moving calculations to CSS.
• Faster load time - developer will no longer need to load CSS and JS assets. They can load only CSS.

Browser compatibility:

Safari is leading the way on support. Firefox is catching up.

• Safari 15.4 added support for all those functions.
• Firefox 103 added support for trigonometric functions behind layout.css.trig.enabled flag.
• Chrome / Edge - no support.

Specification

https://w3c.github.io/csswg-drafts/css-values-4/#math

Tests

Web Platform Tests:

• https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&view=subtest&q=round-mod-rem
• https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&view=subtest&q=cos
• https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&view=subtest&q=hypot-pow-sqrt
• https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&view=subtest&q=exp-log
• https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&view=subtest&q=signs-abs

Bug Tracking

WebKit Bugzilla:

• https://bugs.webkit.org/show_bug.cgi?id=203312 - Implement the CSS exponent functions: pow(), sqrt(), hypot()
• https://bugs.webkit.org/show_bug.cgi?id=229897 - Implement exp,log functions calc functions
• https://bugs.webkit.org/show_bug.cgi?id=229786 - Implement abs,sign calc functions
• https://bugs.webkit.org/show_bug.cgi?id=230073 - Implement round,mod,rem functions for calc

Mozilla Bugzilla:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1774589 - Implement trigonometric functions and constants
• https://bugzilla.mozilla.org/show_bug.cgi?id=1785118 - Implement exponential functions
• https://bugzilla.mozilla.org/show_bug.cgi?id=1785117 - Implement mod() and rem() functions
• https://bugzilla.mozilla.org/show_bug.cgi?id=1764850 - Support CSS round()

Chromium Bugs:

• https://bugs.chromium.org/p/chromium/issues/detail?id=1284199 - Implement CSS Values Level 4 Mathematical Functions
• https://bugs.chromium.org/p/chromium/issues/detail?id=1190444 - The trigonometric function should be implemented in CSS

BCD / MDN

Too many BCD/MDN links, check the main ones:

• [CSS] Implement trigonometric functions and constants mdn/content#19832
• [CSS Values 4] Math functions - Safari 15.4 mdn/browser-compat-data#17868

But, we will finish documenting all the math functions very soon.