contain
A containment property for performance optimization. ctnpapplies paint containment, ctnstapplies strict containment.
Class List
| Class | CSS | Description |
|---|---|---|
ctnn | contain: none | No containment (default) |
ctnc | contain: content | layout + paint containment |
ctns | contain: size | Size containment (children do not affect parent size) |
ctnl | contain: layout | Layout containment |
ctnp | contain: paint | Paint containment (children are not drawn outside boundaries) |
ctnst | contain: strict | size + layout + paint strict containment |
Usage Examples
<!-- Independent card widget -->
<div class="ctnc p2rem bg18181B br8px">
<h3>Widget title</h3>
<p>Changes to this card do not affect the outside.</p>
</div>
<!-- Long list item requiring performance optimization -->
<div class="ctnst h10rem oh">
<p>Fully isolated element</p>
</div>When to Use What?
| Situation | Recommended |
|---|---|
| 독립적인 위젯/카드 | ctnc |
| 오프스크린 요소 최적화 | ctnst |
| overflow: hidden 대체 | ctnp |
| 레이아웃 재계산 방지 | ctnl |