Josh Comeau의 글을 항상 친절하게 잘 설명해주어서 챙겨서 읽는 편인데 이번에는 Container Query에 대한 글입니다. Container Query는 이제 대부분의 브라우저에서 어느정도 지원되긴 하지만 꽤 최근에 나온 표준입니다.

이 글에 따르면 컨테이너 쿼리에 대한 요청이 오랫동안 있었지만 현실적으로 어려움이 있었기 때문에 이를 구현하지 못했는데 예를 들어 컨테이너 쿼리 조건은 width로 지정하고 스타일을 지정했을 때 스타일 변경으로 인해서 width 달라지면 다시 컨테이너 조건에 안맞게 되면서 컨테이트 크기가 달라지게 되면서 깜빡거리는 현상이 발생할 수 있습니다.

이때문에 구현을 못하다가 성능 최적화 목적으로 만들어진 Containment API가 나오면서 contain: size를 지정하면 콘텐츠에따라 컨테이너의 크기가 달라지지 않게 되기 때문에 이를 이용하면 컨테이너 쿼리가 가능해지게 되었습니다.

그래서 container-type을 사용해서 어떤 요소가 컨테이너인지를 지정하고 이때 값을 size로 지정하면 컨텐츠가 컨에이너 밖으로 벗어나므로 size 대신 inline-size로 지정하면 컨텐츠를 포함하면서 컨테이너 쿼리를 사용할 수 있게 됩니다.

https://www.joshwcomeau.com/css/container-queries-introduction/