컨테이너 스타일 쿼리 초기

컨테이너 쿼리는 아직 초기 단계에 있으며 광범위한 브라우저 지원이 부족합니다. Chromium은 이미 그들을 지원하는 반면 Safari의 지원은 버전 16에서 시작되었으며 Firefox의 구현은 곧 예상됩니다.

초기 토론은 종종 컨테이너 쿼리와 미디어 쿼리 구문 사이에 유사점을 가져옵니다. 이 예를 고려하십시오 :

두 예 모두 를 대상으로합니다. 그러나 미디어 쿼리는 뷰포트 너비에 반응하는 반면 컨테이너 쿼리는 요소의 계산 너비에 응답합니다. 이에 대한 CSS Conficent Module Level 3 Spec는

<code>/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}</code>

컨테이너 스타일 쿼리를 소개하여 컨테이너의 계산 스타일의 쿼리를 허용합니다. 이 사양은 이들을 개별 스타일 기능의 부울 조합으로 설명하며, 각각의 특정 속성을 쿼리합니다. CSS 선언을 미러링하는 구문은 계산 된 속성 값이 지정된 값 (컨테이너에 대해 계산 된 계산)과 일치하는 경우, 유효하지 않거나 지원되지 않은 경우, 그렇지 않으면 거짓과 일치하는 경우 true로 평가됩니다. 부울 로직은 CSS 기능 쿼리 ()와 유사합니다. a 가상의 예 :

<code>/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}</code>

min-width: 600px (또는 부재)가 암시되어 있음을 알 수 있습니다. 모든 컨테이너 쿼리는 기본적으로 스타일 쿼리가됩니다 (현재). Miriam Suzanne의 작품은이 접근법으로 잠재적 인 도전을 강조합니다 쿼리 컨테이너 스타일의 실제 응용 프로그램은 여전히 ​​떠오르고 있지만 잠재적 인 용도는 다음과 같습니다. .posts

사용자 정의 속성 값 :

상태 표시기로 사용되는 사용자 정의 속성의 변경에 반응합니다. Dark Mode 구현 : 신체 배경 변경에 따라 색상 팔레트 스위칭. 복잡한 쿼리 조건 : 크기와 스타일 조건 결합 @supports 컨테이너 스타일 쿼리는 이탤릭체 블록 큐트 내에서 이탤릭체 텍스트를 재정의하는 것과 같은 스타일링 복잡성을 다룰 수 있습니다.

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