CSS 컨테이너 쿼리는 여전히 주목을 받고 있으며 작은 실험을 위한 것이든 그렇지 않은 경우에도 많은 사람들이 이에 익숙해지고 있습니다. 그들은 훌륭하지만 완전하지는 않습니다. 브라우저 지원 — 일부 프로젝트에서 사용을 정당화하기에 충분하지만 교체를 시작하려는 유혹을 받을 정도는 아닐 수 있습니다. 미디어 쿼리 반짝이는 새 컨테이너 크기 쿼리가 있는 과거 프로젝트에서.
그래도 편리합니다! 사실, 나는 그들에게 정말 다가가고 싶었지만 지원 요구 사항을 극복할 수 없었던 몇 가지 상황에 이미 부딪쳤습니다. 내가 그것들을 사용할 수 있었다면 그 상황에서 이것이 어떻게 보였을 것입니다.
다음 데모는 모두 이 글을 쓰는 시점에 Chrome 또는 Safari에서 가장 잘 볼 수 있습니다. 파이어폭스는 선박 지원 버전 109에서.
사례 1: 카드 그리드
당신은 이것을 기대해야 했습니까? 그것은 우리 모두가 어느 시점에서 마주치는 것처럼 보이는 흔한 패턴입니다. 그러나 사실은 컨테이너 크기 쿼리가 표준 미디어 쿼리에 대해 사용할 수 있었다면 더 나은 결과로 시간을 크게 절약했을 것입니다.
각 카드가 1:1 종횡비를 유지해야 한다는 요구 사항으로 이 카드 그리드를 작성하는 임무를 받았다고 가정해 보겠습니다.
보기보다 단단합니다! 문제는 뷰포트의 너비에서 구성 요소의 콘텐츠 크기를 조정하면 구성 요소가 뷰포트에 응답하는 방식과 다른 조상 컨테이너가 응답하는 방식에 따라 좌우된다는 것입니다. 예를 들어 카드가 특정 인라인 크기에 도달했을 때 카드 머리글의 글꼴 크기를 줄이려는 경우 신뢰할 수 있는 방법이 없습니다.
에서 글꼴 크기를 설정할 수 있습니다. vw 단위라고 생각하지만 구성 요소는 여전히 브라우저의 뷰포트 너비에 연결되어 있습니다. 그리고 동일한 중단점이 없을 수 있는 컨텍스트에서 카드 그리드가 다른 용도로 사용될 때 문제가 발생할 수 있습니다.
실제 프로젝트에서 저는 다음과 같은 JavaScript 접근 방식을 사용했습니다.
- 크기 조정 이벤트를 수신합니다.
- 각 카드의 너비를 계산합니다.
- 너비를 기준으로 각 카드에 인라인 글꼴 크기를 추가합니다.
- 내부의 모든 스타일을 사용하여
em단위.
일이 많은 것 같죠? 그러나 서로 다른 상황에서 서로 다른 화면 크기에 걸쳐 필요한 스케일링을 얻는 것은 안정적인 솔루션입니다.
컨테이너 쿼리는 우리에게 다음을 제공하기 때문에 훨씬 더 좋았을 것입니다. 컨테이너 쿼리 단위, 와 같은 cqw 단위. 이미 이해하셨겠지만 1cqw 동일하다 1% 컨테이너의 너비. 우리는 또한 cqi 컨테이너의 인라인 너비 측정값인 단위 cqb 컨테이너의 블록 너비. 따라서 카드 컨테이너가 있는 경우 500px 넓은, 50cqw 값은 다음과 같이 계산됩니다. 250px.
내 카드 그리드에서 컨테이너 쿼리를 사용할 수 있었다면 .card 컨테이너로서의 구성요소:
.card {
container: card / size;
}그런 다음 내부 래퍼를 설정할 수 있습니다. padding 규모는 10% 의 .card의 너비를 사용하여 cqw 단위:
.card__inner {
padding: 10cqw;
} 이는 주어진 뷰포트 너비에서 카드가 사용되는 위치에 관계없이 카드 가장자리와 내용 사이의 간격을 일관되게 조정하는 좋은 방법입니다. 미디어 쿼리가 필요하지 않습니다!
다른 아이디어? 사용 cqw 내부 콘텐츠의 글꼴 크기에 대한 단위를 입력한 다음 패딩을 적용합니다. em 단위 :
.card__inner {
font-size: 5cqw;
padding: 2em;
} 5cqw 임의의 값입니다. 제가 정한 값입니다. 그 패딩은 여전히 같습니다 10cqw 이후 em 단위는 .card__inner 글꼴 크기!
당신은 그것을 잡았습니까? 그만큼 2em 에 상대적이다 5cqw 설정된 글꼴 크기 같은 용기에. 컨테이너는 우리가 익숙한 것과 다르게 작동합니다. em 단위는 동일한 요소에 상대적입니다. font-size value. 그러나 내가 빨리 알아차린 것은 컨테이너 쿼리 단위가 컨테이너이기도 한 가장 가까운 부모.
예를 들어, 5cqw 기준으로 확장되지 않습니다. .card 이 예에서 요소의 너비:
.card {
container: card / size;
container-name: card;
font-size: 5cqw;
}오히려 컨테이너로 정의된 가장 가까운 상위 항목으로 크기가 조정됩니다. 그래서 나는 .card__inner 싸개.
사례 2: 교대 레이아웃
다른 프로젝트에 또 다른 카드 구성 요소가 필요했습니다. 이번에는 가로 레이아웃에서 세로 레이아웃으로 전환한 다음 다시 가로로 전환하고 화면이 작아짐에 따라 다시 세로로 전환하는 카드가 필요했습니다.
저는 이 구성 요소를 두 개의 특정 뷰포트 범위에서 세로 모드로 만드는 더러운 작업을 수행했습니다. 새 미디어 쿼리 범위 구문!), 그러나 다시 한 번 문제는 자신에 설정된 미디어 쿼리, 부모 및 뷰포트의 너비에 응답할 수 있는 다른 모든 항목에 잠겨 있다는 것입니다. 우리는 콘텐츠가 어디에서 깨질지 걱정하지 않고 어떤 조건에서도 작동하는 무언가를 원합니다!
컨테이너 쿼리는 @container 규칙:
.info-card {
container-type: inline-size;
container-name: info-card;
}
@container info-card (max-width: 500px) {
.info-card__inner {
flex-direction: column;
}
}하나의 쿼리, 무한한 유동성:
하지만 기다려! 조심해야 할 것이 있습니다. 특히 소품 기반 디자인 시스템 내에서 이와 같은 컨테이너 쿼리를 사용하는 것은 어려울 수 있습니다. 예를 들어, 이 .info-card 구성 요소는 모양을 변경하기 위해 소품에 의존하는 하위 구성 요소를 포함할 수 있습니다.
그게 왜 큰일이야? 카드의 세로 레이아웃에는 대체 스타일이 필요할 수 있지만 CSS로 JavaScript 소품을 변경할 수 없습니다. 따라서 필요한 스타일을 복제할 위험이 있습니다. 실제로 이것저것 만져보고 다른 기사에서 해결하는 방법. 상당한 양의 스타일링에 컨테이너 쿼리를 사용해야 하는 경우 미디어 쿼리가 많은 기존 디자인 시스템에 컨테이너 쿼리를 집어넣는 대신 컨테이너 쿼리를 중심으로 전체 디자인 시스템을 기반으로 해야 할 수 있습니다.
사례 3: SVG 스트로크
다음은 컨테이너 크기 쿼리가 더 세련된 제품을 생성했을 수 있는 최근에 사용한 또 다른 매우 일반적인 패턴입니다. 제목이 있는 아이콘이 잠겨 있다고 가정해 보겠습니다.
Heading
미디어 쿼리 없이도 제목 크기로 아이콘의 크기를 조정하는 것은 매우 간단합니다. 하지만 문제는 SVG의 stroke-width 더 작은 크기에서는 너무 얇아져 눈에 잘 띄지 않을 수 있고, 더 큰 크기에서는 매우 두꺼운 스트로크로 너무 많은 관심을 끌 수 있습니다.
크기와 획 너비를 결정하기 위해 각 아이콘 인스턴스에 클래스를 만들고 적용해야 했습니다. 고정된 글꼴 크기로 스타일이 지정된 제목 옆에 아이콘이 있는 경우에는 괜찮지만 계속 변경되는 유동적인 유형으로 작업할 때는 그리 좋지 않습니다.
머리글의 글꼴 크기는 뷰포트의 너비를 기반으로 할 수 있으므로 SVG 아이콘은 모든 크기에서 획이 작동하는 위치에 따라 적절히 조정해야 합니다. 제목에 상대적인 획 너비를 만들 수 있습니다. font-size 설정하여 em 단위. 그러나 고수해야 하는 특정 획 크기 세트가 있는 경우 그렇지 않으면 선형으로 크기가 조정되기 때문에 작동하지 않습니다. 특정 크기로 조정할 방법이 없습니다. stroke-width 뷰포트 너비에 대한 미디어 쿼리에 의존하지 않고 특정 지점에서 값.
그러나 그 당시에 컨테이너 쿼리의 사치가 있었다면 다음과 같이 했을 것입니다.
.icon {
container: icon / size;
width: 1em;
height: 1em;
}
.icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: #ccc;
stroke-width: 0.8;
}
@container icon (max-width: 70px) {
.icon svg {
stroke-width: 1.5;
}
}
@container icon (max-width: 35px) {
.icon svg {
stroke-width: 3;
}
}구현을 비교하고 컨테이너 쿼리 버전이 SVG의 획을 컨테이너의 너비를 기반으로 원하는 특정 너비로 스냅하는 방법을 확인합니다.
보너스: 다른 유형의 컨테이너 크기 쿼리
좋아요, 그래서 저는 실제 프로젝트에서 실제로 이것을 실행하지 않았습니다. 그러나 컨테이너 쿼리에 대한 정보를 샅샅이 뒤지면서 컨테이너의 크기 또는 물리적 치수와 관련하여 컨테이너에서 쿼리할 수 있는 추가 사항이 있음을 알게 되었습니다.
내가 본 대부분의 예는 width, max-width및 min-width, height, block-size및 inline-size 내가 이 기사 전체에서 해왔듯이.
@container info-card (max-width: 500px) {
.info-card__inner {
flex-direction: column;
}
}그러나 MDN은 두 가지를 더 설명합니다. 우리는 질의할 수 있습니다. 하나는 orientation 미디어 쿼리에서 항상 사용하기 때문에 완벽하게 이해됩니다. 컨테이너 쿼리와 다르지 않습니다.
@media screen (orientation: landscape) {
.info-card__inner {
/* Style away! */
}
}
@container info-card (orientation: landscape) {
.info-card__inner {
/* Style away! */
}
} 다른? 이것의 aspect-ratio, 믿거 나 말거나:
@container info-card (aspect-ratio: 3/2) {
.info-card__inner {
/* Style away! */
}
} 다음은 두 가지 예를 가지고 놀 수 있는 편집 가능한 데모입니다.
나는 아직 이들 중 하나에 대한 좋은 사용 사례를 찾지 못했습니다. 아이디어가 있거나 프로젝트에 도움이 될 수 있다고 생각되면 댓글로 알려주세요!
