From 1e657201e7dfe81a1f571d54c69d802783384783 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Mon, 26 Sep 2022 11:10:33 +1000 Subject: [PATCH 1/3] contain-intrinsic-width-height --- .../web/css/contain-intrinsic-height/index.md | 68 +++++++++++++++++++ .../web/css/contain-intrinsic-size/index.md | 18 ++--- .../web/css/contain-intrinsic-width/index.md | 68 +++++++++++++++++++ 3 files changed, 146 insertions(+), 8 deletions(-) create mode 100644 files/en-us/web/css/contain-intrinsic-height/index.md create mode 100644 files/en-us/web/css/contain-intrinsic-width/index.md diff --git a/files/en-us/web/css/contain-intrinsic-height/index.md b/files/en-us/web/css/contain-intrinsic-height/index.md new file mode 100644 index 000000000000000..096fc318d7219c6 --- /dev/null +++ b/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; + +/* values */ +contain-intrinsic-height: 1000px; +contain-intrinsic-height: 10rem; + +/* auto */ +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. +- `` + - : The element has the specified height ({{cssxref("<length>")}}). +- `auto ` + - : 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 ``. + +## 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 ` 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 `` will be used). + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} 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 80c10d79ac35cbf..2064177c51168f0 100644 --- a/files/en-us/web/css/contain-intrinsic-size/index.md +++ b/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; + /* 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 ` 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 hence may have a remembered value. +The `auto ` 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 `` will be used). ## Formal definition diff --git a/files/en-us/web/css/contain-intrinsic-width/index.md b/files/en-us/web/css/contain-intrinsic-width/index.md new file mode 100644 index 000000000000000..886fe21a4723abe --- /dev/null +++ b/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; + +/* values */ +contain-intrinsic-width: 1000px; +contain-intrinsic-width: 10rem; + +/* auto */ +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. +- `` + - : The element has the specified width ({{cssxref("<length>")}}). +- `auto ` + - : 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 ``. + +## 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 ` 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 `` will be used). + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} From c782a4a795cbef9082435bd256d911e25decf5f5 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Mon, 26 Sep 2022 12:45:56 +1000 Subject: [PATCH 2/3] CSS containment - link to property used to manually set containment --- files/en-us/web/css/css_containment/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_containment/index.md b/files/en-us/web/css/css_containment/index.md index 9bfbd9052c9aefa..8f71506022daf91 100644 --- a/files/en-us/web/css/css_containment/index.md +++ b/files/en-us/web/css/css_containment/index.md @@ -92,7 +92,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 From 923ccaca0f678dff6bd36eaf980a64e99adcbc79 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Mon, 26 Sep 2022 13:06:42 +1000 Subject: [PATCH 3/3] CSS containment - introduce content visibility --- files/en-us/web/css/content-visibility/index.md | 1 + files/en-us/web/css/css_containment/index.md | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/content-visibility/index.md b/files/en-us/web/css/content-visibility/index.md index 6cb4bd22840733c..ae1f40e29d8e22c 100644 --- a/files/en-us/web/css/content-visibility/index.md +++ b/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) diff --git a/files/en-us/web/css/css_containment/index.md b/files/en-us/web/css/css_containment/index.md index 8f71506022daf91..95df20fc35d7414 100644 --- a/files/en-us/web/css/css_containment/index.md +++ b/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