방금 간단한 테스트를 해보니 테마에서 컨테이너 쿼리가 동작하는 것을 확인할 수 있었습니다. 다만 한 가지 주목할 점은, 미디어 쿼리보다 훨씬 더 추론하기 어렵다는 것입니다. 팀원 중 몇 명은 처음에 이 부분에 대해 혼란을 겪었습니다.
이것은 단순히 컨테이너에 적용된 미디어 쿼리가 아니라, 별도의 요구 사항을 가지고 있습니다. 가장 큰 문제는 다음과 같습니다:
“사이즈 컨테이너(size containment)는 요소가 콘텐츠로부터 크기 정보를 가져오는 기능을 비활성화하며, 이는 컨테이너 쿼리가 무한 루프를 피하는 데 중요합니다.”
출처: container-type CSS property - CSS | MDN
따라서 동적 폭을 가진 컨테이너에는 컨테이너 쿼리를 사용할 수 없습니다. 컨테이너에 정적 폭을 설정해야 합니다. 불행히도 이는 컨테이너 쿼리로 기대했던 것보다 기능을 상당히 제한합니다.
동작하는 것을 보여주는 매우 엉뚱한 개념 증명(Proof of Concept)입니다
@media screen and (min-width: 500px) {
.fk-d-button-tooltip {
width: 300px;
background: green;
container-type: inline-size;
}
}
@media screen and (min-width: 1000px) {
.fk-d-button-tooltip {
width: 500px;
background: yellow;
container-type: inline-size;
}
}
@container (min-width: 400px) {
#create-topic {
background: blue !important;
}
}
400px 미만 컨테이너:
400px 초과 컨테이너:
