[css-values] Should math be allowed in bare min()/max()?

[litherum]

Recently, the CSSWG resolved to add min() and max() functions. These haven't been added to the draft yet, but WebKit is implementing them. The resolution included the ability to use min() and max() outside of calc(), wherecalc() can be present today.

Some use cases, such as left: min(60px, 5em); are handy, and don't need math; indeed, the presence of math in this example may be surprising to authors in this example. On the other hand, style of the form height: calc(max(50px, 100vh - 35px)); seems to be useful if the content requires 50px to lay out correctly. It's also valuable to have the syntax allowed by min() and max() be consistent, whether or not it's used as a bare function or inside calc().

Another possible solution is to disallow bare min() and max().

[tabatkins]

Yes, we're intending that min()/max() allow math in their arguments.

On the other hand, style of the form height: calc(max(50px, 100vh - 35px));

height: max(50px, calc(100vh - 35px));, surely?

Anyway, height: max(50px, 100vh - 35px); will be allowed. We discussed this exact case back in the meeting where we agreed to add it. I'll go ahead and work on the spec this afternoon. ^_^

[tomhodgins]

I'll go ahead and work on the spec this afternoon. ^_^

This is amazing ｡◕‿◕｡

Will it allow nesting min() and max() together like this?

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

Having this sort of functionality anywhere in CSS is going to make it way easier for CSS authors to use scalable units “safely” 😘👌

[tabatkins]

Will it allow nesting min() and max() together like this?

Yes.

Having this sort of functionality anywhere in CSS is going to make it way easier for CSS authors to use scalable units “safely”

Yup!

[tabatkins]

Okay, first draft of min()/max() is committed in 371d0a1. Should be complete, minus any nits or minor bugs I might have.

[tabatkins]

(Removing Agenda+ label, because the question in the OP was answered in the Seattle F2F minutes where we resolved to add the feature.)