- [1.] Lab - Correct usage and debugging
- [2.] Lab - Bootstrap -- none vs contain vs content-visibility v1 (partialli invalidated by [3.])
- [3.] Lab - Offscreen vs onscreen -- none vs contain vs content-visibility
| Value | Impact | Usage | Layout Root | Overflow | Dimensions | Description |
|---|---|---|---|---|---|---|
| none | n/a | n/a | document | visible | optional | Default value with no effect |
| size | ~ | -- | document | visible | required | Geometry calcualtions are done without children. Without h/w the box collapses. |
| layout | + | ++ | node | visible | optional | Protect area against layout and vice versa, offscreen paint protection [1] |
| paint | + | + | node | hidden | optional | Same as layout, offscreen paint protection [1] |
| content | ++ | + | node | hidden | optional | Shorthand for layout paint |
| strict | +++ | -- | node | hidden | required | Shorthand for layout paint size |
- w3 - CSS contain - official spec
- caniuse -
containbrowser support - caniuse -
content-visibilitybrowser support - css-tricks - almanac - by far best demos and visuall eplaination
- smashingmagazine - browsers-containment-css-contain-property - good demo o visual limitations
- Paul Irish - What forces layout / reflow?
- Paul Lewis & Surma - CSS trigger