From 6d6f03f3be155bb74f651a51ae2dfa6da187dca4 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 20 Sep 2022 16:19:54 +1000 Subject: [PATCH 1/9] contain-intrinsic-size - improve docs --- .../web/css/contain-intrinsic-size/index.md | 52 +++++++++++++++++-- .../web/css/shorthand_properties/index.md | 1 + 2 files changed, 50 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/contain-intrinsic-size/index.md b/files/en-us/web/css/contain-intrinsic-size/index.md index 4876120eac8d349..08772723519d32d 100644 --- a/files/en-us/web/css/contain-intrinsic-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-size/index.md @@ -6,7 +6,16 @@ browser-compat: css.properties.contain-intrinsic-size {{CSSRef}} -The **`contain-intrinsic-size`** [CSS](/en-US/docs/Web/CSS) property controls the natural size of an element specified by [`content-visibility`](/en-US/docs/Web/CSS/content-visibility). +The **`contain-intrinsic-size`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the size of an element that will be used for layout when it is subject to [size containment](/en-US/docs/Web/CSS/CSS_Containment#size_containment). + +The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](/en-US/docs/Web/CSS/contain) and [`content-visibility`](/en-US/docs/Web/CSS/content-visibility). + +## Constituent properties + +This property is a shorthand for the following CSS properties: + +- `contain-intrinsic-width` +- `contain-intrinsic-height` ## Syntax @@ -15,8 +24,14 @@ The **`contain-intrinsic-size`** [CSS](/en-US/docs/Web/CSS) property controls th contain-intrinsic-size: 1000px; contain-intrinsic-size: 10rem; -/* value */ -contain-intrinsic-size: 10%; +/* width | height */ +contain-intrinsic-size: 1000px 1.5em; + +/* auto */ +contain-intrinsic-size: auto 300px; + +/* auto width | auto height */ +contain-intrinsic-size: auto 300px auto 4rem; /* Global values */ contain-intrinsic-size: inherit; @@ -25,6 +40,37 @@ contain-intrinsic-size: revert; contain-intrinsic-size: unset; ``` +### Values + +Either one or two of the following values may be specified for an element. +If two values are specified the first value applies to the width, and the second is the height. +If a single value is specified it applies to both width and height. + +- `none` + - : The element has no intrinsic size in the given dimension(s). +- `` + - : The element has the specified {{cssxref("<length>")}} in the given dimension(s). +- `auto ` + - : A remembered value of the "normally rendered" element size if one exists; otherwise the specified ``. + +## Description + +Size containment allows a user agent to layout an element as though it had a fixed size, avoiding the computational cost of rendering the child elements to determine the actual size. +By default, size containment assumes that elements have no contents, and hence may collapse the layout to zero inner height and width. +The `contain-intrinsic-size` allows authors to specify an appropriate value to be used as the size for layout. + +Determining the size for the element when it is rendered with all its child elements can be difficult, and odd layout effects may result if an incorrect value is used. +This can be mitigated by specifying the `auto ` value, which saves the normal "fully rendered" size of the element (if the element is ever outside of size containment) and uses it as the intrinsic size. +In particular this is recommended with [`content-visibility: auto`](/en-US/docs/Web/CSS/content-visibility) as elements are only in size containment when offscreen, and will hence may have a remembered value. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/css/shorthand_properties/index.md b/files/en-us/web/css/shorthand_properties/index.md index d0a8739b96a0560..63632009bd2bc07 100644 --- a/files/en-us/web/css/shorthand_properties/index.md +++ b/files/en-us/web/css/shorthand_properties/index.md @@ -195,6 +195,7 @@ See [Cascade and inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_ - {{cssxref("border-width")}} - {{cssxref("column-rule")}} - {{cssxref("columns")}} + - {{cssxref("contain-intrinsic-size")}} - {{cssxref("flex")}} - {{cssxref("flex-flow")}} - {{cssxref("font")}} From 4add3e8e11bfc02fa6c6f978a5137f6a6c62e7a0 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Wed, 21 Sep 2022 08:08:22 +1000 Subject: [PATCH 2/9] Update files/en-us/web/css/contain-intrinsic-size/index.md Co-authored-by: Estelle Weyl --- files/en-us/web/css/contain-intrinsic-size/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/contain-intrinsic-size/index.md b/files/en-us/web/css/contain-intrinsic-size/index.md index 08772723519d32d..00dbd3e1db4a06b 100644 --- a/files/en-us/web/css/contain-intrinsic-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-size/index.md @@ -55,7 +55,7 @@ If a single value is specified it applies to both width and height. ## Description -Size containment allows a user agent to layout an element as though it had a fixed size, avoiding the computational cost of rendering the child elements to determine the actual size. +Size containment allows a user agent to layout an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience). By default, size containment assumes that elements have no contents, and hence may collapse the layout to zero inner height and width. The `contain-intrinsic-size` allows authors to specify an appropriate value to be used as the size for layout. From d891ea11e26e85e5b019591fc461470cc8c7ab1f Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Wed, 21 Sep 2022 08:39:21 +1000 Subject: [PATCH 3/9] Update files/en-us/web/css/contain-intrinsic-size/index.md --- files/en-us/web/css/contain-intrinsic-size/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/contain-intrinsic-size/index.md b/files/en-us/web/css/contain-intrinsic-size/index.md index 00dbd3e1db4a06b..305999c0b6947a3 100644 --- a/files/en-us/web/css/contain-intrinsic-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-size/index.md @@ -56,7 +56,7 @@ If a single value is specified it applies to both width and height. ## Description Size containment allows a user agent to layout an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience). -By default, size containment assumes that elements have no contents, and hence may collapse the layout to zero inner height and width. +By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height. The `contain-intrinsic-size` allows authors to specify an appropriate value to be used as the size for layout. Determining the size for the element when it is rendered with all its child elements can be difficult, and odd layout effects may result if an incorrect value is used. From 734ca4d25e846f48439cbe259c98b71259e995ec Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Wed, 21 Sep 2022 08:39:52 +1000 Subject: [PATCH 4/9] Update files/en-us/web/css/contain-intrinsic-size/index.md Co-authored-by: Estelle Weyl --- files/en-us/web/css/contain-intrinsic-size/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/contain-intrinsic-size/index.md b/files/en-us/web/css/contain-intrinsic-size/index.md index 305999c0b6947a3..397323311681654 100644 --- a/files/en-us/web/css/contain-intrinsic-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-size/index.md @@ -43,7 +43,7 @@ contain-intrinsic-size: unset; ### Values Either one or two of the following values may be specified for an element. -If two values are specified the first value applies to the width, and the second is the height. +If two values are specified the first value applies to the width, and the second to the height. If a single value is specified it applies to both width and height. - `none` From 1a0d10591d2a7d044797338ef9a1c02548f40b3c Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Wed, 21 Sep 2022 08:59:26 +1000 Subject: [PATCH 5/9] Simplify language --- files/en-us/web/css/contain-intrinsic-size/index.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/contain-intrinsic-size/index.md b/files/en-us/web/css/contain-intrinsic-size/index.md index 397323311681654..a2d27391494bd23 100644 --- a/files/en-us/web/css/contain-intrinsic-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-size/index.md @@ -51,7 +51,7 @@ If a single value is specified it applies to both width and height. - `` - : The element has the specified {{cssxref("<length>")}} in the given dimension(s). - `auto ` - - : A remembered value of the "normally rendered" element size if one exists; otherwise the specified ``. + - : A remembered value of the "normally rendered" element size if one exists and the element is skipping its contents (for example, when it is offscreen); otherwise the specified ``. ## Description @@ -59,9 +59,10 @@ Size containment allows a user agent to layout an element as though it had a fix By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height. The `contain-intrinsic-size` allows authors to specify an appropriate value to be used as the size for layout. -Determining the size for the element when it is rendered with all its child elements can be difficult, and odd layout effects may result if an incorrect value is used. -This can be mitigated by specifying the `auto ` value, which saves the normal "fully rendered" size of the element (if the element is ever outside of size containment) and uses it as the intrinsic size. -In particular this is recommended with [`content-visibility: auto`](/en-US/docs/Web/CSS/content-visibility) as elements are only in size containment when offscreen, and will hence may have a remembered value. +Determining the correct size to specify for an element can be difficult, and odd layout effects may result if an incorrect value is used. +The `auto ` value can help. +If the element is ever rendered with all its child elements (if the element is ever outside of size containment) then setting `auto` saves the size and can use it instead of the ``. +In particular this is recommended with [`content-visibility: auto`](/en-US/docs/Web/CSS/content-visibility) as elements are only in size containment when offscreen, and will hence may have a remembered value. ## Formal definition From b556ec879800819e47a7ea916d29fb0a677c14ef Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Fri, 23 Sep 2022 14:24:47 +0200 Subject: [PATCH 6/9] Update files/en-us/web/css/contain-intrinsic-size/index.md Co-authored-by: Joshua Chen --- files/en-us/web/css/contain-intrinsic-size/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/contain-intrinsic-size/index.md b/files/en-us/web/css/contain-intrinsic-size/index.md index a2d27391494bd23..006b2a6d836ad3a 100644 --- a/files/en-us/web/css/contain-intrinsic-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-size/index.md @@ -43,8 +43,8 @@ contain-intrinsic-size: unset; ### Values Either one or two of the following values may be specified for an element. -If two values are specified the first value applies to the width, and the second to the height. -If a single value is specified it applies to both width and height. +If two values are specified, the first value applies to the width, and the second to the height. +If a single value is specified, it applies to both width and height. - `none` - : The element has no intrinsic size in the given dimension(s). From f8b214e6e52012d6987ed371097acc51fb0658ae Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Fri, 23 Sep 2022 14:25:07 +0200 Subject: [PATCH 7/9] Update files/en-us/web/css/contain-intrinsic-size/index.md Co-authored-by: Joshua Chen --- files/en-us/web/css/contain-intrinsic-size/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/contain-intrinsic-size/index.md b/files/en-us/web/css/contain-intrinsic-size/index.md index 006b2a6d836ad3a..3edd0fbca024ac4 100644 --- a/files/en-us/web/css/contain-intrinsic-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-size/index.md @@ -61,7 +61,7 @@ The `contain-intrinsic-size` allows authors to specify an appropriate value to b Determining the correct size to specify for an element can be difficult, and odd layout effects may result if an incorrect value is used. The `auto ` value can help. -If the element is ever rendered with all its child elements (if the element is ever outside of size containment) then setting `auto` saves the size and can use it instead of the ``. +If the element is ever rendered with all its child elements (if the element is ever outside of size containment), then setting `auto` saves the size, which can be used instead of the ``. In particular this is recommended with [`content-visibility: auto`](/en-US/docs/Web/CSS/content-visibility) as elements are only in size containment when offscreen, and will hence may have a remembered value. ## Formal definition From e85b77fcc427e7663339250cf04d1cb05294215a Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Fri, 23 Sep 2022 14:25:20 +0200 Subject: [PATCH 8/9] Update files/en-us/web/css/contain-intrinsic-size/index.md Co-authored-by: Joshua Chen --- files/en-us/web/css/contain-intrinsic-size/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/contain-intrinsic-size/index.md b/files/en-us/web/css/contain-intrinsic-size/index.md index 3edd0fbca024ac4..6e17e0a0f0221a9 100644 --- a/files/en-us/web/css/contain-intrinsic-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-size/index.md @@ -62,7 +62,7 @@ The `contain-intrinsic-size` allows authors to specify an appropriate value to b Determining the correct size to specify for an element can be difficult, and odd layout effects may result if an incorrect value is used. The `auto ` value can help. If the element is ever rendered with all its child elements (if the element is ever outside of size containment), then setting `auto` saves the size, which can be used instead of the ``. -In particular this is recommended with [`content-visibility: auto`](/en-US/docs/Web/CSS/content-visibility) as elements are only in size containment when offscreen, and will hence may have a remembered value. +In particular, this is recommended with [`content-visibility: auto`](/en-US/docs/Web/CSS/content-visibility), as elements are only in size containment when offscreen, and hence may have a remembered value. ## Formal definition From 3635b6e5d8462682340d1fa6c5c03b23a3d582c8 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Fri, 23 Sep 2022 14:27:25 +0200 Subject: [PATCH 9/9] Update files/en-us/web/css/contain-intrinsic-size/index.md --- files/en-us/web/css/contain-intrinsic-size/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/contain-intrinsic-size/index.md b/files/en-us/web/css/contain-intrinsic-size/index.md index 6e17e0a0f0221a9..80c10d79ac35cbf 100644 --- a/files/en-us/web/css/contain-intrinsic-size/index.md +++ b/files/en-us/web/css/contain-intrinsic-size/index.md @@ -57,7 +57,7 @@ If a single value is specified, it applies to both width and height. Size containment allows a user agent to layout an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience). By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height. -The `contain-intrinsic-size` allows authors to specify an appropriate value to be used as the size for layout. +The `contain-intrinsic-size` property allows authors to specify an appropriate value to be used as the size for layout. Determining the correct size to specify for an element can be difficult, and odd layout effects may result if an incorrect value is used. The `auto ` value can help.