CSS 컨테이너 질의 예

CSS 컨테이너 질의는 뷰포트 크기가 아닌 컨테이너 요소 크기와 유사한 미디어 질의입니다.배치에 적응하기 위해 일반적으로 미디어 조회를 사용하여 뷰포트 설정 단점을 설정하지만 디자인 시스템에서 모듈화된 구성 요소를 만들 때 우리는 용기 조회를 사용하여 비슷한 효과를 실현할 수 있다.

그런데 저희가 용기 조회를 사용할 수 있을까요?

본고를 작성할 때 2022년 1월에 용기 조회는 기능 표지 선택을 통해 가입한 후에만 사용할 수 있기 때문에 오늘날의 일반적인 터미널 사용자 브라우저가 용기 조회를 지원할 것이라고 기대하지 마십시오.그러나 Andy Bell wrote처럼 우리는 용기 조회를 점차적으로 사용할 수 있다.

If the browser doesn’t understand some CSS, it’ll ignore it and carry on parsing the rest, so we can effectively use container queries today.

컨테이너 질의를 사용하지 않는 컨텐트

HTML 웹 사이트는 즉각적으로 응답합니다.스타일 규칙을 추가하지 않으면 텍스트 컨텐트가 브라우저 윈도우를 채우는 데 적합하여 표시되는 영역이 표시되지 않습니다.몇 줄의 CSS를 추가하면 이미지를 똑같이 표현할 수 있습니다. (전제는 우리가 그것들의 width 과 height 또는 현식 aspect-ratio 을 설정한 것입니다.)

img {
  max-width: 100%;
  height: auto;
}

만약 우리가 실제 (고유) 이미지 크기를 정확하게 설명한다면, 우리는 이 규칙을 안전하게 적용할 수 있으며, 어떠한 미디어 조회나 용기 조회도 필요없다.이미지가 뷰포트 너비보다 작으면 규칙이 유효하지 않습니다.작은 화면에서 브라우저는 생성된 가로세로 비율로 높이를 계산하고, 실제와 맞지 않는 상황에서 그림 크기를 조절할 수 있다.이동 화면에 그림을 숨기려면 a picture 요소와 a srcset 요소를 사용하여 그림을 숨기는 것을 방지할 수 있습니다.

용기 조회의 용례

아마도 우리는 flex-wrap 또는 flex-direction 속성을 전환하고 position: fixed 설정z-index으로 설정하거나 구성 요소의 사용 가능한 공간에 따라 레이아웃과 색을 바꾸고 싶을 것이다. 구체적으로는 구성 요소의 사용 가능한 공간에 달려 있다.
전체 사이트가 아닌 부모 용기를 고려함으로써 다른 열에서 다시 사용할 수 있는 웹 구성 요소를 설계하여 실제 사용할 수 있는 너비나 높이에 따라 외관을 동적으로 변경할 수 있습니다.

'플렉스박스 신성신천옹'.

2019년 비욘드 텔레랜드 콘퍼런스에서 Heydon Pickering presented the "Holy Albatross" 복잡한 CSS를 사용한 레이아웃은 용기 조회를 통해 더욱 우아하고 읽을 수 있게 된다.
다른 CSS 속성을 사용해 용기 조회를 시뮬레이션한다는 생각은 이미 성배를 검색하는 것처럼 몬티 파이톤의 비행 서커스단(Flying Circus)의 초도에 있는 신천옹 공급업체처럼 웅대한 마니아가 되어 자신의 코드the Flexbox Holy Albatross라고 불렀다.

Flexbox에서 컨테이너 조회 에뮬레이션

Heydon의 예시에서 flexbox는 자동으로 수평(다열)에서 수직(단열) flexbox 레이아웃으로 전환한다. 방법은 단점(다음 예는640px과 사용 가능한 용기 너비100% 사이의 차이에 따라 flex 기초를 계산하는 것이다.

이런 기술은 매우 잘 작동하지만 코드는 이해하기가 쉽지 않다.

.container {
  display: flex;
  flex-wrap: wrap;
  --margin: 1rem;
  --modifier: calc(640px - 100%);
  margin: calc(var(--margin) * -1);
}

.container > * {
  flex-grow: 1;
  flex-basis: calc(var(--modifier) * 999);
  height: 20vh;
  margin: var(--margin);
}

용기 조회 재구성 코드를 사용합니다.

컨테이너 질의 사용

우선, 현재 Chrome과 Chrome 기반 브라우저 (예: Edge 또는 Vivaldi) 에서 미리 보기 기능을 추가할 수 있도록 해야 한다.
로 이동하여 검색container하고 CSS 컨테이너 조회 사용 을 사용 으로 전환한 다음 브라우저를 다시 시작합니다.

신천옹 플렉스박스 재구성 예시

우리는 contain property를 사용하여 용기 현식을 용기 요소로 정의해야 한다position: relative 정의position: absolute의 부모 상하문과 유사하다).
용기와 용기 조회를 설명하고 실천 예시를 제공했다.
너비와 높이를 기반으로 하는 용기 조회를 지원하는 용기를 정의하려면 기존containment 속성 contain: size 을 사용할 수 있습니다.
많은 흔히 볼 수 있는 용례 중에서, 우리는 너비만 흥미를 느낀다.이것이 바로 신형contain: inline-size의 용도다.이 흔한 용례도 우리의 flexbox 예시에 적용된다.
어떠한 상황에서도, 우리는 layout 용기를 정의하여 용기 조회를 사용하고, style 동적 스타일 계산이 무한 순환을 초래하는 것을 방지해야 한다.
지정하지 않으면style 용기 조회는 현재의 실험성 실현에서 작업할 수 없다(적어도 2021년 말).

.container {
  contain: layout inline-size style;
}

@container (max-width: 640px) {
  .container > * {
    flex-basis: 100%;
  }
}

작은 컨테이너 수직열 레이아웃에서 신천옹 상자 주위에 분홍색 테두리가 있는 것을 보았을 때 브라우저는 CSS 컨테이너 조회를 기반으로 스타일을 적용했습니다.

안정적인 코드를 생산에 납품하다

본문을 작성할 때, 기본적으로 용기 조회를 지원하는 유행하는 브라우저가 없습니다.그렇다면 현재 미래의 CSS를 사용하는 것은 어떤 의미가 있을까요?

코드는 기능으로 사용되는 투표

코드는 인터넷 연감, 검색엔진과 브라우저 공급업체 등 각 방면에서 기어오르고 검사한다.이것how semantic HTML 5 elements like nav got their names은 어떤 기능을 우선적으로 고려하고 어떤 기능을 추천하지 않는지 결정하는 데 사용될 수도 있다.
인증이 필요합니다. 브라우저 기능의 우선순위를 결정하는 데 도움을 주는 유사한 연구가 진행되고 있다는 것을 무심결에 들었지만, 공식 성명을 찾지 못했습니다.

예비(fallback) 코드 추가

Heydon의'Flexbox Holy Albatross'와 같은 용기 조회 시뮬레이션을 추가하거나 container query polyfill를 다각형으로 채우고 브라우저나 기능 로고를 전환해서 용기 조회가 있거나 없는 상황에서 우리의 코드가 예상대로 작동하도록 할 수 있습니다.