가짜 컨테이너 쿼리를 최소화합니다

실제 컨테이너 쿼리가 점점 더 가능성이 높아집니다. Google은 현재 David Baron이 제안한 구문을 실험하고 Miriam Suzanne이 정제하고 있습니다. 컨테이너 쿼리 값 기반 기능과 유사한 switch() 구문을 사용한 초기 프로토 타입은 이미 존재합니다. Raven 방법과 같은 기존 기술은 유사한 기능을 제공합니다. 이러한 접근 방식은 시간이 지남에 따라 진화 할 것입니다.

즉각적인 솔루션의 경우 JavaScript 기반 방법이 일반적으로 사용됩니다. 이 방법은 컨테이너 너비를 모니터링하고 스타일링 후크 (예 : 클래스)를 적용합니다. 다음은 최소한의 접근 방식에 대한 간단한 개요입니다.

• Philip Walton의 방법 : 크기 조정을 추적하고 스타일링을위한 클래스를 적용하기 위해 ResizeObserver 사용합니다.
• 헤이든 피커링<watched-box></watched-box> 웹 구성 요소 : 크기 조정을 모니터링하고 클래스를 적용하기 위해 ResizeObserver 사용합니다 (ResizeAsaurus와 호환).
• Scott Jehl 's<c-q></c-q> 웹 구성 요소 : 크기 조정을 모니터링하고 스타일링을위한 데이터 속성을 적용하도록 ResizeObserver 활용합니다.
• Eric Portis의 조건부 클래스 : ResizeObserver 및 CSS 사용자 정의 속성을 사용하여 스타일 클래스를 적용합니다.

Tommy Hodgins의 EQCSS는 사용자 정의 CSS 구문을 구문 분석하여 컨테이너 쿼리 기능 (기타 기능 중)을 제공합니다. 그러나 비표준 CSS 구문에 대한 의존은 최소화되지 않고 잠재적으로 문제가됩니다.

위 내용은 가짜 컨테이너 쿼리를 최소화합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!