컨테이너 쿼리 폴리필 내부

Gerald Monaco
Gerald Monaco
X GitHub

컨테이너 쿼리는 상위 요소의 특성 (예: 너비 또는 높이)을 타겟팅하여 하위 요소의 스타일을 지정하는 스타일 지정 로직을 작성할 수 있는 새로운 CSS 기능입니다. 최근 브라우저에서 지원이 시작됨에 따라 polyfill의 대규모 업데이트가 출시되었습니다.

이 게시물에서는 폴리필의 작동 방식, 극복하는 문제, 방문자에게 우수한 사용자 환경을 제공하기 위해 폴리필을 사용할 때의 권장사항을 살펴봅니다.

자세히 들여다보기

트랜스파일링

브라우저 내 CSS 파서가 알 수 없는 at-rule(예: 새로운 @container 규칙)을 발견하면 마치 존재하지 않았던 것처럼 삭제합니다. 따라서 폴리필에서 가장 먼저 해야 할 가장 중요한 일은 @container 쿼리를 삭제되지 않는 것으로 트랜스파일하는 것입니다.

트랜스파일링의 첫 번째 단계는 최상위 @container 규칙을 @media 쿼리로 변환하는 것입니다. 이렇게 하면 대부분 콘텐츠가 함께 그룹화된 상태로 유지됩니다. 예를 들어 CSSOM API를 사용하거나 CSS 소스를 볼 때입니다.

이전
@container (width > 300px) {
  /* content */
}
이후
@media all {
  /* content */
}

컨테이너 쿼리 이전에는 CSS에서 작성자가 규칙 그룹을 임의로 사용 설정하거나 중지할 수 있는 방법이 없었습니다. 이 동작을 폴리필하려면 컨테이너 쿼리 내의 규칙도 변환해야 합니다. 각 @container에는 고유한 ID (예: 123)가 할당되며, 이 ID는 요소에 이 ID를 포함하는 cq-XYZ 속성이 있는 경우에만 적용되도록 각 선택기를 변환하는 데 사용됩니다. 이 속성은 런타임 시 폴리필에 의해 설정됩니다.

이전
@container (width > 300px) {
  .card {
    /* ... */
  }
}
이후
@media all {
  .card:where([cq-XYZ~="123"]) {
    /* ... */
  }
}

:where(...) 가상 클래스가 사용된 것을 볼 수 있습니다. 일반적으로 속성 선택기를 추가하면 선택기의 특이성이 증가합니다. 가상 클래스를 사용하면 원래의 특이성을 유지하면서 추가 조건을 적용할 수 있습니다. 이 작업이 중요한 이유를 알아보려면 다음 예를 살펴보세요.

@container (width > 300px) {
  .card {
    color: blue;
  }
}

.card {
  color: red;
}

이 CSS를 사용하면 .card 클래스가 있는 요소에는 항상 color: red가 있어야 합니다. 후자의 규칙이 항상 동일한 선택기와 특이성을 가진 이전 규칙을 재정의하기 때문입니다. 따라서 첫 번째 규칙을 트랜스파일하고 :where(...) 없이 속성 선택기를 추가하면 특정성이 증가하여 color: blue가 잘못 적용됩니다.

하지만 :where(...) 가상 클래스는 상당히 새로운 개념입니다. 이를 지원하지 않는 브라우저의 경우 폴리필이 안전하고 쉬운 해결 방법을 제공합니다. @container 규칙에 더미 :not(.container-query-polyfill) 선택기를 수동으로 추가하여 규칙의 특이성을 의도적으로 높일 수 있습니다.

이전
@container (width > 300px) {
  .card {
    color: blue;
  }
}

.card {
  color: red;
}
이후
@container (width > 300px) {
  .card:not(.container-query-polyfill) {
    color: blue;
  }
}

.card {
  color: red;
}

이렇게 하면 다음과 같은 여러 가지 이점이 있습니다.

  • 소스 CSS의 선택자가 변경되어 구체성의 차이가 명시적으로 표시됩니다. 이는 문서 역할도 하므로 더 이상 해결 방법이나 폴리필을 지원할 필요가 없을 때 영향을 받는 항목을 알 수 있습니다.
  • 폴리필은 규칙의 특이성을 변경하지 않으므로 규칙의 특이성은 항상 동일합니다.

트랜스파일링 중에 폴리필은 이 더미를 동일한 특이성을 가진 속성 선택기로 대체합니다. 예기치 않은 결과를 방지하기 위해 폴리필은 두 선택기를 모두 사용합니다. 원래 소스 선택기는 요소에 폴리필 속성을 적용해야 하는지 결정하는 데 사용되고, 변환된 선택기는 스타일 지정에 사용됩니다.

가상 요소

폴리필이 고유한 컨테이너 ID 123를 포함하도록 요소에 일부 cq-XYZ 속성을 설정하는 경우 속성을 설정할 수 없는 가상 요소는 어떻게 지원할 수 있을까요?

가상 요소는 항상 DOM의 실제 요소(출처 요소라고 함)에 바인딩됩니다. 트랜스파일링 중에 조건부 선택기가 이 실제 요소에 대신 적용됩니다.

이전
@container (width > 300px) {
  #foo::before {
    /* ... */
  }
}
이후
@media all {
  #foo:where([cq-XYZ~="123"])::before {
    /* ... */
  }
}

조건부 선택기는 잘못된 #foo::before:where([cq-XYZ~="123"])로 변환되는 대신 출처 요소인 #foo의 끝으로 이동합니다.

하지만 그것만으로는 충분하지 않습니다. 컨테이너는 내부에 포함되지 않은 항목을 수정할 수 없으며 (또한 컨테이너는 자체 내부에 있을 수 없음) #foo가 쿼리되는 컨테이너 요소 자체인 경우 정확히 이러한 일이 발생한다고 생각해 보세요. #foo[cq-XYZ] 속성이 잘못 변경되고 #foo 규칙이 잘못 적용됩니다.

이를 수정하기 위해 폴리필은 실제로 두 속성을 사용합니다. 하나는 상위 요소가 요소에만 적용할 수 있는 속성이고 하나는 요소가 자체적으로 적용할 수 있는 속성입니다. 후자의 속성은 가상 요소를 타겟팅하는 선택기에 사용됩니다.

이전
@container (width > 300px) {
  #foo,
  #foo::before {
    /* ... */
  }
}
이후
@media all {
  #foo:where([cq-XYZ-A~="123"]),
  #foo:where([cq-XYZ-B~="123"])::before {
    /* ... */
  }
}

컨테이너는 첫 번째 속성 (cq-XYZ-A)을 자체에 적용하지 않으므로 첫 번째 선택기는 다른 상위 컨테이너가 컨테이너 조건을 충족하고 적용한 경우에만 일치합니다.

컨테이너 상대 단위

컨테이너 쿼리에는 CSS에서 사용할 수 있는 몇 가지 새로운 단위도 함께 제공됩니다. 예를 들어 가장 가까운 적절한 상위 컨테이너의 너비와 높이의 1%(각각)에 해당하는 cqw 및 cqh 등이 있습니다. 이를 지원하기 위해 단위는 CSS 맞춤 속성을 사용하여 calc(...) 표현식으로 변환됩니다. 폴리필은 컨테이너 요소의 인라인 스타일을 통해 이러한 속성의 값을 설정합니다.

이전
.card {
  width: 10cqw;
  height: 10cqh;
}
이후
.card {
  width: calc(10 * --cq-XYZ-cqw);
  height: calc(10 * --cq-XYZ-cqh);
}

인라인 크기와 블록 크기의 경우 각각 cqi 및 cqb와 같은 논리적 단위도 있습니다. 인라인 및 블록 축은 쿼리되는 요소가 아닌 단위를 사용하는 요소의 writing-mode에 의해 결정되므로 약간 더 복잡합니다. 이를 지원하기 위해 폴리필은 writing-mode가 상위 요소와 다른 모든 요소에 인라인 스타일을 적용합니다.

/* Element with a horizontal writing mode */
--cq-XYZ-cqi: var(--cq-XYZ-cqw);
--cq-XYZ-cqb: var(--cq-XYZ-cqh);

/* Element with a vertical writing mode */
--cq-XYZ-cqi: var(--cq-XYZ-cqh);
--cq-XYZ-cqb: var(--cq-XYZ-cqw);

이제 이전과 마찬가지로 단위를 적절한 CSS 맞춤 속성으로 변환할 수 있습니다.

속성

컨테이너 쿼리에는 container-type 및 container-name와 같은 몇 가지 새로운 CSS 속성도 추가됩니다. getComputedStyle(...)와 같은 API는 알 수 없거나 유효하지 않은 속성과 함께 사용할 수 없으므로 파싱된 후 CSS 맞춤 속성으로 변환됩니다. 속성을 파싱할 수 없는 경우 (예: 잘못된 값 또는 알 수 없는 값이 포함되어 있음) 브라우저에서 처리하도록 그대로 둡니다.

이전
.card {
  container-name: card-container;
  container-type: inline-size;
}
이후
.card {
  --cq-XYZ-container-name: card-container;
  --cq-XYZ-container-type: inline-size;
}

이러한 속성은 발견될 때마다 변환되므로 폴리필이 @supports과 같은 다른 CSS 기능과 원활하게 작동할 수 있습니다. 이 기능은 아래에 설명된 폴리필 사용 권장사항의 기반입니다.

이전
@supports (container-type: inline-size) {
  /* ... */
}
이후
@supports (--cq-XYZ-container-type: inline-size) {
  /* ... */
}

기본적으로 CSS 맞춤 속성은 상속됩니다. 즉, 예를 들어 .card의 모든 하위 요소는 --cq-XYZ-container-name 및 --cq-XYZ-container-type 값을 갖습니다. 이는 네이티브 속성이 작동하는 방식이 아닙니다. 이를 해결하기 위해 폴리필은 사용자 스타일 앞에 다음 규칙을 삽입하여 다른 규칙에서 의도적으로 재정의하지 않는 한 모든 요소가 초기 값을 수신하도록 합니다.

* {
  --cq-XYZ-container-name: none;
  --cq-XYZ-container-type: normal;
}

권장사항

대부분의 방문자가 조만간 컨테이너 쿼리 지원이 내장된 브라우저를 실행하게 될 것으로 예상되지만, 나머지 방문자에게도 좋은 환경을 제공하는 것이 중요합니다.

초기 로드 중에 폴리필이 페이지 레이아웃을 설정하기 전에 실행해야 하는 작업이 많습니다.

  • 폴리필을 로드하고 초기화해야 합니다.
  • 스타일시트를 파싱하고 트랜스파일해야 합니다. 외부 스타일시트의 원시 소스에 액세스하는 API가 없으므로 브라우저 캐시에서만 가져오는 것이 이상적이지만 비동기식으로 다시 가져와야 할 수도 있습니다.

이러한 문제가 폴리필에서 신중하게 해결되지 않으면 Core Web Vitals가 저하될 수 있습니다.

방문자에게 더 나은 환경을 제공할 수 있도록 폴리필은 최대 콘텐츠 렌더링 시간 (LCP)을 희생시키더라도 최초 입력 반응 시간 (FID) 및 누적 레이아웃 이동 (CLS)에 우선순위를 두도록 설계되었습니다. 구체적으로 폴리필은 컨테이너 쿼리가 첫 번째 페인트 전에 평가된다고 보장하지 않습니다. 즉, 최상의 사용자 환경을 제공하려면 폴리필이 CSS를 로드하고 변환할 때까지 크기나 위치가 컨테이너 쿼리 사용의 영향을 받는 콘텐츠를 숨겨야 합니다. 이를 실행하는 한 가지 방법은 @supports 규칙을 사용하는 것입니다.

@supports not (container-type: inline-size) {
  #content {
    visibility: hidden;
  }
}

(숨겨진) 콘텐츠 위에 절대적으로 배치된 순수 CSS 로드 애니메이션과 결합하여 방문자에게 무언가 진행 중임을 알리는 것이 좋습니다. 이 접근 방식에 관한 전체 데모는 여기에서 확인할 수 있습니다.

이 접근 방식은 다음과 같은 여러 가지 이유로 권장됩니다.

  • 순수 CSS 로더는 최신 브라우저를 사용하는 사용자의 오버헤드를 최소화하는 동시에 이전 브라우저 및 느린 네트워크를 사용하는 사용자에게 가벼운 피드백을 제공합니다.
  • 로더의 절대 위치 지정을 visibility: hidden와 결합하면 레이아웃 전환을 방지할 수 있습니다.
  • 폴리필이 로드되면 이 @supports 조건이 통과되지 않고 콘텐츠가 표시됩니다.
  • 컨테이너 쿼리를 기본적으로 지원하는 브라우저에서는 조건이 통과되지 않으므로 페이지가 예상대로 첫 번째 페인트에 표시됩니다.

결론

이전 브라우저에서 컨테이너 쿼리를 사용해 보고 싶다면 폴리필을 사용해 보세요. 문제가 발생하면 언제든지 문제를 신고해 주세요.

여러분이 이 도구를 사용하여 만들어 낼 놀라운 결과물을 보고 경험할 수 있기를 기대합니다.