Comments on: A Complete Guide to CSS Functions https://css-tricks.com/complete-guide-to-css-functions/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Fri, 15 Oct 2021 23:10:43 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Geoff Graham https://css-tricks.com/complete-guide-to-css-functions/#comment-1770116 Thu, 25 Mar 2021 15:21:00 +0000 https://css-tricks.com/?p=307668#comment-1770116 In reply to Zearin.

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

]]>
By: Zearin https://css-tricks.com/complete-guide-to-css-functions/#comment-1770113 Thu, 25 Mar 2021 14:47:02 +0000 https://css-tricks.com/?p=307668#comment-1770113 Thanks for this awesome article!

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

]]>
By: Eric Bailey https://css-tricks.com/complete-guide-to-css-functions/#comment-1757796 Tue, 16 Jun 2020 21:16:07 +0000 https://css-tricks.com/?p=307668#comment-1757796 In reply to Ana Tudor.

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.

]]>
By: Ana Tudor https://css-tricks.com/complete-guide-to-css-functions/#comment-1757709 Sat, 13 Jun 2020 09:19:06 +0000 https://css-tricks.com/?p=307668#comment-1757709 A few notes:

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

screeshot of enabling the flag

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.

]]>
By: Neil https://css-tricks.com/complete-guide-to-css-functions/#comment-1756956 Fri, 22 May 2020 20:25:16 +0000 https://css-tricks.com/?p=307668#comment-1756956 I forgot to include in my 1st comment that I think this article is a wonderful piece of work. Hats off to the person(s) who did the work!!

]]>
By: Neil https://css-tricks.com/complete-guide-to-css-functions/#comment-1756955 Fri, 22 May 2020 20:10:45 +0000 https://css-tricks.com/?p=307668#comment-1756955 re: fit-content() function
what am I missing here? 250 px vs 350 px in your example…
In this example, we are using an argument of 250px for the fit-content() function. This tells the browser to restrict the first grid column to a width of 350px,

]]>
By: Jakub T. Jankiewicz https://css-tricks.com/complete-guide-to-css-functions/#comment-1756534 Sat, 09 May 2020 13:35:00 +0000 https://css-tricks.com/?p=307668#comment-1756534 Nice, especially has and other functions that are not supported by any browser: https://developer.mozilla.org/en-US/docs/Web/CSS/:has

]]>
By: Amit Biswas https://css-tricks.com/complete-guide-to-css-functions/#comment-1756367 Wed, 06 May 2020 03:31:35 +0000 https://css-tricks.com/?p=307668#comment-1756367 In reply to sandywitch.

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

]]>
By: impshum https://css-tricks.com/complete-guide-to-css-functions/#comment-1756353 Tue, 05 May 2020 12:46:42 +0000 https://css-tricks.com/?p=307668#comment-1756353 calc() is absolutely fantastic! That is all.

]]>
By: Amayi Okiru https://css-tricks.com/complete-guide-to-css-functions/#comment-1756341 Tue, 05 May 2020 06:24:50 +0000 https://css-tricks.com/?p=307668#comment-1756341 In reply to Emanuel.

Very nice article please more of this please

]]>
By: Eric Bailey https://css-tricks.com/complete-guide-to-css-functions/#comment-1756333 Mon, 04 May 2020 21:23:59 +0000 https://css-tricks.com/?p=307668#comment-1756333 In reply to Emanuel.

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

]]>
By: Emanuel https://css-tricks.com/complete-guide-to-css-functions/#comment-1756328 Mon, 04 May 2020 16:43:28 +0000 https://css-tricks.com/?p=307668#comment-1756328 Ver good article to understant what functions in CSS are.
But I was hoping for the answer to the question: will we ever be able to write our own functions in CSS?

]]>
By: sandywitch https://css-tricks.com/complete-guide-to-css-functions/#comment-1756327 Mon, 04 May 2020 16:29:30 +0000 https://css-tricks.com/?p=307668#comment-1756327 Examples involving dogs are inherently clearer! :]

]]>