단지 작동하는 새로운 컨테이너 쿼리 폴리 필드

게임 변화 컨테이너 쿼리 Polyfill이 도착하여 브라우저에서 원활한 호환성을 제공합니다. Chrome에서 개발 한이 Polyfill은 간단한 구현을 보장합니다. 기본 지원이없는 브라우저에 조건부로드하고 표준 컨테이너 쿼리 구문을 사용하여 CSS를 작성하고 완벽한 기능을 누리십시오.

이 사용자 친화적 인 Polyfill은 추가 CSS 및 PostCS 처리가 필요한 CQFill과 같은 이전 솔루션과 대조적으로 개발을 단순화합니다.

가벼운 통합을 위해 폴리 필을로드하는 방법은 다음과 같습니다.

 // 지원 테스트
const supportScontainerQueries = document.documentElement.style의 "컨테이너";

// 조건부 가져 오기
if (! supportScontainerQueries) {
  import ( "https://cdn.skypack.dev/container-query-polyfill");
}

NPM은 또 다른 옵션이지만이 방법은 물건을 간소화합니다.

컨테이너 쿼리를 사용하려면 스타일의 컨텐츠 주위에 래퍼 요소가 필요합니다. 스타일링하는 요소를 직접 쿼리 할 수는 없습니다. 예를 들어 날씨 위젯을 고려하십시오.

<div class="weather-wrap">
  <dl>
    <div>
      <dt>일요일</dt>
      <dd>
<b>26 °</b> 7 °</dd>
    </div>
    <div>
      <dt>월요일</dt>
      <dd>
<b>34 °</b> 11 °</dd>
    </div>
  </dl>
</div>

래퍼는 컨테이너로 정의됩니다.

 .weather-wrap {
  컨테이너 : 인라인 크기 / 날씨 래퍼;
  /* 또는: */
  /* 컨테이너 유형 : 인라인 크기; */
  /* 컨테이너-이름 : 날씨 래퍼; */

  / * 선택 사항 : 테스트 용 핸들 크기 */
  /* 크기 조정 : 둘 다; */
  /* 오버플로 : 숨겨진; */
}

그런 다음 글로벌 및 컨테이너 스코핑 스타일이 적용됩니다.

 .날씨 {
  디스플레이 : Flex;
}
@Container Weather-Wrapper Size (max width : 700px) {
  .날씨 {
    플렉스 방향 : 열;
  }
}

날씨 위젯과 함께 폴리 필을 보여주는보다 포괄적 인 데모를 사용할 수 있습니다 (입력에 제공되지 않으므로 데모 링크가 생략 됨). Bramus의 블로그에는 유용한 카드 예제도 있습니다.

브라우저 지원 및 고려 사항 :

PolyFill은 크림/에지 88, Firefox 78 및 Safari :is() ResizeObserver 지원 MutationObserver . PolyFill 문서는 사소한 제한 사항을 자세히 설명하지만 핵심 사용 사례는 완전히 다루어집니다.

Chrome의 공식 사양 초안 상태 및 뒤의 플래그 지원을 통해 광범위한 브라우저 지원이 예상됩니다. 그러나 정확한 타임 라인은 확실하지 않습니다.

PolyFill의 작은 크기 (약 2.8KB)는 무시할만한 성능 오버 헤드로, 잠재적으로 컨테이너 쿼리 채택을 증가시킬 수 있습니다.

분리되지 않은 컨텐츠 (Fouc)의 플래시 :

폴리 필의 비동기 특성은 잠재적 인 fouc를 도입합니다. 이를 완화하려면 렌더링 지연 (일반적으로 바람직하지 않음)이 필요하지만, 간단한 FOUC는 컨텐츠 지연보다 바람직합니다. 기본 브라우저 지원이 유비쿼터스가되면 문제가 해결됩니다.

이 강력한 폴리 필로 컨테이너 쿼리의 전력을 수용하십시오! 자신의 데모와 경험을 공유하십시오.

위 내용은 단지 작동하는 새로운 컨테이너 쿼리 폴리 필드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!