From c0ff510fab0157f5375e018788fe6a17b17c8ae8 Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Mon, 23 Oct 2023 23:45:43 +0200 Subject: [PATCH 1/5] [css-values-4] Moved definition of to CSS Values 4 --- css-borders-4/Overview.bs | 2 +- css-grid-1/Overview.bs | 74 +++++++++------------------------------ css-grid-2/Overview.bs | 71 ++++++++----------------------------- css-values-4/Overview.bs | 71 +++++++++++++++++++++++++++++++++++++ 4 files changed, 103 insertions(+), 115 deletions(-) diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index c9cf7457e64..643cd9bb771 100644 --- a/css-borders-4/Overview.bs +++ b/css-borders-4/Overview.bs @@ -557,7 +557,7 @@ The 'border-clip' properties the border edge. The first part is visible, the second is invisible, the third part is visible, etc. Parts can be specified with lengths, percentages, or flexible lengths (expressed by the ''fr'' unit, as per - [[CSS3GRID]]). + [[css-values-5#fractions]]). The ''border-clip/normal'' value means that the border is not split, but shown normally. diff --git a/css-grid-1/Overview.bs b/css-grid-1/Overview.bs index f0ddd0bde66..ad6bfc3568c 100644 --- a/css-grid-1/Overview.bs +++ b/css-grid-1/Overview.bs @@ -1527,11 +1527,11 @@ Track Sizes
<>
- A non-negative dimension with the unit ''fr'' specifying the track's flex factor. + Specifies the track's flex factor. Each <>-sized track takes a share of the remaining space in proportion to its flex factor. For example, given a track listing of ''1fr 2fr'', the tracks will take up ⅓ and ⅔ of the leftover space, respectively. - See [[#fr-unit]] for more details. + See [[#flexible-tracks]] for more details. Note: If the sum of the flex factors is less than 1, they'll take up only a corresponding fraction of the leftover space, @@ -1835,22 +1835,19 @@ Interpolation/Combination of ''repeat()'' They otherwise combine discretely. -

-Flexible Lengths: the ''fr'' unit

+

+Flexible Tracks

- A flexible length or <> is a dimension - with the fr unit, - which represents a fraction of the leftover space in the grid container. - Tracks sized with ''fr'' units are called flexible tracks + Tracks sized using <> values are called flexible tracks as they flex in response to leftover space similar to how flex items with a zero base size fill space in a flex container. @@ -1861,45 +1858,6 @@ Flexible Lengths: the ''fr'' unit Each column or row's share of the leftover space can be computed as the column or row's <flex> * <leftover space> / <sum of all flex factors>. -
- <> values between 0fr and 1fr have a somewhat special behavior: - when the sum of the flex factors is less than 1, - they will take up less than 100% of the leftover space. - - A track’s <> value - is effectively a request for some proportion of the leftover space, - with ''1fr'' meaning “100% of the leftover space”; - then if the tracks in that axis are requesting more than 100% in total, - the requests are rebalanced to keep the same ratio but use up exactly 100% of it. - However, if the tracks request less than the full amount - (such as three tracks that are each ''.25fr'') - then they'll each get exactly what they request - (25% of the leftover space to each, - with the final 25% left unfilled). - See [[#algo-flex-tracks]] for the exact details - of how leftover space is distributed. - - This pattern is required for continuous behavior as ''fr'' values approach zero - (which means the tracks wants none of the leftover space). - Without this, a ''1fr'' track would take all of the leftover space; - but so would a ''0.1fr'' track, - and a ''0.01fr'' track, - etc., - until finally the value is small enough to underflow to zero - and the track suddenly takes up none of the leftover space. - With this behavior, - the track instead gradually takes less of the leftover space - as its flex factor shrinks below ''1fr'', - smoothly transitioning to taking none of the leftover space at zero. - - Unless this “partial fill” behavior is specifically what's desired, - authors should stick to values ≥ 1; - for example, using ''1fr'' and ''2fr'' is usually better - than using ''.33fr'' and ''.67fr'', - as they're more likely to behave as intended - if tracks are added or removed. -
- When the available space is infinite (which happens when the grid container’s width or height is indefinite), flex-sized grid tracks are sized to their contents while retaining their respective proportions. @@ -1910,10 +1868,6 @@ Flexible Lengths: the ''fr'' unit The maximum of those is used as the resolved ''1fr'' length (the flex fraction), which is then multiplied by each grid track’s flex factor to determine its final size. - Note: <> values are not <>s - (nor are they compatible with <>s, like some <> values), - so they cannot be represented in or combined with other unit types in ''calc()'' expressions. - -

-Flexible Lengths: the ''fr'' unit

+

+Flexible Tracks

- A flexible length or <> is a dimension - with the fr unit, - which represents a fraction of the leftover space in the grid container. - Tracks sized with ''fr'' units are called flexible tracks + Tracks sized using <> values are called flexible tracks as they flex in response to leftover space similar to how flex items with a zero base size fill space in a flex container. @@ -1962,45 +1959,6 @@ Flexible Lengths: the ''fr'' unit Each column or row's share of the leftover space can be computed as the column or row's <flex> * <leftover space> / <sum of all flex factors>. -
- <> values between 0fr and 1fr have a somewhat special behavior: - when the sum of the flex factors is less than 1, - they will take up less than 100% of the leftover space. - - A track’s <> value - is effectively a request for some proportion of the leftover space, - with ''1fr'' meaning “100% of the leftover space”; - then if the tracks in that axis are requesting more than 100% in total, - the requests are rebalanced to keep the same ratio but use up exactly 100% of it. - However, if the tracks request less than the full amount - (such as three tracks that are each ''.25fr'') - then they'll each get exactly what they request - (25% of the leftover space to each, - with the final 25% left unfilled). - See [[#algo-flex-tracks]] for the exact details - of how leftover space is distributed. - - This pattern is required for continuous behavior as ''fr'' values approach zero - (which means the tracks wants none of the leftover space). - Without this, a ''1fr'' track would take all of the leftover space; - but so would a ''0.1fr'' track, - and a ''0.01fr'' track, - etc., - until finally the value is small enough to underflow to zero - and the track suddenly takes up none of the leftover space. - With this behavior, - the track instead gradually takes less of the leftover space - as its flex factor shrinks below ''1fr'', - smoothly transitioning to taking none of the leftover space at zero. - - Unless this “partial fill” behavior is specifically what's desired, - authors should stick to values ≥ 1; - for example, using ''1fr'' and ''2fr'' is usually better - than using ''.33fr'' and ''.67fr'', - as they're more likely to behave as intended - if tracks are added or removed. -
- When the available space is infinite (which happens when the grid container’s width or height is indefinite), flex-sized grid tracks are sized to their contents while retaining their respective proportions. @@ -2011,10 +1969,6 @@ Flexible Lengths: the ''fr'' unit The maximum of those is used as the resolved ''1fr'' length (the flex fraction), which is then multiplied by each grid track’s flex factor to determine its final size. - Note: <> values are not <>s - (nor are they compatible with <>s, like some <> values), - so they cannot be represented in or combined with other unit types in ''calc()'' expressions. - + +

+Flexible lengths: the <> type

+ + Fraction values are non-negative <>s denoted by + <flex>. + The unit identifier is fr. + + These values specify + flexible lengths. + Each length defines a portion of a given space + which is specified by the context the type is used in. + + Note: <> values are not <>s + (nor are they compatible with <>s, like some <> values), + so they cannot be represented in or + combined with other unit typesin ''calc()'' expressions. + +
+ <> values between 0fr and 1fr have a somewhat special behavior: + when the sum of the flex factors is less than 1, + they will take up less than 100% of the leftover space. + + A <> value is effectively a request for some proportion of the leftover space, + with ''1fr'' meaning “100% of the leftover space”; + then, if the used space sums up to more than 100% of the available space, + the requested space is rebalanced to keep the same ratio + but use up exactly 100% of it. + However, if the sum is less than the full amount + (such as three times ''.25fr'') + then the requested space is exactly what's used + (25% of the leftover space for each fraction, + with the final 25% left unfilled). + + This pattern is required for continuous behavior as ''fr'' values approach zero + (which means the leftover space is not occupied by any fractions). + Without this, a ''1fr'' value would take all of the leftover space; + but so would a ''0.1fr'' value, + and a ''0.01fr'' value, + etc., + until finally the value is small enough to underflow to zero + and the fractions suddenly take up none of the leftover space. + With this behavior, + the fractions instead gradually take less of the leftover space + as their flex factor shrinks below ''1fr'', + smoothly transitioning to taking none of the leftover space at zero. + + Unless this “partial fill” behavior is specifically what's desired, + authors should stick to values ≥ 1; + for example, using ''1fr'' and ''2fr'' is usually better + than using ''.33fr'' and ''.67fr'', + as they're more likely to behave as intended + if fractions are added or removed. +
+ + Note: <> values are not <>s + (nor are they compatible with <>s, like some <> values), + so they cannot be represented in or combined with other unit types in ''calc()'' expressions. + + and Rachel Andrew and Jen Simmons who helped bridge the feedback gap between the CSS Working Group diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs index f92fa7be6f0..5efe272d5ec 100644 --- a/css-images-4/Overview.bs +++ b/css-images-4/Overview.bs @@ -1986,7 +1986,7 @@ Color Stop “Fixup” 
 		<image-1D> = <>
 		<> = stripes( <># )
-		<> = <> && [ <> | <> ]?
+		<> = <> && [ <> | <> ]?
The stripes() function defines a [=1D image=] @@ -2010,13 +2010,13 @@ Color Stop “Fixup”
Negative length values are invalid. -
<> +
<>
- A <> is evaluated as a fraction of the |total width| - relative to the total sum of <> entries in the function, - after subtracting the thickness of any non-<> entries + A <> is evaluated as a fraction of the |total width| + relative to the total sum of <> entries in the function, + after subtracting the thickness of any non-<> entries (flooring the subtraction result at zero). - If the sum of <> values is less than ''1fr'', + If the sum of <> values is less than ''1fr'', the result of the subtraction is multiplied by the sum's value before being distributed. @@ -2044,22 +2044,22 @@ Color Stop “Fixup” will instead give a 30px red stripe and 60px green stripe, followed by 100px of blue and then 210px of transparent. The 300px of leftover space is multiplied by .3, - the value of the sum of the <> values, + the value of the sum of the <> values, to obtain only 90px, which is then distributed in the 1:2 ratio - dictated by the <> values. + dictated by the <> values. - (This is similar to how [=flex layout=] deals with small <> sums on a line, + (This is similar to how [=flex layout=] deals with small <> sums on a line, and ensures smoothly continuous behavior - as the <> values approach zero.) + as the <> values approach zero.) The [=computed value=] of this function is an ordered list of stripes, each given as a [=computed color=] - and a thickness represented either a <> value + and a thickness represented either a <> value or a computed <> value.

-Flexible lengths: the <> type

+Flexible lengths: the <> type Fraction values are non-negative <>s denoted by <flex>. @@ -2908,17 +2908,17 @@ Flexible lengths: the <> type Each length defines a portion of a given space which is specified by the context the type is used in. - Note: <> values are not <>s + Note: <> values are not <>s (nor are they compatible with <>s, like some <> values), so they cannot be represented in or combined with other unit typesin ''calc()'' expressions.
- <> values between 0fr and 1fr have a somewhat special behavior: + <> values between 0fr and 1fr have a somewhat special behavior: when the sum of the flex factors is less than 1, they will take up less than 100% of the leftover space. - A <> value is effectively a request for some proportion of the leftover space, + A <> value is effectively a request for some proportion of the leftover space, with ''1fr'' meaning “100% of the leftover space”; then, if the used space sums up to more than 100% of the available space, the requested space is rebalanced to keep the same ratio @@ -2950,7 +2950,7 @@ Flexible lengths: the <> type if fractions are added or removed.
- Note: <> values are not <>s + Note: <> values are not <>s (nor are they compatible with <>s, like some <> values), so they cannot be represented in or combined with other unit types in ''calc()'' expressions. @@ -3027,7 +3027,7 @@ Mathematical Expressions * <>, * <>, * <