CSS,
the language that helps websites become so cumbersome (Joke! Kinda!), is learning some new tricks. Soon, web developers will be able to use it to perform simple math functions.
Simple may be an overstatement, as the mathematical functions CSS will gain include trigonometry. The trigonometry functions were approved in a late February meeting of the World Wide Web Consortium (W3C) CSS Working Group. Here they are:
- Tangent -
tan()
- Sine -
sin()
- Cosine -
cos()
- Arcsine -
asin()
- Arccosine -
acos()
- Square Root -
sqrt()
- Power of -
pow()
- Arctangent -
atan()
- Square Root (sum of squares of its argument) -
hypot()
- Arctangent (of an ‘x’ and ‘y’ number) -
atan2()
CSS already has a few mathematical functions for getting values or simple calculations, but the new trigonometry functions have a different use-case. Within the csswg-drafts repo on GitHub, we
see a desire for trigonometric solutions. This wasn’t born of some deep-rooted love for CSS, but rather to avoid JavaScript. More to the point, web developers want to avoid JavaScript libraries,
which can be needlessly massive and possibly carry nefarious code. While these new CSS trigonometry functions don’t sidestep JavaScript altogether, they do provide more tooling in those instances where JavaScript is too much and CSS just doesn’t quite fit the bill. Animations, or at least complex animation of websites, will still require JavaScript. CSS’s trigonometry functions simply help web developers style pages better, which will come in handy when designing for various screen sizes and layouts. It’s not clear
when the new features will actually be implemented. A bot published the
transcript of the CSS Working Group meeting where this was discussed, where we see a proposal was set to be drafted. Browser support is also required, meaning it will take even longer for CSS trigonometry to reach ubiquity, considering the wide breadth of browsers and platforms that need to be appreciated.
