컨테이너 쿼리 와 현재 실험적인 브라우저 에 있는 새로운 컨테이너 레벨 3 사양 에 대해 들어보았을 수 있지만 스타일 컨테이너 쿼리에 대해 들어본 적이 있습니까? 스타일 컨테이너 쿼리도 이 (매우 흥미로운) 사양의 일부입니다. ⚠️ 중요 참고 사항: 포함 수준 3 사양의 일부인 스타일 쿼리는 Chromium 및 Webkit에서 컨테이너 쿼리의 초기 구현에 포함 되지 않습니다 . 두 브라우저 엔진 모두 현재 크기 쿼리 및 컨테이너 쿼리 단위 지원 1 을 제공할 계획 입니다. 스타일 쿼리를 사용하면 페이지 내 모든 상위 요소의 스타일 을 쿼리하고 상위 요소의 스타일 에 따라 하위 요소에 스타일을 적용할 수 있습니다. 이것은 정말 멋있게 들리지만 실제로는 스타일을 적용하기 위해 클래스 또는 데이터 속성과 같은 것에 이것을 사용하는 이유는 무엇입니까(둘 다 컨테이너 쿼리보다 훨씬 더 성능이 좋습니다). 스타일 쿼리가 실제로 사용하기에 적합한 이유 와 시기 를 조사 하고 이전에는 사용할 수 없었던 기능을 제공하고 싶습니다. 컨테이너 쿼리: 빠른 요약 TLDR; 컨테이너 쿼리를 사용하면 부모 선택기의 크기 및 스타일 정보를 쿼리할 수 있으며 웹 페이지의 어디에 있든 자식이 고유한 응답 논리를 소유할 수 있습니다. 미디어 쿼리와 컨테이너 쿼리의 다이어그램 스타일 입력(무딘 망치)을 위해 뷰포트에 의존하는 대신 사용자는 이제 UI 스타일을 적용하기 위해 대상 요소에 더 관련성이 있고 구체적인 인페이지 요소(훨씬 더 정밀한 도구)를 쿼리할 수 있습니다. 이 기능을 통해 새로운 진입점이 반응형 스타일을 쿼리하고 주입할 수 있으며 구성 요소가 반응형 스타일 논리를 소유할 수 있습니다. 이렇게 하면 페이지에 표시되는 위치에 관계없이 스타일 지정 논리가 본질적으로 연결되므로 구성 요소가 훨씬 더 탄력적입니다. (이 단락에서 "스타일"을 충분히 말했습니까?) 더 자세히 알고 싶다면 컨테이너 쿼리에 대한 몇 가지 비디오 를 녹화했습니다 . 다음과 같이 컨테이너 쿼리를 작성합니다. 하나. 쿼리하려는 상위 요소에 대한 컨테이너 정의 .parent { /* query the inline-direction size of this parent */ container-type: inline-size; } 둘. 대상으로 지정하려는 요소에 컨테이너 스타일을 작성합니다. @container (min-width: 420px) { .card { /* styles to apply when the card container is >= 420px */ /* I.e. shift from 1-column to 2-column layout: */ grid-template-columns: 1fr 1fr; } } 스타일 쿼리 크기 기반 컨테이너 쿼리와 마찬가지로 스타일 쿼리 를 사용하여 상위 요소의 계산된 스타일을 쿼리할 수 있습니다 . style()스타일 쿼리를 크기 쿼리와 구별 하려면 이러한 요소를 래핑해야 합니다 . 왜요? 쿼리 하는 경우 렌더링된 크기 가 주어진 시간에 420px 이상인 경우 스타일을 적용하려고 합니다 . 쿼리하는 경우 에 대해 계산된 값 을 찾고 있습니다 . 스타일 쿼리는 페이지에서 렌더링될 때 요소의 값이 아니라 계산된 스타일 값을 봅니다. 스타일과 크기는 CSS 포함 의 다른 유형입니다 .@container (min-width: 420px)@container style(min-width: 420px)min-width420px @container style(color: hotpink) { .card { /* styles to apply when the card container has a color of hotpink */ /* I.e. change the background to white: */ background: white; } } 좋아요, 하지만 이것이 실제로 어디에 유용할까요? 스타일 쿼리가 고유한 기능을 제공하는 몇 가지 상황이 있습니다. 1. 직접 부모 스타일 쿼리 이번 주 CSSWG 해상도(2022년 6월 22일) 기준으로 크기 쿼리와 달리 를 설정해야 하는 container-type경우 모든 요소는 기본적으로 스타일 컨테이너 입니다. 즉, 직계 부모를 쿼리하여 자식에게 스타일을 적용할 수 있습니다. 직계 상위 스타일 쿼리를 사용하려는 위치의 한 가지 예는 인라인 텍스트 스타일 지정을 사용하는 것입니다. 단락에서 기울임꼴 인용 부호와 같이 인라인에서 눈에 띄는 것을 만들고 싶다고 가정해 보겠습니다 . 이전 문장은 기울임꼴이며 태그로 래핑됩니다. 이것은 블록 따옴표 스타일의 일부로 기울임꼴 텍스트가 있는 블록 따옴표입니다. 태그 를 사용하여 눈에 띄고 싶은 요소가 내부에 있으면 동일하게 보이기 때문에 눈에 띄지 않습니다. 그런 요소입니다. 하지만 눈에 띄도록 분홍색 배경을 주고 싶을 수도 있습니다. 이것은 스타일 쿼리로 달성할 수 있습니다. 요소 유형( span, i, p등)에 관계없이 스타일 쿼리를 사용하면 부모 요소의 특정 스타일을 보고 스타일 결정을 내릴 수 있습니다. 이것은 "연결된 스타일"을 가능하게 합니다. 스타일 X인 경우 스타일 Y를 적용합니다. 코드는 다음과 같습니다. @container style(font-style: italic) { span, i, .etc { background: lavender; } } 2. 상속 불가능한 속성 스타일링 이 예는 부모의 스타일(비상속 스타일 포함)을 기반으로 한 색상 선택을 보여줍니다. border-color상속하지 않는 속성의 예입니다. 스타일 쿼리를 사용하면 부모의 상속 불가능한 스타일을 쿼리하여 자식에게 적용할 수 있습니다. 예를 들어 border-color버튼에 스타일을 적용하도록 쿼리할 수 있습니다. @container style(border-color: lightblue) { button { border-color: lightblue; } } FPO 이것은 카드 안의 일부 텍스트입니다. 나는 버튼이다 이제 lightblue테두리 색상을 "상속"하여 버튼에 전달했습니다. 3. 체인 스타일 이것은 깔끔하지만 두 위치에서 사용자 지정 속성을 사용하여 위의 예를 수행할 수 있습니다. .card { border-color: var(--colorBorder); } .card button { border-color: var(--colorBorder); } 따라서 한 단계 더 나아가 공유 사용자 정의 속성으로 할 수 없는 작업을 수행해 보겠습니다. 고유한 값을 적용합니다. 같은 값을 사용하는 대신 값을 로 조정합니다 royalblue. @container style(border-color: lightblue) { button { border-color: royalblue; } } FPO 이것은 카드 안의 일부 텍스트입니다. 나는 버튼이다 이제 카드에 테두리 색상이 있을 때 lightblue카드의 테두리 색상 안에 있는 버튼을 로 설정하려고 합니다 royalblue. 이러한 종류의 연결은 두 개의 고유한 값이기 때문에 사용자 지정 속성으로 할 수 없는 것입니다. 4. 고차 변수를 사용한 그룹화 스타일 한 걸음 더 나아가 이러한 값을 또는 와 같은 고차 변수 로 추상화 하고 카드 전체에 스타일을 적용할 수 있습니다.--theme: light--theme: dark FPO 이 카드는 --theme: dark부모에게 적용되었습니다. 이제 자식 스타일을 지정할 수 있습니다. 나는 버튼이다 @container style(--theme: dark) { .card { background: royalblue; border-color: navy; color: white; } .card button { border-color: navy; background-color: dodgerblue; color: white; } } 강조 표시해야 하는 카드 와 같이 카드 상호 작용 또는 유형과 관련이 있을 수 있는 상태를 적용하거나 콘텐츠 카드가 있고 블로그 게시물의 스타일을 동영상 또는 다른 유형의 콘텐츠.--highlight: true--type: post 주로 사용자 정의 속성을 사용하여 스타일을 작성하는 경우 다른 사용자 정의 속성 시리즈를 업데이트하는 데 사용하여 고차 변수를 사용하여 훨씬 더 간결해질 수 있습니다. 5. CSS의 상호작용 스타일 쿼리가 정말 유용할 수 있는 또 다른 방법은 이미 CSS를 사용하여 스타일을 지정하는 동작(예: :hover및 :focus상태)과 통합하는 것입니다. CSS 상태로 CSS 사용자 정의 속성을 빠르고 쉽게 업데이트할 수 있으며 위의 기술을 사용하여 값 그룹을 한 곳에서 업데이트할 수 있습니다. /* update the theme on hover */ .card:hover, .card:focus { --theme: darkHover; } /* apply darkHover theme styles */ @container style(--theme: darkHover) { .card { background: dodgerblue; border-color: navy; } .card button { border-color: lightblue; background-color: royalblue; } } FPO 이 카드는 --theme: dark부모에게 적용되었습니다. 이제 자식 스타일을 지정할 수 있습니다. 나는 버튼이다 6. 결합자 쿼리 정말 미친 짓을 하고 싶다면 크기 쿼리를 스타일 쿼리와 결합하여 정말 구체적인 스타일 지정 논리를 적용할 수도 있습니다. 예를 들어, 고유 크기를 기반으로 하는 논리와 함께 고차 변수의 접근 방식을 사용하여 스타일을 그룹화할 수 있습니다(이 예에서는 "하이라이트" 카드). @container (min-width: 420px) and style(--highlight: true) { /* styles for only highlight components at a minmimum width of 420px */ } 결론 이것은 더 나은 개발자 경험과 더 유연한 구성 요소 소유 스타일을 가능하게 하는 방식으로 스타일 쿼리를 사용하는 방법에 대한 몇 가지 아이디어일 뿐입니다. 이러한 구성 요소가 여러 장소에서 재사용되는 더 큰 시스템에 통합될 때 정말 빛을 발합니다. 자세한 내용은 다음을 확인하세요. 컨테이너 쿼리에 대한 MDN 문서 브라우저에서 디자인: 컨테이너 쿼리 브라우저에서 디자인: 매크로 및 마이크로 레이아웃 컨테이너 쿼리와 CSS의 미래 차세대 CSS: @container