W3C home > Mailing lists > Public > public-css-archive@w3.org > September 2020

[csswg-drafts] using special values like max-content in functions (#5554)

From: bryan rasmussen via GitHub <sysbot+gh@w3.org>
Date: Sun, 27 Sep 2020 06:56:03 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-709682443-1601189762-sysbot+gh@w3.org>
bryanrasmussen has just created a new issue for https://github.com/w3c/csswg-drafts:

== using special values like max-content in functions ==
I would like some clarification on some issues, I was recently looking at min, max, clamp functions and in my naive estimation of how they work they should be able to take as a parameter any thing that results in a value with a unit of measurement. 

In the browsers I have tested you can of course use values that come from functions inside of other functions, thus you can use the result of a calc in a variable inside a min function. 

Many different properties where math functions are usable have special values - for example max-content, min-content in width.

Or something like the fit-content function. 

In my naive consideration it seemed obvious to me that max-content can be used inside of a min function, given that fit-content is described as fit-content(stretch) i.e. `min(max-content, max(min-content, stretch))` in css-sizing-4, that is to say I thought of fit-content as a bit of syntactical sugar so that developers if they wanted fit-content functionality wouldn't have to write it themselves all the time, or more to the point that clamp was a bit of syntactical sugar for an operation that developers might want to do, as is implied by example 31 of css-values-4 which says:

> An occasional point of confusion when using min()/max() is that you use max() to impose a minimum value on something (that is, properties like min-width effectively use max()), and min() to impose a maximum value on something; it’s easy to accidentally reach for the opposite function and try to use min() to add a minimum size. Using clamp() can make the code read more naturally, as the value is nestled between its minimum and maximum:
> .type {
>   /* Force the font-size to stay between 12px and 100px */
>   font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
> }

Following this naive consideration I expected that if doing `min(max-content - 10px, 200px)` it should figure out what max-content is in the context used and perform the calculations, but in testing neither Mozilla nor Chrome do this - I raised an issue on bugzilla just to hear if they could point me out that there was a part of the specs I was unfamiliar with that meant my expectations were totally out of whack https://bugzilla.mozilla.org/show_bug.cgi?id=1667306 where it was suggested I raise the issue here in order to be able to define how it should work.

As was noted in the discussion about the bug-report this would open up interesting animation possibilities, the more I think about it I can see uses (for specifically max-content) in utility classes that can be added to parts of a subtree to calculate out their size in the relation of what encloses them. But really it seems a point of clarity to have every keyword that returns a value potentially consumable by a function at a particular property should  actually be consumable by the function - since min-content and max-content return lengths those keywords should be able to be passed as properties to whatever function we want to use to set the width. 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5554 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Sunday, 27 September 2020 06:56:12 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:17 UTC