Skip to content

Latest commit

 

History

History
103 lines (59 loc) · 5.13 KB

icb.md

File metadata and controls

103 lines (59 loc) · 5.13 KB
Raw

Initial Containing Block

Definition

The Initial Containing Block – or ICB for short – is defined in the CSS2 spec:

The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block in which the root element1 lives is a rectangle called the initial containing block.

It takes its size from the Layout Viewport (for continuous media):

For continuous media, it has the dimensions of the viewport2 and is anchored at the canvas origin

Visualization

To visualize it, authors can use this CSS snippet:

html {
	width: 100%;
	height: 100%;
	outline: 10px dashed red;
	outline-offset: -10px;
}

👉 Try it out: Initial Containing Block (ICB)

Measuring the ICB

To get the actual size of the ICB, authors do not need to size the root element to be 100% and measure it that way, but can use this JS snippet:

document.documentElement.clientWidth;
document.documentElement.clientHeight;

This due to an exception in the definition of clientWidth/clientWidth

If the element is the root element and the element’s node document is not in quirks mode […] return the viewport width/height excluding the size of a rendered scroll bar (if any).

💡 You might think window.innerWidth and window.innerHeight might also get you these values, but that’s not the case. Some browsers resize those values as you pinch-zoom in. The values for the document.documentElement.clientWidth/.clientHeight properties remain stable and are not affected by pinch-zooming.

Findings

💡 These findings are a textual representation of the test results table.

Size

In desktop browsers, the ICB – as specced – follows the size of the Layout Viewport.

Illustration

In mobile browsers the ICB has the same size as the Layout Viewport after initial load which has expanded dynamic UA UI Elements. This is also known as the Small Viewport.

Illustration

There, the pixel width of the ICB is determined by the viewport meta tag:

  • <meta name="viewport" content="width=device-width"> sizes the width of the ICB in relation to the device’s width
  • <meta name="viewport" content="width=value"> sizes the width of the ICB to the given value, e.g. 2000px
  • Lack of a <meta name="viewport"> tag makes user agents fall back to a default ICB width of 980px.

Effect of scrolling

As specced, the ICB is anchored to the canvas origin on which the document is painted. As a result, the ICB slides out of view as you scroll down a page.

Illustration Illustration

On Mobile, the ICB remains the same size in most browsers, except for a few outliers: they resize the ICB as the UA UI gets hidden. Note that in that case, these browsers do not resize the ICB to match the size of the Layout Viewport but use an in-between value.

Illustration

Effect of scrollbars

When operating systems use Classic Scrollbars, the ICB shrinks. This is because those browsers resize the Layout Viewport, upon which the ICB size is based. Overlay Scrollbars have no effect on the size of the ICB.

Illustration

Effect of pinch-zoom

When pinch-zooming in the ICB does not get resized because the Layout Viewport – upon which the ICB size is based – does not resize either.

Illustration

Effect of the Virtual Keyboard

See Virtual Keyboard: Findings.

Effect of Overscrolling / Bouncy Scroll

When overscrolling – on platforms that support it - the ICB retains its size and bounces along with the rubber banding as it happens.

Relation to Viewport Units

Their name might not indicate it, but the Viewport Units are sized in relation to the ICB. See Viewport Units for details.

Issues

We are tracking issues using the label ICB

Footnotes

  1. Root Element = the html element – DOM Living Standard: The html element ↩

  2. Back when CSS2 was defined, it had no notion of different viewports. When specs talk about “the Viewport”, they mean the Layout Viewport. ↩