컨테이너 쿼리 폴리필 내부

Gerald Monaco

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

이 게시물에서는 폴리필의 작동 방식, 폴리필이 극복하는 문제점, 방문자에게 훌륭한 사용자 환경을 제공하기 위해 폴리필을 사용할 때의 모범 사례를 엿볼 수 있습니다.

자세히 들여다보기

트랜스파일

브라우저 내부의 CSS 파서는 새로운 @container 규칙과 같이 알 수 없는 at-규칙을 발견하면 존재하지 않는 것처럼 단순히 삭제합니다. 따라서 폴리필이 해야 하는 첫 번째이자 가장 중요한 작업은 @container 쿼리를 삭제되지 않을 항목으로 변환하는 것입니다.

참고: 이러한 종류의 변환 컴파일은 후처리 단계의 일부로 빌드 시간에 발생하는 경우가 많습니다. 그러나 폴리필은 런타임 시 이 작업을 대신 수행합니다. 게시자와 방문자라는 두 가지 이유 때문입니다. Chromium 105 및 Safari 16에서 이미 컨테이너 쿼리가 지원되고 있으므로 대부분의 방문자는 지원 기능이 내장된 브라우저를 조만간 실행할 것으로 예상됩니다. 오프라인 트랜스파일로 인해 (이러한 오프라인 후처리 단계를 유지해야 하는) 및 방문자 (사용할 수 없는 트랜스파일된 코드를 다운로드해야 하는 경우)에 실질적으로 세금을 부과할 수 있습니다.

변환 컴파일의 첫 번째 단계는 최상위 @container 규칙을 @media 쿼리로 변환하는 것입니다. 이렇게 하면 콘텐츠가 그룹화된 상태로 유지됩니다. 예를 들어 CSSOM API를 사용하는 경우와 CSS 소스를 보는 경우입니다.

이전

@container (width > 300px) {
  /* content */
}

이후

@media all {
  /* content */
}

컨테이너 쿼리 이전에는 CSS에 작성자가 규칙 그룹을 임의로 사용 설정하거나 사용 중지할 수 있는 방법이 없었습니다. 이 동작을 polyfill로 지정하려면 컨테이너 쿼리 내부의 규칙도 변환해야 합니다. 각 @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는 알 수 없거나 잘못된 속성과 함께 사용할 수 없으므로 이러한 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가 없기 때문에 브라우저 캐시에서만 비동기식으로 다시 가져와야 할 수 있습니다.

이러한 문제를 폴리필로 신중하게 해결하지 않으면 코어 웹 바이탈이 저하될 수 있습니다.

방문자에게 더 쉽게 만족스러운 경험을 제공할 수 있도록 폴리필은 첫 입력 지연 (FID)과 누적 레이아웃 변경 (CLS)에 우선순위를 두도록 설계되었지만 최대 콘텐츠 페인트 (LCP)가 낮아질 수 있습니다. 구체적으로 폴리필은 컨테이너 쿼리가 첫 번째 페인트 전에 평가된다는 것을 보장하지 않습니다. 즉, 최상의 사용자 환경을 제공하려면 폴리필이 로드되고 CSS를 트랜스파일할 때까지 컨테이너 쿼리를 사용하면 크기나 위치에 영향을 받는 모든 콘텐츠를 숨겨야 합니다. 이를 수행하는 한 가지 방법은 @supports 규칙을 사용하는 것입니다.

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

숨겨진 콘텐츠 위에 절대 배치되는 순수 CSS 로딩 애니메이션과 결합하여 방문자에게 무슨 일이 일어나고 있는지 알리는 것이 좋습니다. 이 접근 방식의 전체 데모는 여기에서 확인할 수 있습니다.

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

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

결론

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

여러분이 이 기능으로 빌드할 놀라운 일들을 보고 빨리 경험할 수 있기를 기대합니다.

감사의 말씀

히어로 이미지: 댄 크리스티안 파두레츠(Unsplash)