CSS : contain property

 

CSS : contain property

웹 페이지에서는

오래전부터 가로로 스크롤이 생기는 것을 방지하기위해 상위 요소에 

overflow: hidden;을 적용해왔다.

 

예를 들어 

• 예상치 못하게 텍스트 또는 요소가 넘쳐서 화면 밖으로 나가거나
• 화면 밖에서 안으로 들어오거나 안에서 밖으로 나가는 인터랙션이 있을 경우 

와 같은 상황에서 화면에 가로 스크롤이 발생한다. 이는 매우 빈번한 상황이다.

요소가 가로로 오버플로우 되면 가로 스크롤이 발생한다.

 

간혹 이런 처리가 안되어 있어서 보기 좋지 않게 가로로 스크롤이 가능한 사이트들이 가끔 보이지만, 

한편으로는 빈번하게 일어날 수 있는 이런 상황에 비해서는 가로 스크롤이 발생하지 않는 사이트가 대다수인 이유는 

꽤 오래전부터 가로 스크롤이 발생하지 않게 하기 위해서 상위 요소에 overflow: hidden;을 적용해 주는 것이 많이 알려져왔고 그렇게 처리해 왔기 때문이다.

 

아래처럼 overflow: hidden; 을 적용하면 가로스크롤이 발생하지 않는다.

상위 요소에 overflow: hidden;을 적용하면 가로로 오버플로우 되더라도 가로 스크롤이 발생하지 않는다.

 

그동안 이렇게 해도 큰 문제가 없었지만..

 

CSS3에 position: sticky;가 생기고 이제는 대부분의 브라우저에서 지원하기 시작하며 사용 빈도가 높아지면서, 

가로 스크롤이 발생하지 않도록 상위요소에 overflow: hidden;을 적용하는 것이 문제가 되기 시작했다.

position: sticky;를 사용하려면 상위요소에 overflow: hidden; 이 없어야 한다. 상위요소에 overflow: hidden;이 있으면 position: sticky;는 동작하지 않는다.

• 이미 overflow: hidden;이 적용되서 배포된 프로젝트에 유지보수로 이후에 sticky를 사용해야 하는 상황이 발생하면 상위요소에 적용된 overflow: hidden;을 제거해야 하는데 어떤 부작용이 발생될지 예측하기 힘들다.
• 프로젝트 시작단계에서 최상위 요소에 overflow: hidden;을 적용하지 않고, 필요한 부분에만 overflow: hidden;을 적용하면 되지만, 매우 번거롭다.

 

아래는 가로 스크롤 방지를 위해 overflow: hidden;을 적용한 상태에서 하위 요소에 position: sticky; 를 적용한 경우.

position: sticky; 가 동작하지 않는다.

 

contain: paint

이제 css에 overflow:hidden; 대신에 contain: paint; 를 적용해 본다.

가로스크롤도 발생하지 않으면서 position: sticky;도 제대로 동작한다.

 

css속성 contain

docs을 보면 아래와 같이 설명하고 있다.

CSS contain 속성은 특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립되어있음을 나타낼 때 사용합니다. 브라우저는 이 정보를 사용해 레이아웃, 스타일, 페인트, 크기, 또는 그 조합의 계산을 전체 페이지 DOM 대신 일부에서만 수행할 수 있으므로 뚜렷한 성능 상 이점을 얻을 수 있습니다.

contain 속성은 위젯 내부 콘텐츠가 외부에 부작용을 끼치는 것을 방지할 수 있으므로 서로 독립된 많은 양의 위젯이 존재하는 페이지에서 유용합니다.

 

설명이 매우 어렵지만, 대략 브라우저에게 스타일과 렌더링을 계산할 때, 고려하지 않아도 될(계산하지 않아도 될) 부분을 설정해 주어서 리소스를 덜 사용하게 만들어준다는 의미인 것 같다.

 

사용되는 값

• none
  아무것도 격리하지 않고 요소를 평범하게 렌더링합니다.
• strict
  style을 제외한 모든 격리 규칙을 적용합니다. contain: size layout paint와 같습니다.
• content
  size와 style을 제외한 모든 격리 규칙을 적용합니다. contain: layout paint와 같습니다.
• size
  요소의 크기를 계산할 때 자손의 크기는 고려하지 않아도 됨을 나타냅니다.
• layout
  요소 외부의 어느 것도 내부 레이아웃에 영향을 주지 않고, 그 반대도 성립함을 나타냅니다.
• style
  요소 자신과 자손 외에도 영향을 주는 속성이라도 그 영향 범위가 자신을 벗어나지 않음을 나타냅니다. 이 값은 명세에서 "제외 고려" 대상이므로 모든 브라우저가 지원하지 않을 수도 있음을 참고하세요.
• paint
  요소의 자손이 자신의 범위 바깥에 그려지지 않음을 나타냅니다. 이 값을 지정한 요소의 경우, 요소가 화면 밖에 위치할 경우 당연히 그 안의 자손도 화면 안에 들어오지 않을 것이므로 브라우저는 그 안의 요소를 고려하지 않아도 됩니다. 그러나 만약 자손이 범위 밖으로 넘칠 경우에는 요소의 테두리 상자에서 잘라냅니다.

 

다른 값들은 사용해보지 않아서 잘 모르겠지만, 

paint 값의 의미를 보면 요소가 화면 밖에 위치할 경우에는 그 요소 안의 자손은 계산하지 않게 한다고 한다.

그리고 추가로 자손이 요소 밖으로 넘치면 요소의 테두리 상자에서 잘라낸다고 한다.

 

can i use

IE를 고려하지 않아도 된다면 사용해도 문제가 없을 것 같다.

caniuse : css contain

 

정리

css의 contain 속성은

성능 상의 이점에서 효과적인 속성이면서도 동시에 필요한 경우 원하는 스타일링을 위해서도 사용될 수 있는 것 같다.

이번에 알게 된 contain 속성의 paint값 활용은

overflow:hidden; 대신해서 사용하여 가로 스크롤을 발생하지 않게 하면서 position: sticky도 사용할 수 있게 해주는 아주 좋은 방법이다. 아마도 제일 간단하고 편한 방법이지 않을까 싶다.

참고로 docs에는 플로팅 간섭을 해결하는 예시도 있다.