clamp()

[Tobi Reif]

Hi Tom!

Could EQCSS support clamp()?

font-size: clamp(variable-value, min, max);

eg

font-size: clamp(30ew, 20px, 80px);

[Tommy Hodgins]

You bet! In fact, one of the most popular EQCSS demos is demonstrating this. With EQCSS you're able to define any helper functions you need in JS and run them anywhere in your EQCSS stylesheet with eval() so we can easily construct a number clamp helper function in vanilla JS like this:

function clamp(min, mid, max) {
    
  return Math.min(Math.max(min, mid), max)
    
}

And then use it with eval(): https://codepen.io/tomhodgins/pen/ALWaVr

[Tommy Hodgins]

Sorry, didn't know hitting enter would submit it rather than add a new line…I think the argument order of min, mid, max is the best order since in that ordering they are also correct on the number line

I have talked about this on the CSSWG issues as well in the past, and around the time they added min() and max() there was talk that clamp() would also be added eventually so it might already be on track somewhere. I wonder where the most current issue for that is…

Also, you can already do the functionality of clamp in valid CSS with min() and max() with a scalable unit, like:

h1 {
  font-size: min(max(10px, 10vw), 100px);
}

Technically this means we can define min-width, max-width, min-height, and max-height using just regular width or height plus one of min() or max(), and with min() and max() it's almost like every other CSS property just gained a new min- and max- variant. Like we've never had min-font-size or max-padding before, but now we kind of do in a way!

So really the clamp() would just be syntactic sugar rather than adding a new feature to CSS, but at the same time you could argue that since it's already possible maybe it's not really that necessary. (But I would love to see it in CSS natively as well)

[Tobi Reif]

Sorry for having omitted that: I know that it can be done using inline-JS / eval() . It would be great if EQJSS would support it directly 😀

[Tobi Reif]

I think the argument order of min, mid, max is the best order

I agree!

So really the clamp() would just be syntactic sugar

Yes, and one that would increase the readability in a nice way 😀

[Fuqiao Xue]

I have talked about this on the CSSWG issues as well in the past, and around the time they added min() and max() there was talk that clamp() would also be added eventually so it might already be on track somewhere. I wonder where the most current issue for that is…

See w3c/csswg-drafts#2519

[Tommy Hodgins]

Oh thank you very much for this link @xfq :D
Seeing this just made my day!

[Tommy Hodgins]

Woohoo, clamp() is now in the draft spec for CSS-values! I think we can close this issue, as soon as clamp() is available natively we'll be able to replace eval("clamp()") with clamp() in our EQCSS code, and/or use clamp() with values supplied from JS by using eval("") inside :D

https://drafts.csswg.org/css-values-4/#calc-notation

8.1. Mathematical Expressions: calc(), min(), max(), and clamp()
The math functions, calc(), min(), max(), and clamp() allow mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. A calc() function represents the result of the mathematical calculation it contains, using standard operator precedence rules; a min() or max() function represents the smallest (most negative) or largest (most positive), respectively, comma-separated calculation it contains; a clamp() function represents its central calculation, clamped according to its min and max calculations (given clamp(MIN, VAL, MAX), it is resolved exactly identically to max(MIN, min(VAL, MAX))).