contain-intrinsic-width and contain-intrinsic-height

files/en-us/web/css/contain-intrinsic-height/index.md

@@ -0,0 +1,68 @@
+---
+title: contain-intrinsic-height
+slug: Web/CSS/contain-intrinsic-height
+browser-compat: css.properties.contain-intrinsic-height
+---
+
+{{CSSRef}}
+
+The **`contain-intrinsic-length`** [CSS](/en-US/docs/Web/CSS) property sets the height 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).
+
+## Syntax
+
+```css
+/* Keyword values */
+contain-intrinsic-height: none;
+
+/* <length> values */
+contain-intrinsic-height: 1000px;
+contain-intrinsic-height: 10rem;
+
+/* auto <length> */
+contain-intrinsic-height: auto 300px;
+
+/* Global values */
+contain-intrinsic-height: inherit;
+contain-intrinsic-height: initial;
+contain-intrinsic-height: revert;
+contain-intrinsic-height: unset;
+```
+
+### Values
+
+The following values may be specified for an element.
+
+- `none`
+  - : The element has no intrinsic height.
+- `<length>`
+  - : The element has the specified height ({{cssxref("&lt;length&gt;")}}).
+- `auto <length>`
+  - : A remembered value of the "normally rendered" element height if one exists and the element is skipping its contents (for example, when it is offscreen); otherwise the specified `<length>`.
+
+## Description
+
+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), and may also be set using the [`contain-intrinsic-size`](/en-US/docs/Web/CSS/contain-intrinsic-size) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties).
+
+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 height (or width).
+The `contain-intrinsic-height` property allows authors to specify an appropriate value to be used as the height for layout.
+
+The `auto <length>` value allows the height of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified height when the element is skipping its contents.
+This allows offscreen elements with [`content-visibility: auto`](/en-US/docs/Web/CSS/content-visibility) to benefit from size containment without developers having to be as precise in their estimates of element size.
+The remembered value is not used if the child elements are being rendered (if size containment is enabled, the `<length>` will be used).
+
+## Formal definition
+
+{{cssinfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/css/contain-intrinsic-size/index.md

@@ -8,18 +8,19 @@ browser-compat: css.properties.contain-intrinsic-size
 
 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`
+- [`contain-intrinsic-width`](/en-US/docs/Web/CSS/contain-intrinsic-width)
+- [`contain-intrinsic-height`](/en-US/docs/Web/CSS/contain-intrinsic-height)
 
 ## Syntax
 
 ```css
+/* Keyword values */
+contain-intrinsic-width: none;
+
 /* <length> values */
 contain-intrinsic-size: 1000px;
 contain-intrinsic-size: 10rem;
@@ -55,14 +56,15 @@ If a single value is specified, it applies to both width and height.
 
 ## Description
 
+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).
+
 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` 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 <length>` 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 `<length>`.
-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.
+The `auto <length>` value allows the size of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified length when the element is skipping its contents.
+This allows offscreen elements with [`content-visibility: auto`](/en-US/docs/Web/CSS/content-visibility) to benefit from size containment without developers having to be as precise in their estimates of element size.
+The remembered value is not used if the child elements are being rendered (if size containment is enabled, the `<length>` will be used).
 
 ## Formal definition
 

files/en-us/web/css/contain-intrinsic-width/index.md

@@ -0,0 +1,68 @@
+---
+title: contain-intrinsic-width
+slug: Web/CSS/contain-intrinsic-width
+browser-compat: css.properties.contain-intrinsic-width
+---
+
+{{CSSRef}}
+
+The **`contain-intrinsic-width`** [CSS](/en-US/docs/Web/CSS) property sets the width 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).
+
+## Syntax
+
+```css
+/* Keyword values */
+contain-intrinsic-width: none;
+
+/* <length> values */
+contain-intrinsic-width: 1000px;
+contain-intrinsic-width: 10rem;
+
+/* auto <length> */
+contain-intrinsic-width: auto 300px;
+
+/* Global values */
+contain-intrinsic-width: inherit;
+contain-intrinsic-width: initial;
+contain-intrinsic-width: revert;
+contain-intrinsic-width: unset;
+```
+
+### Values
+
+The following values may be specified for an element.
+
+- `none`
+  - : The element has no intrinsic width.
+- `<length>`
+  - : The element has the specified width ({{cssxref("&lt;length&gt;")}}).
+- `auto <length>`
+  - : A remembered value of the "normally rendered" element width if one exists and the element is skipping its contents (for example, when it is offscreen); otherwise the specified `<length>`.
+
+## Description
+
+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), and may also be set using the [`contain-intrinsic-size`](/en-US/docs/Web/CSS/contain-intrinsic-size) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties).
+
+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-width` property allows authors to specify an appropriate value to be used as the width for layout.
+
+The `auto <length>` value allows the width of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified width when the element is skipping its contents.
+This allows offscreen elements with [`content-visibility: auto`](/en-US/docs/Web/CSS/content-visibility) to benefit from size containment without developers having to be as precise in their estimates of element size.
+The remembered value is not used if the child elements are being rendered (if size containment is enabled, the `<length>` will be used).
+
+## Formal definition
+
+{{cssinfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/css/content-visibility/index.md

@@ -106,4 +106,5 @@ The following example shows that it is possible to manage visibility in script.
 
 ## See also
 
+- [CSS Containment](/en-US/docs/Web/CSS/CSS_Containment)
 - [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/) (web.dev)

files/en-us/web/css/css_containment/index.md

@@ -13,7 +13,13 @@ browser-compat:
 ---
 
 {{CSSRef}}
-The aim of the CSS Containment specification is to improve performance of web pages by allowing developers to isolate a subtree of the page from the rest of the page. If the browser knows that a part of the page is independent, rendering can be optimized and performance improved. The specification defines a single CSS property {{cssxref("contain")}}. This document describes the basic aims of the specification.
+The aim of the CSS Containment specification is to improve performance of web pages by allowing developers to isolate a subtree of the page from the rest of the page. If the browser knows that a part of the page is independent, rendering can be optimized and performance improved.
+
+In addition, it lets developers indicate whether or not an element should render its contents at all, and whether it should render its contents when it is offscreen.
+This allows the user agent to apply containment on elements when appropriate, and potentially defer layout and rendering until it is actually needed.
+
+The specification defines the CSS properties {{cssxref("contain")}} and {{cssxref("content-visibility")}}.
+This document describes the basic aims of the specification.
 
 ## Basic example
 
@@ -92,7 +98,8 @@ article {
 
 Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.
 
-If you turn on `contain: size` you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.
+If you turn on `contain: size` you need to also specify the size of the element you have applied this to using [`contain-intrinsic-size`](/en-US/docs/Web/CSS/contain-intrinsic-size) (or the equivalent longhand properties).
+It will end up being zero-sized in most cases, if you don't manually give it a size.
 
 ### Style containment