컨테이너 쿼리 폴리필 내부

Gerald Monaco

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

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

자세히 들여다보기

트랜스파일레이션

브라우저 내부의 CSS 파서가 새로운 @container 규칙과 같이 알 수 없는 at 규칙을 발견하면 존재하지 않는 것처럼 삭제합니다. 따라서 폴리필이 해야 하는 첫 번째이자 가장 중요한 작업은 @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가 없기 때문에 비동기적으로 다시 가져와야 할 수도 있지만, 브라우저 캐시에서만 가져오는 것이 이상적입니다.

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

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

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

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

이 방법이 권장되는 이유는 다음과 같습니다.

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

결론

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

여러분이 이 기술로 빌드하게 될 놀라운 결과들을 보고 경험해 보시기 바랍니다.

감사의 말

Unsplash에 댄 크리스티안 파두르트의 히어로 이미지입니다.