컨테이너 스타일 쿼리의 초창기

우리는 아직 컨테이너 쿼리로 초창기입니다. 광범위한 브라우저 지원에는 너무 이르지만 Chromium은 이미 지원합니다. Safari 버전 16에서 지원 시작, 그리고 Firefox는 아마도 멀지 않은.

컨테이너 쿼리를 중심으로 하는 대부분의 초기 대화는 일반적으로 구문을 미디어 쿼리와 비교합니다.

/* 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;
  }
}

/* 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;
  }
}

이 둘은 다음을 쿼리합니다. min-width: 600. 차이점은 미디어 쿼리는 뷰포트의 너비를 확인하여 이러한 스타일 변경을 트리거하는 반면 컨테이너 쿼리는 계산된 너비를 확인한다는 것입니다. .posts 요소. 달콤한!

하지만 듣고 난 후 CSS 팟캐스트 59회, Una와 Adam은 컨테이너 쿼리의 미래에 대해 언급했습니다. 스타일 쿼리! CSS Containment Module 레벨 3 사양의 현재 작업 초안 컨테이너 스타일 쿼리 정의:

A 컨테이너 스타일 쿼리 쿼리 허용 계산된 값 의 쿼리 컨테이너. 개별 부울 조합입니다. 스타일 기능 () 각 쿼리는 쿼리 컨테이너의 단일 특정 속성입니다.

그러나 구문에 대한 예는 아직 없으며 간단한 설명만 있습니다.

구문  와 동일하다 선언쿼리 컨테이너에서 주어진 속성의 계산된 값이 주어진 값(쿼리 컨테이너와 관련하여 계산됨)과 일치하면 쿼리는 true이고 속성 또는 해당 값이 유효하지 않거나 지원되지 않으면 unknown이고 그렇지 않으면 false입니다. . 부울 구문 및 논리 결합 스타일 기능 에 스타일 쿼리 와 동일하다 CSS 기능 쿼리. (만나다 @ 지원.)

예, 주어진 시간에 우리는 다음과 같은 결과를 기대해야 합니다.

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

아주 멍청한 예입니다. 한 가지 주의할 점은 container-type 더 이상 컨테이너를 기반으로 하지 않습니다. inline-size 하지만 style. 우리는 다음과 같이 delcare할 수 있습니다.

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…그러나 모든 컨테이너 쿼리는 style 기본적으로 쿼리. 잘. 적어도 오늘날처럼. Miriam Suzanne은 좋은 나타날 수 있는 가능한 문제의 개요 그것으로.

컨테이너의 스타일을 쿼리하면 어디에 유용할까요? 나는 아직 모른다! 그러나 내 마음은 몇 군데로 갑니다.

• 사용자 정의 속성 값: 우리는 다음과 같은 상태 표시기처럼 사용되는 사용자 정의 속성을 보았습니다. DRY-스위칭 방식 Ana는 얼마 전 커버. 값이 변경되고 스타일도 변경됩니다.
• 대체 다크 모드 접근 방식: 사용자 정의 속성 값을 재할당하는 바디 클래스 변경을 기반으로 하는 대신 바디 배경 색상이 변경되는 경우 전체 색상 팔레트를 변경할 수 있습니다.
• 더 복잡한 쿼리 조건: 예를 들어 스타일을 적용하려는 경우 size 와 style 컨테이너에 대한 조건이 충족됩니다.

Una는 또한 CSS Podcast에서 컨테이너 스타일 쿼리가 이미 기울임꼴 텍스트에 기울임꼴 텍스트가 있는 경우와 같은 일부 어색한 스타일 상황을 방지하는 데 도움이 될 수 있다고 언급했습니다. blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}