Thanks for the heads up! And for reading all that way down.

(Gosh CSS functions sure have ballooned since I learned in the early 2000s. This guide brought me up-to-date in just a few minutes.)

Just wanted to point out a little formatting errors under Trigonometry Functions. For the functions acos() and hypot(), the code formatting starts earlier than it should.

May The Source be with you!

Thanks for the reply, Ana. I really respect your work and appreciate the time you spent pointing out the above. I’ll try and get updates from your feedback incorporated as soon as possible.

1. “sizing & scaling functions” is incorrect. None of those functions performs sizing. translate[x|y|z|3d] (translation), rotate[x|y|z|3d] (rotation), skew[x|y] (shearing) don’t perform scaling either. They are transform functions, just like matrix and matrix3d, which, as far as I know, are not deprecated. At least the spec says nothing about them being deprecated, so I’m not sure where that info comes from. The source linked in that section gives me a 404. What has been deprecated for almost a decade however is the skew(x, y) function (spec). It was even removed from Firefox in August 2012, but it was later reintroduced for backwards compatibility reasons. Also on skewing: “amount of distortion is proportionate to the angle and distance declared” – there’s no distance in the skew[x|y] functions. This section explains how skewing works, as well as the difference between how it’s applied on HTML and SVG elements.

And note that stretching and squashing is only a tiny part of what can be done with transform functions.

1. sqrt(), pow() and hypot() are not trigonometric functions. Together with log() and exp(), they’re classed as exponential functions. There are also sign-related functions (abs() and sign()) and stepped value functions (round(), mod(), rem()). Here’s the spec for that.

2. conic-gradient() actually has decent support now if we are to ignore pre-Chromium Edge. Chromium browsers support it. Safari supports it. Even Firefox supports it behind a flag – go to about:config, search for the layout.css.conic-gradient.enabled flag and set its value to true (it’s false by default, double-clicking sets it to true).

Same goes for min(), max() and clamp(). Leaving aside old Edge/ IE, which surely won’t evolve to support them, they are actually well-supported.

I am always grateful to css-tricks. This article is written in a great way and helpful for anyone.

Very nice article please more of this please

Possibly! You might want to check out Houdini. It grants access to the CSSOM, which is incredibly powerful stuff.