CSS Contain 속성에 대하여..

과거에 비해서 최신 브라우저는 일반적으로 웹 페이지를 구성하고 HTML, CSS, Javascript등의 복잡한 웹을 렌더링하는데에 있어서 정말 효율적이게 발전해왔습니다. 보통 몇 초 남짓 안에 모든 것들이 렌더링됩니다.

 

프론트엔드 개발을 하면서, 렌더링 속도를 높이기 위해서 더 무엇을 할 수 있을까 고민하는 것은 중요합니다.

 

이럴 때 해결할 수 있는 방법 중 한가지로 Contain이라는 속성이 있습니다.

Contain 속성은 특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립되어있음을 나타낼 때 사용한다고 합니다.

/* 키워드 값 */
contain: none;      /* 격리없이 평범하게 렌더링함 */
contain: strict;    /* style을 제외한 모든 격리 규칙을 적용함 */
contain: content;   /* size와 style을 제외한 모든 격리 규칙 */
contain: size;      /* 요소의 크기를 계산할 때 자손의 크기는 고려하지 않아도 됨을 나타냄 */
contain: layout;    /* 요소 외부의 어느 것도 내부 레이아웃 영향을 주지 않음 */
contain: style;     /* 요소 자신과 자손 외에도 영향을 주는 속성이라도 그 영향 범위가 자신을 벗어나지 않음 */
contain: paint;     /* 요소가 화면 밖에 위치할 경우 당연히 그 안의 자손도 화면 안에 들어오지 않을 것이므로 브라우저는 그 안 요소 고려하지 않음 */ 

/* 다중 값 */
contain: size paint;
contain: size layout paint;

/* 전역 값 */
contain: inherit;
contain: initial;
contain: unset;

 

브라우저는 ie 및 사파리는 지원하지 않습니다.

 

contains CSS 속성을 사용하면 작성자가 요소와 해당 내용이 가능한 한 나머지 문서 트리와 독립적임을 나타낼 수 있습니다.

이를 통해 브라우저는 전체 페이지가 아닌 DOM의 제한된 영역에 대해 레이아웃, 스타일, 페인트, 크기 또는 이들의 조합을 다시 계산할 수 있으므로 명백한 성능 이점을 얻을 수 있습니다.

 

float 속성을 사용하였을 때 레이아웃이 간섭받는 상황이 왔을 때도 유용하게 사용할 수 있습니다.

 

img {
  float: left;
  border: 3px solid black;
}

article {
  border: 1px solid black;
  contain: content;
}

브라우저가 이해할 수 있도록 contain content 속성을 통해서 하위 트리만 계산하고 바깥은 고려하지 말라고 알려줍니다.

결과적으로 퍼포먼스 효율을 보면서(불필요한 연산 없이) float 이슈를 해결할 수 있었습니다.

 

추후에 브라우저 지원 범위가 확대되면 사용해볼 수 있을 것 같습니다. 

 

출처 : css-tricks.com/lets-take-a-deep-dive-into-the-css-contain-property/

Let's Take a Deep Dive Into the CSS Contain Property | CSS-Tricks

developer.mozilla.org/en-US/docs/Web/CSS/contain

contain - CSS: Cascading Style Sheets | MDN