CSS Working Group approves to add support for trigonometric functions in CSS

In a meeting conducted last month, the CSS Working Group has agreed on introducing a few trigonometry functions in CSS. Created in 1997 by the World Wide Web Consortium (W3C), the CSS Working Group is responsible for discussing new features and tackling issues in CSS.

Currently, they have approved the following 10 functions:

Sine: sin()

Cosine: cos()

Tangent: tan()

Arccosine: acos()

Arcsine: asin()

Arctangent: atan()

Arctangent of two numbers x and y: atan2()

Square root: sqrt()

Square root of the sum of squares of its arguments: hypot()

Power of: pow()

CSS is no longer just limited to changing colors or fonts. Developers have been slowly relying on CSS for implementing much more complex tasks. CSS 3, its overhauled version, comes with several web animations, gradients, certain selectors, and more. However, CSS lacked the ability to work with angles and perform much more advanced mathematical operations than adding, subtracting, multiplying, or dividing two values.

This decision comes after multiple requests by web developers to introduce trigonometric functions for simplifying implementations of many use cases that involve angles. These will be very handy in cases like syncing rotation angles, converting between angles and x/y dimensions, and more.

Currently, for implementing these use cases developers had to either hardcode, use JavaScript, or a preprocessor, which is a pain. Explaining the need of trigonometric functions in CSS, one of the developers said, “In static markup, the solution is to hard-code approximate values, but that often leaves pixel gaps or discontinuities from rounding errors. In dynamic situations, as others have mentioned, the only solution is JavaScript (with lots of converting back and forth between radians for the JS functions and degrees or turns for my design and for SVG properties, which is the only time I usually need Math.PI!).” Developers are also requesting for reciprocal functions for calculating cotangent, secant, and cosecant. These will be very convenient but are currently not a priority.

Read the discussion by CSS Working Group, check out its GitHub repository.

Erlang turns 20: Tracing the journey from Ericsson to Whatsapp

How you can replace a hot path in JavaScript with WebAssembly

Bootstrap 5 to replace jQuery with vanilla JavaScript