레이븐 기술 : 컨테이너 쿼리에 한 걸음 더 가까이 다

CSS 컨테이너 쿼리를위한 까마귀 팁 : 컨테이너 쿼리에 더 가깝습니다.

CSS에는 컨테이너 쿼리가 필요합니다! 우리 가이 방향으로 향하고있는 것 같습니다.

웹 사이트 구성 요소를 구축 할 때는 구성 요소가 어떻게 사용되는지 항상 알지 못합니다. 브라우저 창만큼 넓을 수 있습니다. 아마도 두 구성 요소가 나란히 배치 될 수 있습니다. 어쩌면 좁은 기둥에있을 수도 있습니다. 구성 요소의 너비가 항상 브라우저 창의 너비와 관련이있는 것은 아닙니다.

일반적으로 컨테이너 기반 CSS 구성 요소를 사용하여 쿼리하는 것이 매우 편리합니다. 온라인 솔루션을 검색하면 몇 가지 JavaScript 기반 솔루션을 찾을 수 있습니다. 그러나 이러한 솔루션은 추가 종속성, JavaScript에 대한 스타일 및 오염 된 응용 프로그램 논리 및 설계 논리와 같은 비용이 발생합니다.

나는 우려의 분리를 굳게 믿고 레이아웃은 CSS의 초점입니다. 예를 들어, IntersectionObserver API는 양호하지만 CSS의 :in-viewport 같은 것을 갖고 싶습니다! 그래서 CSS 전용 솔루션을 계속 찾고 Heydon Pickering의 "Flexbox Holy Albatross"를 발견했습니다. 이것은 열에 좋은 솔루션이지만 더 많은 것을 원합니다. 원래 Albatross는 ( "불가피한 알바트 로스"와 같은 개선 사항이 있지만, 여전히 약간 서투른 일이며, 발생하는 모든 것은 단지 연속 전환 일뿐입니다.

나는 여전히 더 많은 것을 원한다! 실제 컨테이너 쿼리에 더 가까워지고 싶습니다! 그렇다면 CSS는 무엇을 사용할 수 있습니까? 수학 배경이 있으므로 calc() , min() , max() 및 clamp() 와 같은 기능은 내가 좋아하고 이해하는 것입니다.

다음 : 컨테이너 쿼리와 같은 솔루션을 구축하는 데 사용하십시오.

목차 :

1. 왜 "까마귀"?
2. CSS의 수학적 기능
3. 1 단계 : 구성 변수를 만듭니다
4. 2 단계 : 표시기 변수를 만듭니다
5. 3 단계 : 표시기 변수를 사용하여 간격 값을 선택하십시오
6. 4 단계 : min() 과 거대한 정수를 사용하여 길이의 값을 선택하십시오.
7. 5 단계 : 모든 것을 정리하십시오
8. 다른?
9. 높이는 어디에 있습니까?
10. 콘텐츠를 보여주고 숨기는 것은 어떻습니까?
11. 핵심 요점
12. 추가 내용
13. 마지막 생각

계속 읽기 전에 무엇을 달성 할 수 있는지보고 싶습니까? 이것은이 기사에서 논의한 아이디어가 달성 할 수있는 것을 보여주는 코드 펜 컬렉션입니다.

왜 "까마귀"?

이 작품은 Heydon의 Albatross에서 영감을 얻었지만이 기술은 더 많은 트릭을 수행 할 수 있으므로 까마귀가 매우 똑똑한 새이기 때문에 까마귀를 선택했습니다.

검토 : CSS의 수학적 기능

calc() 함수는 CSS에서 수학적 연산을 허용합니다. 또한 단위를 결합 할 수 있으므로 calc(100vw - 300px) 과 같은 작업이 가능합니다.

min() 및 max() 함수는 둘 이상의 매개 변수를 사용하여 최소 또는 최대 매개 변수를 반환합니다 (각각).

clamp() 함수는 매우 유용하며 min() 및 max() 의 조합과 유사합니다. 함수 clamp(a, x, b) 반환됩니다.

• x가 a보다 작은 경우 a를 반환하십시오
• x가 b보다 큰 경우 b를 반환하십시오
• X가 A와 B 사이 인 경우 X가 반환됩니다.

따라서 clamp(最小值, 相对值, 最大值) . min(max(a,x),b) 로 간주 될 수 있습니다. 자세한 내용은 여기에 대한 자세한 정보가 있습니다.

또한이 기사에서는 다른 CSS 도구 인 CSS 사용자 정의 속성을 광범위하게 사용합니다. 이것들은 --color: red; 또는 --distance: 20px; 본질적으로 변수입니다. 우리는 그것들을 사용하여 우리 자신의 과도한 복제를 피하는 것과 같이 CSS를 더 간결하게 만들 것입니다.

이 까마귀 트릭을 사용해 보자.

1 단계 : 구성 변수를 만듭니다

설정할 CSS 사용자 정의 속성을 만들어 봅시다.

쿼리를 기반으로하는 기본 크기는 무엇입니까? 우리는 컨테이너 쿼리 동작을 찾고 있으므로 100%가 될 것입니다. 100VW를 사용하면 컨테이너가 아닌 브라우저 창의 너비이기 때문에 미디어 쿼리처럼 작동하게됩니다!

 <code>--base_size: 100%;</code>

이제 중단 점을 고려해 봅시다. 말 그대로 컨테이너 너비를 의미하며, 우리는 새로운 스타일을 적용하기 위해 여기에서 깨지기를 원합니다.

 <code>--breakpoint_wide: 1500px; /* 大于1500px 将被视为宽*/ --breakpoint_medium: 800px; /* 从801px 到1500px 将被视为中等*/ /* 小于或等于800px 将被视为小*/</code>

실행중인 예에서는 세 가지 간격을 사용하지만이 기술에는 제한이 없습니다.

이제 중단 점에 대해 정의하는 간격에 대해 반환하려는 일부 (CSS 길이) 값을 정의해 봅시다. 이것들은 문자 그대로의 가치입니다.

 <code>--length_4_small: calc((100% / 1) - 10px); /* 根据你的需求更改*/ --length_4_medium: calc((100% / 2) - 10px); /* 根据你的需求更改*/ --length_4_wide: calc((100% / 3) - 10px); /* 根据你的需求更改*/</code>

이것은 구성입니다. 그것을 사용합시다!

2 단계 : 표시기 변수를 만듭니다

간격에 대한 몇 가지 표시기 변수를 만들 것입니다. 그들은 부울과 비슷하지만 길이 (0px 및 1px) 단위가 있습니다. 이 길이를 최소 및 최대 값으로 제한하면 일종의 "참"및 "거짓"표시기 역할을합니다.

따라서 ---base_size가 -breakpoint_wide보다 큰 경우에만 1px 값의 변수를 원합니다. 그렇지 않으면 0px를 원합니다. clamp() 사용하여 수행 할 수 있습니다.

 <code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px );</code>

var(--base_size) - var(--breakpoint_wide) 가 음수이면 ---base_size가 -breakpoint_wide보다 작으므로 clamp() 가 0px를 반환합니다.

반대로 ---base_size가 -breakpoint_wide보다 큰 경우, 계산은 1px보다 큰 양의 길이를 제공합니다. 이것은 clamp() 1px를 반환한다는 것을 의미합니다.

빙고! "폭"표시기 변수를 얻습니다.

"중간"간격을 위해 이것을하자 :

 <code>--is_medium: clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px ); /* 不要使用，见下文！ */</code>

이것은 셀 간격에 대해 0px를 제공하지만 중간 및 넓은 간격의 경우 1px를 제공합니다. 그러나 우리가 원하는 것은 0px의 광범위한 간격과 1px 의 중간 간격입니다.

-is_wide 값을 빼서이 문제를 해결할 수 있습니다. 넓은 간격으로, 1px -1px는 0px입니다. 중간 간격으로, 1px -0px는 1px이고; 작은 간격으로 0px -0px는 0px를 제공합니다. 완벽한.

그래서 우리는 얻는다 :

 <code>--is_medium: calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) );</code>

이해했나요? 표시 변수를 계산하려면 경계로 0px와 1px를 가진 clamp() 사용하고 -Base_Width와 -BreakPoint_why의 차이를 제한 값으로 사용하십시오. 그런 다음 모든 더 큰 간격 표시기의 합을 빼십시오. 최소 간격 표시기의 경우이 논리는 다음과 같은 결과를 생성합니다.

 <code>--is_small: calc( clamp(0px, (var(--base_size) - 0px, 1px) - (var(--is_medium) var(--is_wide)) );</code>

셀들 사이의 중단 점은 0px이고 -base_size가 양수이기 때문에 clamp() 건너 뛸 수 있으므로 -base_size -0px는 항상 1px보다 크고 clamp() 항상 1px를 반환합니다. 따라서 -is_small의 계산을 단순화 할 수 있습니다.

 <code>--is_small: calc(1px - (var(--is_medium) var(--is_wide)));</code>

3 단계 : 표시기 변수를 사용하여 간격 값을 선택하십시오

이제 우리는 이러한 "표시기 변수"에서 유용한 것으로 이동해야합니다. 픽셀 기반 레이아웃을 사용하고 있다고 가정 해 봅시다. 걱정하지 마십시오. 나중에 다른 부대를 다룰 것입니다.

이것은 문제입니다. 이것은 무엇을 반환합니까?

 <code>calc(var(--is_small) * 100);</code>

-is_small이 1px 인 경우 100px를 반환합니다. -is_small이 0px 인 경우 0px를 반환합니다.

이것의 사용은 무엇입니까? 이것을 확인하십시오 :

 <code>calc( (var(--is_small) * 100) (var(--is_medium) * 200) );</code>

셀 간격에서 100px 0px = 100px를 반환합니다 (여기서 -is_small은 1px이고 -is_medium은 0px입니다). 중간 간격 (-is_medium은 1px이고 -is_small은 0px)에서 0px 200px = 200px를 반환합니다.

이해했나요? 이해하기 어려울 수 있기 때문에 여기에서 무슨 일이 일어나고 있는지 더 자세히 살펴 보려면 Roman Komarov의 기사를 참조하십시오.

해당 표시기 변수에 픽셀 값 (단위)에 곱하고 이러한 모든 항목을 함께 추가합니다. 따라서 픽셀 기반 레이아웃의 경우 이와 같은 것이 충분합니다.

 <code>width: calc( (var(--is_small) * 100) (var(--is_medium) * 200) (var(--is_wide) * 500) );</code>

그러나 대부분의 경우 픽셀 기반 값을 원하지 않습니다. 우리는 "전체 너비"또는 "세 번째 폭"과 같은 개념 또는 2REM, 65CH 등과 같은 다른 장치를 원합니다.이를 위해서는 계속해야합니다.

4 단계 : min() 과 거대한 정수를 사용하여 길이의 값을 선택하십시오.

첫 번째 단계에서는 정적 픽셀 값 대신 이와 같은 것을 정의합니다.

 <code>--length_4_medium: calc((100% / 2) - 10px);</code>

그렇다면 우리는 어떻게 사용합니까? min() 기능은 구출입니다!

헬퍼 변수를 정의하자 :

 <code>--very_big_int: 9999; /* 纯粹的无单位数字。必须大于其他地方出现的任何长度。 */</code>

이 값을 표시기 변수로 곱하면 0px 또는 9999px가 제공됩니다. 이 값이 얼마나 큰지는 브라우저에 따라 다릅니다. Chrome은 999999를 받아 들일 것이지만 Firefox는 그러한 많은 수를 받아들이지 않으므로 9999는 두 가지 모두에서 작동하는 가치입니다. 주위에 9999px보다 큰 뷰포트가 거의 없으므로 괜찮을 것입니다.

그렇다면 9999px보다 작은 값이지만 0px min() 보다 큰 값으로 사용하면 어떻게됩니까?

 <code>min( var(--length_4_small), var(--is_small) * var(--very_big_int) );</code>

-is_small이 0px 인 경우에만 0px를 반환합니다. -is_small이 1px 인 경우 곱셈이 9999px (-length_4_small보다 클리어)를 반환하고 min 다음을 반환합니다 : -length_4_small.

이것은 지표 변수를 기반으로 길이 (즉, 9999px 미만이지만 0px보다 큰)를 선택할 수있는 방법입니다.

9999px보다 큰 뷰포트를 다루는 경우 -very_big_int 변수를 조정해야합니다. 이것은 약간 추악하지만, 순수한 CSS가 값의 단위를 제거하여 표시기 변수의 장치를 제거하고 (모든 길이를 직접 곱할 수 있음)이 문제를 해결할 수 있습니다. 현재 이것은 작동합니다.

우리는 이제 모든 조각을 결합하고 까마귀를 날게 할 것입니다!

5 단계 : 모든 것을 정리하십시오

이제 동적 컨테이너 너비를 기반으로 다음과 같은 중단 점 기반 값을 계산할 수 있습니다.

 <code>--dyn_length: calc( min(var(--is_wide) * var(--very_big_int), var(--length_4_wide)) min(var(--is_medium) * var(--very_big_int), var(--length_4_medium)) min(var(--is_small) * var(--very_big_int), var(--length_4_small)) );</code>

각 줄은 4 단계에서 min() 입니다. 모든 선은 3 단계에서와 같이 추가되며, 지표 변수는 2 단계에서 나옵니다. 모두 1 단계에서 수행 한 구성을 기반으로합니다. 하나의 큰 공식으로 함께 작동합니다!

시도하고 싶습니까? 이것은 사용할 수있는 펜입니다 (CSS의 주석 참조).

이 펜은 Flexbox, 그리드 또는 플로트를 사용하지 않습니다. 일부 div. 이것은이 레이아웃에서 보조 프로그램이 불필요하다는 것을 보여주기위한 것입니다. 그러나 더 복잡한 레이아웃을 만드는 데 도움이되므로 이러한 레이아웃과 함께 Crow를 자유롭게 사용하십시오.

다른?

지금까지 우리는 고정 픽셀 값을 중단 점으로 사용했지만 컨테이너가 뷰포트 마이너스 10px의 절반 보다 크거나 작은 경우 레이아웃을 변경하려고합니까? 괜찮아요:

 <code>--breakpoint_wide: calc(50vw - 10px);</code>

이것은 작동합니다! 다른 공식도 적용됩니다. 이상한 행동을 피하기 위해 우리는 다음과 같은 것을 사용하고 싶습니다.

 <code>--breakpoint_medium: min(var(--breakpoint_wide), 500px);</code>

... 두 번째 중단 점을 500px 너비로 설정하십시오. 2 단계의 계산은 -breakpoint_wide가 -breakpoint_medium 이상이 아니라는 사실에 따라 다릅니다. 브레이크 포인트를 올바른 순서로 유지하십시오. min() 및/또는 max() 는 여기에서 매우 유용합니다!

높이는 어디에 있습니까?

모든 계산 평가는 지연됩니다. 즉, ---dyn_length가 속성에 할당되면 계산은이 위치에서 ---base_size의 계산 결과를 기반으로합니다. 따라서 -Base_Size가 100%인 경우 설정 높이는 100%를 기준으로합니다.

컨테이너 너비를 기준으로 높이를 설정하는 방법을 찾지 못했습니다. 따라서 100%는 패딩 폭에 해당하기 때문에 padding-top 사용할 수 있습니다.

콘텐츠를 보여주고 숨기는 것은 어떻습니까?

Crow Trick을 사용하여 컨텐츠를 표시하고 숨기는 가장 쉬운 방법은 적절한 표시기 변수에서 폭을 100px (또는 기타 적합한 폭)로 설정하는 것입니다.

 <code>.show_if_small { width: calc(var(--is_small) * 100); } .show_if_medium { width: calc(var(--is_medium) * 100); } .show_if_wide { width: calc(var(--is_wide) * 100); }</code>

설정해야합니다.

 <code>overflow: hidden; display: inline-block; /* 避免难看的空行*/</code>

... 또는 너비가 0px 인 상자에 내용물을 숨기는 다른 방법. 상자를 완전히 숨기려면 다른 상자 모델 속성 (여백, 충전 및 테두리 너비 포함)을 0px로 설정해야합니다. Crow는 특정 속성 에서이 작업을 수행 할 수 있지만 0px에 고정하는 것은 똑같이 효과적입니다.

또 다른 방법은 position: absolute; 그리고 left: calc(var(--is_???) * 9999);

핵심 요점

컨테이너 쿼리 동작을 위해서도 JavaScript가 전혀 필요하지 않을 것입니다! 물론 CSS 구문에서 실제로 컨테이너 쿼리를 얻으면 사용하고 이해하기가 더 쉬울 수 있기를 바랍니다. 그러나 오늘날 CSS에서 이러한 것들을 구현할 수 있다는 것도 매우 멋지다.

이것을 다루는 동안 나는 CSS가 사용할 수있는 다른 것들에 대한 생각이 있습니다.

• CONW 및 CONH와 같은 컨테이너 기반 장치는 폭에 따라 높이를 설정하는 데 사용됩니다. 이 단위는 현재 스태킹 컨텍스트의 루트 요소를 기반으로 할 수 있습니다.
• 지연된 평가 문제를 극복하기위한 일종의 "가치 평가"기능. 이것은 렌더링 할 때 작동하는 "단위 제거"기능과 매우 잘 작동합니다.

참고 : 이전 버전에서는 CW와 CH를 단위로 사용했지만 일부 사람들은 동일한 이름의 CSS 단위와 쉽게 혼동된다고 지적했습니다. 댓글의 팁에 대해 Mikko Tapionlinna와 Gilson Nunes Filho에게 감사드립니다! ))

두 번째가 있으면 색상 (깨끗한 방식으로), 테두리, 상자 그림자, 플렉스 재배, 배경 위치, Z- 인덱스, Scale () 및 Crow를 사용하는 다른 것들을 설정할 수 있습니다.

구성 요소 기반 단위와 결합하여 자식 크기를 부모와 동일한 종횡비로 설정할 수도 있습니다. 단위로 값으로 나눌 수 없습니다. 그렇지 않으면 -Indicator / 1px는 까마귀의 "제거 장치"로 작동합니다.

추가 내용 : 부울 논리

표시기 변수는 부울처럼 보입니까? 유일한 차이점은 "PX"장치가 있다는 것입니다. 그렇다면이 논리적 조합은 어떻습니까? "컨테이너가 화면 너비의 절반보다 크다" 고 "레이아웃은 두 열 모드에 있습니다"와 같은 것을 상상해보십시오. CSS 기능은 다시 구출됩니다!

OR 연산자의 경우 모든 표시기에 max() 사용할 수 있습니다.

 <code>--a_OR_b: max( var(--indicator_a) , var(--indicator_b) );</code>

연산자가 아닌 경우 1px에서 표시기를 빼낼 수 있습니다.

 <code>--NOT_a: calc(1px - var(--indicator_a));</code>

(a, b) = not (또는 (a, b))는 완전한 부울 대수이기 때문에 논리적 순수 주의자들이 여기서 멈출 수 있습니다. 하지만 재미를 위해 여기에 더 많은 것이 있습니다.

그리고:

 <code>--a_AND_b: min(var(--indicator_a), var(--indicator_b));</code>

두 지표가 1px 인 경우에만 1px로 평가됩니다.

min() 및 max() 는 두 개 이상의 매개 변수를 허용합니다. 그들은 여전히 ​​두 개 이상의 지표 변수와 함께 작동합니다.

xor :

 <code>--a_XOR_b: max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) );</code>

두 지표 모두 동일한 값을 갖는 경우 (그리고 경우에만) 두 차이는 0px, max() 이 값을 반환합니다. 표시기가 다른 값을 갖는 경우, 한 용어는 -1px를 제공하고 다른 용어는 1px를 제공합니다. 이 경우 max() 1px를 반환합니다.

두 지표가 같은 상황에 관심이있는 사람이라면 다음 방법을 사용하십시오.

 <code>--a_EQ_b: calc(1px - max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) ) );</code>

예, 이것은 아닙니다 (a xor b) . 이것에 대한 "더 나은"솔루션을 찾을 수 없습니다.

평등은 단순한 지표 변수보다 일반 CSS 길이 변수에 대해 더 흥미로울 수 있습니다. 이것은 clamp() 다시 사용하여 도움이 될 수 있습니다.

 <code>--a_EQUALS_b_general: calc( 1px - clamp(0px, max( var(--var_a) - var(--var_b), var(--var_b) - var(--var_a) ), 1px) );</code>

PX 장치를 제거하여 단위가없는 변수 (적분)의 일반적인 동등성을 얻습니다.

나는 이것이 대부분의 레이아웃에 충분한 부울 논리라고 생각합니다!

추가 내용 2 : 그리드 레이아웃에서 열 수 설정

까마귀는 CSS 길이 값을 반환하는 것으로 제한되므로 그리드의 열 수를 직접 선택할 수 없습니다 (단위가없는 값이기 때문에). 그러나 그것을 작동시키는 방법이 있습니다 (위와 같이 지표 변수를 선언한다고 가정) :

 <code>--number_of_cols_4_wide: 4; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 1; --grid_gap: 0px; --grid_columns_width_4_wide: calc( (100% - (var(--number_of_cols_4_wide) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_wide)); --grid_columns_width_4_medium: calc( (100% - (var(--number_of_cols_4_medium) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_medium)); --grid_columns_width_4_small: calc( (100% - (var(--number_of_cols_4_small) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_small)); --raven_grid_columns_width: calc( /* 使用乌鸦组合值*/ min(var(--is_wide) * var(--very_big_int),var(--grid_columns_width_4_wide)) min(var(--is_medium) * var(--very_big_int),var(--grid_columns_width_4_medium)) min(var(--is_small) * var(--very_big_int),var(--grid_columns_width_4_small)) );</code>

다음 방법을 사용하여 그리드를 설정하십시오.

 <code>.grid_container{ display: grid; grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width)); gap: var(--grid_gap) };</code>

이것은 어떻게 작동합니까?

1. 각 간격에 대해 원하는 열 수를 정의하십시오 (행 1, 2, 3)
2. 각 간격에 대한 완벽한 열 너비를 계산하십시오 (행 5, 6, 7). 여기서 무슨 일이야?

먼저 열에 사용 가능한 공간을 계산합니다. 이것은 100%이며, 간격이 차지할 공간을 뺀 것입니다. 열 n의 경우 (N-1) 갭이 있습니다. 그런 다음이 공간을 원하는 열의 수로 나눕니다. 3. 까마귀를 사용하여 실제 -Base_Size의 올바른 열 너비를 계산하십시오.

그리드 컨테이너 에서이 라인 :

 <code>grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width));</code>

... 그런 다음 크로우가 제공하는 값에 맞는 열 수를 선택하십시오 (이로 인해 -number_of_cols 4 ??? 변수가 발생합니다).

까마귀는 열 번호를 직접 제공하지 못할 수도 있지만 길이를 줄 수있어 repeat 및 autofit 우리가 원하는 숫자를 계산할 수 있습니다.

그러나 auto-fit minmax() 와 같은 일을합니까? 아니요! 위의 솔루션은 3 개의 열 (또는 5 개의 열)을 제공하지 않으며 컨테이너의 너비에 따라 열의 수를 늘릴 필요가 없습니다. 이 펜에서 다음 값을 설정하여 까마귀가 최고 속도로 날아가는 것을보십시오.

 <code>--number_of_cols_4_wide: 1; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 4;</code>

추가 컨텐츠 3 : linear-gradient() 사용하여 배경색을 변경하십시오

이것은 조금 더 뇌 집약적입니다. 까마귀는 길이 값에 관한 것이므로 어떻게이 값에서 색상을 얻을 수 있습니까? 선형 그라디언트는 동시에 두 가지를 모두 처리합니다. 길이 값으로 정의 된 특정 영역에서 색상을 정의합니다. 코드를 입력하기 전에이 개념에 대해 자세히 논의합시다.

실제 그라디언트 부분을 해결하기 위해 잘 알려진 기술은 색상 스톱 포인트를 두 배로 늘려 0px 내에 구배 부품이 효과적으로 발생하는 것입니다. 이 코드를 확인하려면 다음 방법을 배우십시오.

 <code>background-image:linear-gradient( to right, red 0%, red 50%, blue 50%, blue 100% );</code>

이렇게하면 배경이 왼쪽에서 반쪽과 오른쪽의 파란색이됩니다. 첫 번째 매개 변수 "오른쪽"에 유의하십시오. 이는 백분율 값이 왼쪽에서 오른쪽으로 평가됨을 의미합니다.

크로우 변수를 통해 50%의 값을 제어하면 색상 스톱 포인트를 마음대로 움직일 수 있습니다. 더 많은 색상 스톱 포인트를 추가 할 수 있습니다. 실행중인 예에서는 세 가지 색상이 필요하므로 2 개의 (이중) 내부 색상 스톱 포인트가 생깁니다.

색상 및 색상 정지 지점에 대한 일부 변수를 추가하면 이것이 우리가 얻는 것입니다.

 <code>background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code>

그러나 -first_lgbreak_value의 값과 -second_lgbreak_value의 값을 어떻게 계산합니까? 봅시다.

첫 번째 값은 color_small의 가시 위치를 제어합니다. 셀 간격에서는 100%여야하며 다른 간격으로 0px 여야합니다. 우리는 까마귀로 이것을하는 방법을 배웠습니다. 두 번째 변수는 Color_Medium의 가시성을 제어합니다. 작은 간격의 경우 100%여야합니다. 중간 간격의 경우 100%여야합니다. 그러나 넓은 간격의 경우 0px 여야합니다. 컨테이너 폭이 중간 또는 중간 간격이면 해당 표시기는 1px 여야합니다.

우리는 지표에서 부울 로직 작업을 수행 할 수 있기 때문에 다음과 같습니다.

 <code>max(--is_small, --is_medium)</code>

… 올바른 표시기를 얻으려면. 이것은 다음과 같습니다.

 <code>--first_lgbreak_value: min(var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%);</code>

모든 것을 합치면 너비에 따라 배경색을 변경하는 다음 CSS 코드가 생성됩니다 (간격 표시기는 위와 같이 계산됩니다).

 <code>--first_lgbreak_value: min( var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%); --color_wide: red;/* 根据你的需求更改*/ --color_medium: green;/* 根据你的需求更改*/ --color_small: lightblue;/* 根据你的需求更改*/ background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code>

이것은 작동 방식을 볼 수있는 펜입니다.

추가 내용 4 : 중첩 변수를 제거하십시오

Crow를 사용할 때 이상한 문제가 있습니다. calc() 에 사용할 수있는 중첩 변수가 제한되어 있습니다 . 이로 인해 너무 많은 중단 점을 사용할 때 문제가 발생할 수 있습니다. 내가 이해하는 한,이 제한은 스타일을 계산할 때 페이지 차단을 방지하고 더 빠른 원형 참조 점검을 허용하는 것입니다.

제 생각에는 "가치로 평가"와 같은 것이이 문제를 극복하는 좋은 방법이 될 것입니다. 그러나이 한도는 CSS의 한계를 뚫을 때 두통을 유발할 수 있습니다. 이 문제가 미래에 해결 될 수 있기를 바랍니다.

(깊이) 중첩 변수를 사용하지 않고 까마귀의 표시기 변수를 계산하는 방법이 있습니다. -is_medium 값의 원래 계산을 보자.

 <code>--is_medium:calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) );</code>

마이너스 -is_wide에서 문제가 발생합니다. 이로 인해 CSS 파서는 -is_wide의 전체 공식의 정의를 붙여 넣습니다. -is_small 계산은 이런 종류에 대한 더 많은 참조를 가지고 있습니다. (-is_wide의 정의는 -is_medium의 정의에 숨겨져 있고 직접 사용되기 때문에 두 번 붙여 넣습니다.)

다행히도 더 큰 중단 점으로 표시기를 참조하지 않고 지표를 계산하는 방법이 있습니다.

-Base_Size가 간격의 하한 중단 점보다 크고 간격의 상한 중계 중 하나보다 작거나 동일하는 경우에만 표시기가 사실입니다. 이 정의는 다음 코드를 제공합니다.

 <code>--is_medium: min( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px var(--breakpoint_wide) - var(--base_size), 1px) );</code>

• min() 논리 및 연산자로 사용됩니다
• 첫 번째 clamp() 는 "-base_size보다 -breakpoint_medium"입니다.
• 두 번째 clamp() "---base_size가 -breakpoint_wide보다 작거나 같거나 같다"는 것을 의미합니다.
• 1px를 추가하면 "작거나"이하 "보다 작 거나 같은 "으로 전환됩니다. 정수 (픽셀) 숫자를 처리하기 때문에 작동합니다 (A

표시기 변수의 완전한 계산은 이러한 방식으로 수행 할 수 있습니다.

 <code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px); --is_medium: min(clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px var(--breakpoint_wide) - var(--base_size), 1px) ); --is_small: clamp(0px,1px var(--breakpoint_medium) - var(--base_size), 1px);</code>

-is_wide 및 -is_small은 계산하기가 더 간단합니다. 각각은 주어진 중단 점만 점검해야하기 때문입니다.

이것은 우리가 지금까지 본 모든 것에 적용됩니다. 다음은 예제를 결합한 펜입니다.

마지막 생각

Crow는 미디어 쿼리가 할 수있는 모든 것을 할 수 없습니다. 그러나 우리는 CSS에 미디어 쿼리가 있기 때문에 그렇게 할 필요는 없습니다. 사이드 바의 위치 또는 메뉴의 재구성과 같은 "큰"디자인 변경의 경우 괜찮습니다. 이러한 일은 전체 뷰포트 (브라우저 창의 크기)의 맥락에서 발생합니다.

그러나 구성 요소의 경우 구성 요소의 크기를 결코 알지 못하기 때문에 미디어 쿼리가 약간 잘못 되었습니다.

Heydon Pickering 은이 이미지를 사용 하여이 문제를 보여줍니다.

Raven이 구성 요소에 대한 반응 형 레이아웃을 만드는 문제를 극복하고 "CSS가 할 수있는 일"의 한계를 더욱 높이는 데 도움이되기를 바랍니다.

오늘날 가능할 수있는 것을 보여줌으로써 일부 구문 설탕과 CONW, CONH, "제거 장치"또는 "픽셀로 평가"와 같은 매우 작은 새로운 기능을 추가하여 "실제"컨테이너 쿼리를 완료 할 수 있습니다. CSS에 '1px'를 공간으로 다시 작성하고 '0px'를 "초기"로 만들 수있는 함수가있는 경우 Crow는 사용자 지정 속성 전환 트릭과 함께 사용하고 길이 값이 아니라 각 CSS 속성을 변경할 수 있습니다.

이를 달성하기 위해 JavaScript를 피함으로써 레이아웃은 JavaScript 다운로드 또는 실행에 의존하지 않기 때문에 더 빠르게 렌더링됩니다. JavaScript가 비활성화되어 있더라도 중요하지 않습니다. 이 계산은 기본 스레드를 차단하지 않으며 응용 프로그램 로직은 설계 로직으로 엉망이되지 않습니다.

Chris, Andrés Galante, Cathy Dutton, Marko Ilic 및 David Atanda에게 멋진 CSS- 트릭 기사 덕분에 감사합니다. 그들은 실제로 까마귀가 달성 할 수있는 것을 탐구하는 데 도움이되었습니다.

위 내용은 레이븐 기술 : 컨테이너 쿼리에 한 걸음 더 가까이 다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!