[css-values-5] Centralized and generalized definition of fr unit in CSS Values 5

[SebastianZ]

As the fr unit is now used in several different places, I moved it to CSS Values 5.

To make it clearer that we're talking about fractions of leftover space, the data type also got renamed to <fraction>.

This fixes #8027.

Sebastian

[SebastianZ]

@tabatkins @fantasai @LeaVerou Can I get a review for this, please?

Sebastian

[fantasai]

I would not make changes to css-grid-1 or css-grid-2, since they're in CR already; and if we're introducing a generic definition, it should go into css-values-5, because it's new and hasn't quite stabilized yet.

I'm also unsure about <fraction> vs <flex>; we've been using <flex> for awhile now because it helps tie the idea to the way flexbox works (which was the goal)... it's short for “flex fraction” in that spec. But that's just bikeshedding. :)

[SebastianZ]

I would not make changes to css-grid-1 or css-grid-2, since they're in CR already; and if we're introducing a generic definition, it should go into css-values-5, because it's new and hasn't quite stabilized yet.

Ok, I reverted the changes to css-grid-1 and css-grid-2 and moved the definition to css-values-5. Note that I did not add it to css-grid-3, as it is currently still in flux and currently doesn't include the parts related to that data type.

I'm also unsure about <fraction> vs <flex>; we've been using <flex> for awhile now because it helps tie the idea to the way flexbox works (which was the goal)... it's short for “flex fraction” in that spec. But that's just bikeshedding. :)

While Flexbox refers to different types of "flex fractions", <flex> is not part of Flexbox. It is part of Grid, which calls it "flex fractions".

The confusion with Flexbox is a great indicator that it should be renamed (which was initially suggested by @LeaVerou).

Also, there might be other use cases in which the relation to flexible lengths could be hindering. E.g. it could be used to indicate fractions of angles, times or frequencies at some point.

Sebastian

[fantasai]

Let's actually define what this thing does...

Suggested change

	Flexible lengths: the <<fraction>> type</h3>
	Fraction values are denoted by <dfn id="flex-value">&lt;fraction></dfn>,
	and indicate a value that is some fraction of another reference value.
	A fraction is a <<dimension>>.
	Its unit identifier is <dfn value for="<flex>" lt="fr|fr unit">fr</dfn>.
	These values specify
	<dfn export lt="flexible length">flexible lengths</dfn>.
	Each length defines a portion of a given space
	which is specified by the context the type is used in.
	The allowed range of <<fraction>>> values
	<em>always</em> excludes negative values,
	in addition to any explicit ranges that might be specified.
	Proportional Fractions: the <<fraction>> type</h3>
	<dfn id=flex-fraction>Proportional fractions</dfn> are denoted by <dfn id="fr-value"><<fraction>></dfn>,
	which is <<dimension>> with the <dfn value for="<fraction>" lt="fr|fr unit">fr</dfn> unit.
	They represent a fraction of a reference value
	(typically a length)
	as a proportion in relation to other [=flex fractions=] referencing that same value,
	i.e. a value of ''<var>N</var>fr'' represents <var>N</var> / max(<var>sum of all ''fr'' values</var>, 1).
	For example, leftover space in [=grid layout=]
	is distributed to a ''1fr'' track and a ''2fr'' track in a 1:2 ratio.
	The allowed range of <<fraction>>> values
	<em>always</em> excludes negative values,
	in addition to any explicit ranges that might be specified.

[SebastianZ]

Thanks! Reads better now.

[SebastianZ]

@tabatkins @fantasai @LeaVerou Could you please do another review? Would be great to finish this up to avoid further merge conflicts and to open up usages of the fr unit in more places.

Sebastian

[cdoublev]

Fwiw, <fraction> needs to be listed as a base type in order to be valid in math functions, but it seems to be used in properties that are not implemented, so it may be ok to leave it without a note that it should be treated the same as <flex> in math functions, I guess.

[SebastianZ]

Thank you for the hint, @cdoublev! <flex> got renamed to <fraction> in this PR besides being generalized. So CSS Typed OM also needs to be adjusted. Therefore, I've created w3c/css-houdini-drafts#1119 now.

Sebastian

[cdoublev]

From an implementation point of view, parsing <fraction> as a <flex>, which will remain in CSS Grid 1-2, iiuc, is a simple solution that does not require updating CSS Values and CSS Typed OM, until <flex> is replaced in CSS Grid 3.