CSS to get support for trigonometry functions

CSS trigonometry functions approved but not expected to hit browsers any time soon.
Written by Catalin Cimpanu, Contributor

CSS, which stands for Cascading Style Sheets, or the language that styles and arranges how page elements appear on a website, will get support for trigonometry functions such as sine, cosine, tangent, and others, ZDNet has learned.

The new trigonometry functions were approved at the end of February in a meeting of the World Wide Web Consortium (W3C) CSS Working Group.

The new functions approved and set to join the CSS standard are:

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()

The above functions come as an addition to CSS' existing support for math functions that already include:

Calculate basic expressions - calc()
Get smallest value - min()
Get largest value - max()
Get middle value between an upper and lower bound - clamp()

The W3C CSS-WG approved the addition of these new math functions to CSS at the request of multiple web developers who requested a simple way to control CSS animations using native CSS syntax instead of JavaScript.

Developers wanted simple methods to work with angles and to synchronize complex animation sequences without needing to write custom JavaScript code or load bulky and oversized animation libraries or game engines.

Ever since CSS' overhaul with the release of CSS 3 more than half a decade ago, web developers have been slowly relying on CSS to do more and more than just colorize text and make page elements stick to the top or bottom of a page.

CSS is now capable of complex animation routines and supports image filters as advanced as the ones found in Adobe Photoshop.

However, one thing that was missing was the ability to work with angles and perform mathematical operations more advanced than adding, subtracting, multiplying, or dividing two values.

The new CSS trigonometry functions have been approved less than two weeks ago, and it will take a while until they end up in our browsers. The Can I Use website is a good tool that developers can use to keep an eye when these functions make it into browsers and in which ones.

All the Chromium-based browsers

Related developer news:

Editorial standards