contain and content-visibility - Research

Audits

A set of performance audits applying these properties.

• 🔥 Angular Movies App
• 🔥🔥 Observable HQ - HTML/CSS only Performance Audit

Measures

Different Lab measures to understand the impact.

• [1.] Lab - Correct usage and debugging
• [2.] Lab - Bootstrap -- none vs contain vs content-visibility v1 (partially invalidated by [3.]) 👍
• [3.] Lab - Offscreen vs onscreen -- none vs contain vs content-visibility 👍
• [4.] Work Specific - pain, layout
• [5.] content-visibility

Overview of the properties

Can I Use

Documentation

Code samples

• 🔥🔥🔥 css-containment-debug
• css-containment-demo
• movies app

Talks

• Next generation CSS performance

Slides

• Lab Measure Slides
• 🔥🔥 CSS Contain & Content Visibility - Talk

Contain

• CSS Containment Module Level 1 - official spec
• CSS Containment Module Level 2
• CSS Containment Module Level 3
• The stacking context
• caniuse - contain browser support
• css-tricks - almanac - contain - by far best demos and visuall eplaination
• smashingmagazine - browsers-containment-css-contain-property - good demo o visual limitations
• offscreen improvements

Content Visibility

• caniuse - content-visibility browser support
• web.dev - content-visibility
• chromestatus - contain-intrinsic-size:auto

General

• 🔥 Paul Irish - What forces layout / reflow?
• Paul Lewis & Surma - CSS trigger
• web page geometry
• chrome graphics feature set chrome://gpu/
• chrome flags chrome://flags/

made with ❤ by push-based.io