From 925b2bd8beeae6ce8237863637bcd28ccbb8d47f Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Sat, 28 Oct 2023 01:15:47 +0530 Subject: [PATCH] fix(css): add fit-content value to size properties (#29849) fix(css): add fit-content value to size properteis --- files/en-us/web/css/block-size/index.md | 1 + files/en-us/web/css/height/index.md | 9 +++++---- files/en-us/web/css/inline-size/index.md | 1 + files/en-us/web/css/max-block-size/index.md | 5 ++++- files/en-us/web/css/max-height/index.md | 5 ++++- files/en-us/web/css/max-inline-size/index.md | 1 + files/en-us/web/css/max-width/index.md | 5 ++++- files/en-us/web/css/min-block-size/index.md | 1 + files/en-us/web/css/min-height/index.md | 5 ++++- files/en-us/web/css/min-inline-size/index.md | 1 + files/en-us/web/css/min-width/index.md | 5 ++++- files/en-us/web/css/width/index.md | 5 ++++- 12 files changed, 34 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/css/block-size/index.md b/files/en-us/web/css/block-size/index.md index 02c66bd350337fd..b62e72ef0278fb3 100644 --- a/files/en-us/web/css/block-size/index.md +++ b/files/en-us/web/css/block-size/index.md @@ -26,6 +26,7 @@ block-size: 75%; /* Keyword values */ block-size: max-content; block-size: min-content; +block-size: fit-content; block-size: fit-content(20em); block-size: auto; diff --git a/files/en-us/web/css/height/index.md b/files/en-us/web/css/height/index.md index b106563746ad7ad..cfc45eb534a1d23 100644 --- a/files/en-us/web/css/height/index.md +++ b/files/en-us/web/css/height/index.md @@ -27,6 +27,7 @@ height: 75%; /* Keyword values */ height: max-content; height: min-content; +height: fit-content; height: fit-content(20em); height: auto; @@ -51,11 +52,11 @@ height: unset; - `min-content` - : The intrinsic minimum height. - `fit-content` - - : Box will use the available space, but never more than `max-content` -- `fit-content({{cssxref("<length-percentage>")}})` - - : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, ))` + - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. +- `fit-content({{cssxref("<length-percentage>")}})` {{Experimental_Inline}} + - : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, ))`. - {{cssxref("clamp", "clamp()")}} - - : Enables selecting a middle value within a range of values between a defined minimum and maximum + - : Enables selecting a middle value within a range of values between a defined minimum and maximum. ## Accessibility concerns diff --git a/files/en-us/web/css/inline-size/index.md b/files/en-us/web/css/inline-size/index.md index bc90f99585ea6e9..488fd230e739620 100644 --- a/files/en-us/web/css/inline-size/index.md +++ b/files/en-us/web/css/inline-size/index.md @@ -26,6 +26,7 @@ inline-size: 75%; /* Keyword values */ inline-size: max-content; inline-size: min-content; +inline-size: fit-content; inline-size: fit-content(20em); inline-size: auto; diff --git a/files/en-us/web/css/max-block-size/index.md b/files/en-us/web/css/max-block-size/index.md index 336608de81b3e99..29a0258c11a2f55 100644 --- a/files/en-us/web/css/max-block-size/index.md +++ b/files/en-us/web/css/max-block-size/index.md @@ -31,6 +31,7 @@ max-block-size: 75%; max-block-size: none; max-block-size: max-content; max-block-size: min-content; +max-block-size: fit-content; max-block-size: fit-content(20em); /* Global values */ @@ -55,7 +56,9 @@ The `max-block-size` property's value can be any value that's legal for the {{cs - : The intrinsic preferred `max-block-size`. - `min-content` - : The intrinsic minimum `max-block-size`. -- `fit-content({{cssxref("<length-percentage>")}})` +- `fit-content` + - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. +- `fit-content({{cssxref("<length-percentage>")}})` {{Experimental_Inline}} - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`. ### How writing-mode affects directionality diff --git a/files/en-us/web/css/max-height/index.md b/files/en-us/web/css/max-height/index.md index 883620836b1c9e7..660eba714cc8bb4 100644 --- a/files/en-us/web/css/max-height/index.md +++ b/files/en-us/web/css/max-height/index.md @@ -26,6 +26,7 @@ max-height: 75%; max-height: none; max-height: max-content; max-height: min-content; +max-height: fit-content; max-height: fit-content(20em); /* Global values */ @@ -48,7 +49,9 @@ max-height: unset; - : The intrinsic preferred `max-height`. - `min-content` - : The intrinsic minimum `max-height`. -- `fit-content({{cssxref("<length-percentage>")}})` +- `fit-content` + - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. +- `fit-content({{cssxref("<length-percentage>")}})` {{Experimental_Inline}} - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`. ## Accessibility concerns diff --git a/files/en-us/web/css/max-inline-size/index.md b/files/en-us/web/css/max-inline-size/index.md index 7c6b4e433edd7b3..ab7557495c5e9f5 100644 --- a/files/en-us/web/css/max-inline-size/index.md +++ b/files/en-us/web/css/max-inline-size/index.md @@ -27,6 +27,7 @@ max-inline-size: 75%; max-inline-size: none; max-inline-size: max-content; max-inline-size: min-content; +max-inline-size: fit-content; max-inline-size: fit-content(20em); /* Global values */ diff --git a/files/en-us/web/css/max-width/index.md b/files/en-us/web/css/max-width/index.md index 3db0adda83911e6..8667c64f89bc4fb 100644 --- a/files/en-us/web/css/max-width/index.md +++ b/files/en-us/web/css/max-width/index.md @@ -26,6 +26,7 @@ max-width: 75%; max-width: none; max-width: max-content; max-width: min-content; +max-width: fit-content; max-width: fit-content(20em); /* Global values */ @@ -48,7 +49,9 @@ max-width: unset; - : The intrinsic preferred `max-width`. - `min-content` - : The intrinsic minimum `max-width`. -- `fit-content({{cssxref("<length-percentage>")}})` +- `fit-content` + - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. +- `fit-content({{cssxref("<length-percentage>")}})` {{Experimental_Inline}} - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`. ## Accessibility concerns diff --git a/files/en-us/web/css/min-block-size/index.md b/files/en-us/web/css/min-block-size/index.md index 065d41feaffb848..3c0b0021341b76a 100644 --- a/files/en-us/web/css/min-block-size/index.md +++ b/files/en-us/web/css/min-block-size/index.md @@ -26,6 +26,7 @@ min-block-size: 10%; /* Keyword values */ min-block-size: max-content; min-block-size: min-content; +min-block-size: fit-content; min-block-size: fit-content(20em); /* Global values */ diff --git a/files/en-us/web/css/min-height/index.md b/files/en-us/web/css/min-height/index.md index 64b5212d76575d3..618fff2f1b736f8 100644 --- a/files/en-us/web/css/min-height/index.md +++ b/files/en-us/web/css/min-height/index.md @@ -25,6 +25,7 @@ min-height: 10%; /* Keyword values */ min-height: max-content; min-height: min-content; +min-height: fit-content; min-height: fit-content(20em); /* Global values */ @@ -47,7 +48,9 @@ min-height: unset; - : The intrinsic preferred `min-height`. - `min-content` - : The intrinsic minimum `min-height`. -- `fit-content({{cssxref("<length-percentage>")}})` +- `fit-content` + - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. +- `fit-content({{cssxref("<length-percentage>")}})` {{Experimental_Inline}} - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`. ## Formal definition diff --git a/files/en-us/web/css/min-inline-size/index.md b/files/en-us/web/css/min-inline-size/index.md index e7e08f58460abb5..05da029c4a4813b 100644 --- a/files/en-us/web/css/min-inline-size/index.md +++ b/files/en-us/web/css/min-inline-size/index.md @@ -24,6 +24,7 @@ min-inline-size: 10%; /* Keyword values */ min-inline-size: max-content; min-inline-size: min-content; +min-inline-size: fit-content; min-inline-size: fit-content(20em); /* Global values */ diff --git a/files/en-us/web/css/min-width/index.md b/files/en-us/web/css/min-width/index.md index 24da114279e345c..35559cc11d5dcf1 100644 --- a/files/en-us/web/css/min-width/index.md +++ b/files/en-us/web/css/min-width/index.md @@ -25,6 +25,7 @@ min-width: 10%; /* Keyword values */ min-width: max-content; min-width: min-content; +min-width: fit-content; min-width: fit-content(20em); /* Global values */ @@ -47,7 +48,9 @@ min-width: unset; - : The intrinsic preferred `min-width`. - `min-content` - : The intrinsic minimum `min-width`. -- `fit-content({{cssxref("<length-percentage>")}})` +- `fit-content` + - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. +- `fit-content({{cssxref("<length-percentage>")}})` {{Experimental_Inline}} - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`. ## Formal definition diff --git a/files/en-us/web/css/width/index.md b/files/en-us/web/css/width/index.md index 8192422126111d2..442fd3852a0671a 100644 --- a/files/en-us/web/css/width/index.md +++ b/files/en-us/web/css/width/index.md @@ -29,6 +29,7 @@ width: 75%; /* Keyword values */ width: max-content; width: min-content; +width: fit-content; width: fit-content(20em); width: auto; @@ -52,7 +53,9 @@ width: unset; - : The intrinsic preferred width. - `min-content` - : The intrinsic minimum width. -- `fit-content({{cssxref("<length-percentage>")}})` +- `fit-content` + - : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`. +- `fit-content({{cssxref("<length-percentage>")}})` {{Experimental_Inline}} - : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, ))`. ## Accessibility concerns