새 컨테이너 쿼리 폴리필(Polyfill)만 작동합니다.

반응형

이제 컨테이너 쿼리에 대해 다음과 같이 완벽하게 작동하는 폴리 필이 있습니다.

• 브라우저가 컨테이너 쿼리를 지원하지 않을 때 조건부 로드합니다.
• CSS는 현재 규격 준수 컨테이너 쿼리 구문 코드를 포함하여 일반적인 방법으로 작성합니다.
• 그냥 된다.

이렇게 사용하기 쉬운 컨테이너 쿼리 폴리필과 초기 테스트 구현까지 가능한 Chrome 자체에서 제공하는 것은 매우 좋은 일입니다. Surma가 그것을 합친 것 같군. 고마워 Surma!

이것보다 앞선 cqfill이라는 Jonathan Neal의 Container Query Polyfill이 있었습니다. 공식적으로 더 이상 사용되지 않는지는 모르겠지만, 작업 및 PostCSS 처리를 위해 추가적인 비사양 CSS가 필요하기 때문에 저는 이 새로운 polyfill을 위해 더 이상 사용되지 않는 것으로 간주합니다.

폴리 필을 로드하는 방법은 다음과 같습니다.

 

// Support Test
const supportsContainerQueries = "container" in document.documentElement.style;

// Conditional Import
if (!supportsContainerQueries) {
    import("https://cdn.skypack.dev/container-query-polyfill");
}

// Support Test
const supportsContainerQueries = "container" in document.documentElement.style;

// Conditional Import
if (!supportsContainerQueries) {
    import("https://cdn.skypack.dev/container-query-polyfill");
}

You can pull it from npm or use as a `<script>`, but this way seems best to me to keep things light and easy.

그런 다음 CSS에서 컨테이너 쿼리에 대한 구문을 자유롭게 사용할 수 있습니다. HTML의 날씨 위젯이 있다고 가정해 보십시오. 질의에 대한 래퍼 요소가 추가로 필요합니다. 그게 규칙이야. 네가 스타일링한 건 질의를 할 수 없어.

<div class="weather-wrap">
    <dl class="weather">
          <div>
            <dt>Sunday</dt>
                  <dd>
                    <b>26°</b> 7°
            </dd>
      </div>
          <div>
            <dt>Monday</dt>
                  <dd>
                    <b>34°</b> 11°
            </dd>
      </div>
          <!-- etc -->
  </dl>
</div>

 

<div class="weather-wrap">
    <dl class="weather">
          <div>
            <dt>Sunday</dt>
      <dd>
              <b>26°</b> 7°
      </dd>
    </div>
    <div>
                      <dt>Monday</dt>
      <dd>
                        <b>34°</b> 11°
      </dd>
    </div>
    <!-- etc -->
  </dl>
</div>

래퍼가 컨테이너로 인스턴스화됩니다.

.weather-wrap {
    container: inline-size / weather-wrapper;
    /* Shorthand for: */
    /* container-type: inline-size; */
    /* container-name: weather-wrapper; */

    /* For quick testing, do this to get a resize handle on desktop: */
    /* resize: both; */
    /* overflow: hidden; */
} 

.weather-wrap {
    container: inline-size / weather-wrapper;
    /* Shorthand for: */
    /* container-type: inline-size; */
    /* container-name: weather-wrapper; */

    /* For quick testing, do this to get a resize handle on desktop: */
    /* resize: both; */
    /* overflow: hidden; */
} 

그런 다음 해당 구성요소에 대한 전역 스타일과 컨테이너 조회 범위 스타일을 작성합니다.

 

.weather {
    display: flex;
}
@container weather-wrapper size(max-width: 700px) {
    .weather {
          flex-direction: column;
  }
} 

.weather {
    display: flex;
}
@container weather-wrapper size(max-width: 700px) {
    .weather {
          flex-direction: column;
    }
} 

컨테이너 쿼리 폴리 채우기 예제

다음은 실제 날씨 위젯을 사용하여 컨테이너 쿼리 폴리필에 대한 좀 더 구체화된 데모입니다.

 

 

제가 처음 이걸 브라무스의 블로그에서 봤는데, 그는 컨테이너 쿼리 폴리필과 함께 하는 클래식 카드 데모를 가지고 있더군요. 위아래로 스크롤합니다. 상단에는 (브라우저 창이 충분히 넓은 경우) 베어 카드 행이 있으며, 컨테이너 쿼리에 따라 가능한 경우 아래의 다른 레이아웃 위치에 있는 유사한 베어 카드가 더 멋진 형식으로 변경됩니다.

 

컨테이너 쿼리 폴리 채우기 브라우저 지원

폴리필 문서에는 다음과 같은 내용이 있습니다.

폴리필은 'ResizeObserver', 'MutationObserver' 및 ':is()'에 의존합니다. 따라서 크롬/엣지 88+, 파이어폭스 78+, 사파리 14+ 등 모든 최신 브라우저에서 작동해야 한다.

 

이 문서에는 다양한 종류의 작은 경고들이 포함되어 있습니다. 그 중에는 그것이 무엇을 하고 무엇을 지원하지 않는지도 포함되어 있습니다. 주로 틈새 제품인 것 같습니다. 주요/일반적인 사용 사례에 대해 다루고 있습니다.

판도를 바꾼다고요?

제가 글을 쓰면서, 우리는 크롬의 컨테이너 쿼리에 대한 이면 플래그 지원을 봐왔고, 그것은 현재 공식 사양 초안입니다.

이는 매우 흥미로우며, 비록 구문이 도중에 약간 바뀌더라도 (이미 여러 번이 있다) 컨테이너 쿼리와 함께 실제로 배송되는 브라우저를 가리킵니다. 하지만 컨테이너 쿼리가 언제 배송되는지 알 수 없습니다. 또한 이러한 마법의 한계점이 초과되었을 때, 현재 플렉스박스나 그리드에서처럼 걱정 없이 컨테이너 쿼리를 사용할 수 있는 위치도 알 수 없습니다.

그 "그냥 사용" 날짜는 아마도 적절한 방법이겠지만, 폴리필링의 아이디어에 관심이 있고 점진적인 향상에 주의를 기울인다면, 컨테이너 쿼리 사용 날짜는 지금 당장이 될 수 있습니다. 제가 보기엔 폴리필 스크립트가 2.8kb로 선을 가로지르는 것 같아요. 그래서 중요한 것 치고는 크기가 꽤 작은 편이죠.

 

나는 이 폴리필이 내년에 컨테이너 질의의 사용이 급증할 것으로 의심됩니다.

푸크?

JavaScript 파일을 다운로드하고 실행한 후에만 스타일이 올바르게 적용되므로 사이트는 FOUC(Flash of Untyled Content) 영역으로 들어갑니다. 여기 제가 직접 데모를 통해 볼 수 있는 비디오 녹음이 있습니다. 의도적으로 렌더링을 지연시키는 것 말고는 다른 방법이 없을 것 같은데, 일반적으로는 안 된다고 여겨진다. 웹 글꼴을 로드하는 것과 마찬가지로 FOUC는 변속이 이상적이지 않더라도 콘텐츠가 숨겨지거나 지연되지 않는다는 것을 의미하기 때문에 좋은 것일 수 있습니다. 브라우저 지원이 종료되고 폴리필 로드가 중지되면 FOUC가 사라집니다.

용기 질의를 즐겁게 해보세요! 저는 그것의 데모를 더 보고 싶습니다.