contain and content-visibility - Research
January 11, 2024 ยท View on GitHub

Audits
A set of performance audits applying these properties.
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
Slides
Contain
- CSS Containment Module Level 1 - official spec
- CSS Containment Module Level 2
- CSS Containment Module Level 3
- The stacking context
- caniuse -
containbrowser 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-visibilitybrowser 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