Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

CSS > CSS containment > Flashcards

CSS containment Flashcards

1
Q

What does CSS containment do?

A

CSS containment improves the performance of web pages by allowing the browser 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 from the rest of the content, rendering can be optimized and performance improved.

The contain and content-visibility properties enable developers to inform user agents whether or not an element should render its contents at all, and whether it should render its contents when it is offscreen. The user agent then applies containment to elements when appropriate, potentially deferring layout and rendering until needed.

“Using CSS containment - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 18, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

contain CSS property

A

The contain CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree. Containment enables isolating a subsection of the DOM, providing performance benefits by limiting calculations of layout, style, paint, size, or any combination to a DOM subtree rather than the entire page. Containment can also be used to scope CSS counters and quotes.

Note: using layout, paint, strict or content values for this property creates:

Syntax

/* Keyword values */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: inline-size;
contain: layout;
contain: style;
contain: paint;

/* Multiple keywords */
contain: size paint;
contain: size layout paint;
contain: inline-size layout;

Values

The contain property can have any of the following values:

  • The keyword none or
  • One or more of the space-separated keywords size (or inline-size), layout, style, and paint in any order or
  • One of the shorthand values strict or content

The keywords have the following meanings:

  • none - The element renders as normal, with no containment applied.
  • strict - All containment rules are applied to the element. This is equivalent to contain: size layout paint style.
  • content - All containment rules except size are applied to the element. This is equivalent to contain: layout paint style.
  • size - Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements. This value cannot be combined with inline-size.
  • inline-size - Inline size containment is applied to the element. The inline size of the element can be computed in isolation, ignoring the child elements. This value cannot be combined with size.
  • layout - The internal layout of the element is isolated from the rest of the page. This means nothing outside the element affects its internal layout, and vice versa.
  • style - For properties that can affect more than just an element and its descendants, the effects don’t escape the containing element. Counters and quotes are scoped to the element and its contents.
  • paint - Descendants of the element don’t display outside its bounds. If the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. If a descendant overflows the containing element’s bounds, then that descendant will be clipped to the containing element’s border-box.

“contain - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 19, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Explain contain: paint;

A

Paint containment is achieved with

contain: paint;

Applying that CSS rule to an element will prevent descendants of the element from displaying outside its bounds.
If the element’s containing box is offscreen, the browser does not need to paint its contained elements.

Example:

The following example shows how to use contain: paint to prevent an element’s descendants from painting outside of its bounds.

CSS

div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  font-size: 20px;
}

HTML

<div style="contain: paint">
  <p>This text will be clipped to the bounds of the box.</p>
</div>
<div>
  <p>This text will not be clipped to the bounds of the box.</p>
</div>

“Paint containment” (MDN Web Docs). Retrieved April 19, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Explain contain: layout;

A

Consider the example below which shows how elements behave with and without layout containment applied:

HTML

<div class="card" style="contain: layout;">
  <h2>Card 1</h2>
  <div class="fixed"><p>Fixed box 1</p></div>
  <div class="float"><p>Float box 1</p></div>
</div>
<div class="card">
  <h2>Card 2</h2>
  <div class="fixed"><p>Fixed box 2</p></div>
  <div class="float"><p>Float box 2</p></div>
</div>
<div class="card">
  <h2>Card 3</h2>
  <!-- ... -->
</div>

CSS

.card {
  width: 70%;
  height: 90px;
}

.fixed {
  position: fixed;
  right: 10px;
  top: 10px;
  background: coral;
}

.float {
  float: left;
  margin: 10px;
  background: aquamarine;
}

The first card has layout containment applied, and its layout is isolated from the rest of the page. We can reuse this card in other places on the page without worrying about layout recalculation of the other elements. If floats overlap the card bounds, elements on the rest of the page are not affected. When the browser recalculates the containing element’s subtree, only that element is recalculated. Nothing outside of the contained element needs to be recalculated. Additionally, the fixed box uses the card as a layout container to position itself.

The second and third cards have no containment. The layout context for the fixed box in the second card is the root element so the fixed box is positioned in the top right corner of the page. A float overlaps the second card’s bounds causing the third card to have unexpected layout shift that’s visible in the positioning of the <h2> element. When recalculation occurs, it is not limited to a container. This impacts performance and interferes with the rest of the page layout.

“Layout containment” (MDN Web Docs). Retrieved April 20, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Explain contain: style;

A

Style containment scopes counters and quotes to the contained element. For CSS counters, the counter-increment and counter-set properties are scoped to the element as if the element is at the root of the document.

“Style containment” (MDN Web Docs). Retrieved April 20, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

contain-intrinsic-block-size CSS logical property

A

The contain-intrinsic-block-size CSS logical property defines the block size of an element that a browser can use for layout when the element is subject to size containment.

Block size is the size of an element in the dimension perpendicular to the flow of text within a line. In a horizontal writing mode like standard English, block size is the vertical dimension (height); in a vertical writing mode, block size is the horizontal dimension.

Syntax

/* Keyword values */
contain-intrinsic-block-size: none;

/* <length> values */
contain-intrinsic-block-size: 1000px;
contain-intrinsic-block-size: 10rem;

/* auto <length> */
contain-intrinsic-block-size: auto 300px;

Values
The following values can be specified for the intrinsic block size of an element:

  • none - The element has no intrinsic block size.
  • <length> - The element has the specified block size, expressed using the (<length>) data type.
  • auto <length> - When the element is in size containment and skipping its contents (for example, when it is offscreen and content-visibility: auto is set) the block size is remembered from the actual size of the element when it was last able to render its child elements. If the element has never rendered its child elements and hence has no remembered value for the normally rendered element size, or if it is not skipping its contents, the block size is the specified <length>.

“contain-intrinsic-block-size - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 22, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

contain-intrinsic-height CSS property

A

The contain-intrinsic-height CSS property sets the height of an element that a browser can use for layout when the element is subject to size containment.

Syntax

/* Keyword values */
contain-intrinsic-height: none;

/* <length> values */
contain-intrinsic-height: 1000px;
contain-intrinsic-height: 10rem;

/* auto <length> */
contain-intrinsic-height: auto 300px;

Values
The following values may be specified for an element.

  • none - The element has no intrinsic height.
  • <length> - The element has the specified height (<length>).
  • 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 and content-visibility, and may also be set using the contain-intrinsic-size shorthand property.

Size containment allows a user agent to lay out 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. 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 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).

“contain-intrinsic-height - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 23, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

contain-intrinsic-width CSS property

A

The contain-intrinsic-width CSS property sets the width of an element that a browser will use for layout when the element is subject to size containment.

Syntax

/* Keyword values */
contain-intrinsic-width: none;

/* <length> values */
contain-intrinsic-width: 1000px;
contain-intrinsic-width: 10rem;

/* auto <length> */
contain-intrinsic-width: auto 300px;

Values

The following values may be specified for an element.

  • none - The element has no intrinsic width.
  • <length> - The element has the specified width (<length>).
  • 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>.

“contain-intrinsic-width - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 24, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

contain-intrinsic-size CSS shorthand property

A

The contain-intrinsic-size CSS shorthand property sets the size of an element that a browser will use for layout when the element is subject to size containment.

Constituent properties

This property is a shorthand for the following CSS properties:

contain-intrinsic-width
contain-intrinsic-height

Syntax

/* Keyword values */
contain-intrinsic-width: none;

/* <length> values */
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 10rem;

/* width | height */
contain-intrinsic-size: 1000px 1.5em;

/* auto <length> */
contain-intrinsic-size: auto 300px;
contain-intrinsic-size: auto none;

/* auto width | auto height */
contain-intrinsic-size: auto 300px auto 4rem;

Values

The following values may be specified for the contain-intrinsic-size property:

none - The element has no intrinsic size in the given dimension(s).

<length> The element has the specified <length> in the given dimension(s).

auto [<length> | none] - 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 <length>. The none keyword may be used in place of <length> where 0px fixed lengths behave differently than none (such as in multi column, or grid layouts).

If one value is provided as a keyword, a length or an auto [<length> | none] pair, it applies to both width and height.

Two length values may be specified, which apply to the width and height in that order. If two auto [<length> | none] pairs are specified, the first pair applies to the width, and the second to the height.

“contain-intrinsic-size - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 26, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

contain-intrinsic-inline-size CSS logical property

A

The contain-intrinsic-inline-size CSS logical property defines the inline-size of an element that a browser can use for layout when the element is subject to size containment.

Inline-size is the size of the element in the dimension parallel to the flow of text within a line. In a horizontal writing mode like standard English, inline size is the horizontal dimension (width); for a vertical writing mode, inline size is the vertical dimension.

The contain-intrinsic-inline-size CSS property is commonly applied alongside elements that can trigger size containment, such as contain: size and content-visibility.

Syntax

/* Keyword values */
contain-intrinsic-inline-size: none;

/* <length> values */
contain-intrinsic-inline-size: 1000px;
contain-intrinsic-inline-size: 10rem;

/* auto <length> */
contain-intrinsic-inline-size: auto 300px;
contain-intrinsic-inline-size: unset;

Values
The following values can be specified for the intrinsic inline size of an element:

  • none - The element has no intrinsic inline-size.
  • <length> - The element has the specified inline-size (<length>).
  • auto <length> - When the element is in size containment and skipping its contents (for example, when it is offscreen and content-visibility: auto is set) the inline size is remembered from the actual size of the element when it was last able to render its child elements. If the element has never rendered its child elements and hence has no remembered value for the normally rendered element size, or if it is not skipping its contents, the inline size is the specified <length>.

“contain-intrinsic-inline-size - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 26, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

content-visibility CSS property

A

The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element’s rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

Note: The contentvisibilityautostatechange event fires on any element with content-visibility: auto set on it when its rendering work starts or stops being skipped. This provides a convenient way for an app’s code to start or stop rendering processes (e.g. drawing on a <canvas>) when they are not needed, thereby conserving processing power.

Syntax

/* Keyword values */
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

Values

visible
No effect. The element’s contents are laid out and rendered as normal.

hidden
The element skips its contents. The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable. This is similar to giving the contents display: none.

auto
The element turns on layout containment, style containment, and paint containment. If the element is not relevant to the user, it also skips its contents. Unlike hidden, the skipped contents must still be available as normal to user-agent features such as find-in-page, tab order navigation, etc., and must be focusable and selectable as normal.

Accessibility concerns
Off-screen content within a content-visibility: auto property remains in the document object model and the accessibility tree. This allows improving page performance with content-visibility: auto without negatively impacting accessibility.

Since styles for off-screen content are not rendered, elements intentionally hidden with display: none or visibility: hidden will still appear in the accessibility tree. If you don’t want an element to appear in the accessibility tree, use aria-hidden="true".

Using auto to reduce rendering cost of long pages

HTML

<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<!-- … -->

CSS
The contain-intrinsic-size property adds a default size of 500px to the height and width of each section element. After a section is rendered, it will retain its rendered intrinsic size, even when it is scrolled out of the viewport.

section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

“content-visibility - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved April 30, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

container-name CSS propery

A

The container-name CSS property specifies a list of query container names used by the @container at-rule in a container query. A container query will apply styles to elements based on the size of the nearest ancestor with a containment context. When a containment context is given a name, it can be specifically targeted using the @container at-rule instead of the nearest ancestor with containment.

Note: When using the container-type and container-name properties, the style and layout values of the contain property are automatically applied.

Syntax

/* A single name */
container-name: myLayout;

/* Multiple names */
container-name: myPageLayout myComponentLibrary;

Values

<container-name>

A case-sensitive string that is used to identify the container.

The following conditions apply:

  • The name can be any valid <custom-ident>, but must not equal default.
  • The name value must not be in quotes.
  • The dashed ident intended to denote author-defined identifiers (e.g., --container-name) is permitted.
  • A list of multiple names separated by a space is allowed.

Examples:

.post-meta {
  container-type: inline-size;
}

.post-excerpt {
  container-type: inline-size;
  container-name: excerpt;
}

“container-name - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved May 1, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Can you use multiple names in container-name CSS property?

A

Yes, you can provide multiple names to a container context separated by a space:

.post-meta {
  container-type: inline-size;
  container-name: meta card;
}

This will allow you to target the container using either name in the @container at-rule. This is useful if you want to target the same container with multiple container queries where either condition could be true:

@container meta (max-width: 500px) {
  p {
    visibility: hidden;
  }
}

@container card (max-height: 200px) {
  h2 {
    font-size: 1.5em;
  }
}

“Using multiple container names” (MDN Web Docs). Retrieved May 1, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

container-type CSS property

A

An element can be established as a query container for container size queries using the container-type CSS property.

Size containment turns off the ability of an element to get size information from its contents.

The container size has to be set explicitly or by context — for example, block elements, flex containers, and grid containers stretching to the full width of their parent. If an explicit or contextual size is not available, elements with size containment will collapse.

Note: When using the container-type and container-name properties, the style and layout values of the contain property are automatically applied.

Syntax

/* Keyword values */
container-type: normal;
container-type: size;
container-type: inline-size;

Values

size
Establishes a query container for container size queries in both the inline and block dimensions. Applies layout containment, style containment, and size containment to the container.

Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements.

inline-size
Establishes a query container for dimensional queries on the inline axis of the container. Applies layout, style, and inline-size containment to the element.

Inline size containment is applied to the element. The inline size of the element can be computed in isolation, ignoring the child elements.

normal
The element is not a query container for any container size queries, but remains a query container for container style queries.

“container-type - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved May 2, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

container CSS property

A

The container shorthand CSS property establishes the element as a query container and specifies the name and type of the containment context used in a container query.

Constituent properties
This property is a shorthand for the following CSS properties:

container-name
container-type

Syntax

/* <container-name> */
container: my-layout;

/* <container-name> / <container-type> */
container: my-layout / size;

/* Global Values */
container: inherit;
container: initial;
container: revert;
container: revert-layer;
container: unset;

Values
<container-name>
A case-sensitive name for the containment context. More details on the syntax are covered in the container-name property page.

<container-type>
The type of containment context. More details on the syntax are covered in the container-type property page.

Example:

Establishing inline size containment

Given the following HTML example which is a card component with an image, a title, and some text:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

The explicit way to create a container context is to declare a container-type with an optional container-name:

.post {
  container-type: inline-size;
  container-name: sidebar;
}

The container shorthand is intended to make this simpler to define in a single declaration:

.post {
  container: sidebar / inline-size;
}

You can then target that container by name using the @container at-rule:

@container sidebar (min-width: 400px) {
  /* <stylesheet> */
}

“container - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved May 3, 2024.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

@container CSS at-rule

A

The @container CSS at-rule is a conditional group rule that applies styles to a containment context. Style declarations are filtered by a condition and applied to the container if the condition is true. The condition is evaluated when the container size or <style-feature> value changes.

The container-name property specifies a list of query container names. These names can be used by @container rules to filter which query containers are targeted. The optional, case-sensitive <container-name> filters the query containers that are targeted by the query.

Once an eligible query container has been selected for an element, each container feature in the <container-condition> is evaluated against that query container.

Syntax

The @container at-rule has the following syntax:

@container <container-condition> {
  <stylesheet>
}

For example:

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}
/* with an optional <container-name> */
@container tall (height > 30rem) {
  h2 {
    line-height: 1.6;
  }
}

Values

<container-condition>
An optional <container-name> and a <container-query>. Styles defined in the <stylesheet> are applied if the condition is true.

  • <container-name> - Optional. The name of the container that the styles will be applied to when the query evaluates to true, specified as an <ident>.
  • <container-query> - A set of features that are evaluated against the query container when the size of the container changes.

<stylesheet>
A set of CSS declarations.

”@container - CSS: Cascading Style Sheets | MDN” (MDN Web Docs). Retrieved May 4, 2024.

17
Q

Is it possible to target multiple containers in a single container query?

A

It’s not possible to target multiple containers in a single container query. It is possible to nest container queries which has the same effect.

The following query evaluates to true and applies the declared style if the container named summary is wider than 400px and has an ancestor container wider than 800px:

@container summary (min-width: 400px) {
  @container (min-width: 800px) {
    /* <stylesheet> */
  }
}

“Nested container queries” (MDN Web Docs). Retrieved May 6, 2024.

18
Q

list all @container CSS descriptors

A

The following descriptors can be used within the container condition:

aspect-ratio
The aspect-ratio of the container calculated as the width to the height of the container expressed as a <ratio> value.

block-size
The block-size of the container expressed as a <length> value.

height
The height of the container expressed as a <length> value.

inline-size
The inline-size of the container expressed as a <length> value.

orientation
The orientation of the container, either landscape or portrait.

width
The width of the container expressed as a <length> value.

”@container descriptors” (MDN Web Docs). Retrieved May 6, 2024.

CSS (44 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions