우리는 용기 조회로 크기 조정 해커를 만들 수 있습니까?

만약 당신이 CSS의 새로운 발전에 관심을 가지고 있다면, 용기 조회가 곧 다가온다는 것을 들은 적이 있을 것이다.여기서 기본 지식을 소개하지만, 다시 보려면 Una의 "Next Gen CSS: @container” 기사를 참조하십시오.우리 스스로 몇 가지 기본 지식을 탐색한 후에, 우리는 그것들로 아주 재미있는 것들을 구축할 것이다. 그것은 새로운 CSS meme이고, 피터 그리피안 (Peter Griffin) 이 블라인드로 크게 놀란 공연이다
그럼 용기 조회는 무엇입니까?그렇습니다.컨테이너 질의는 뷰포트 크기 등을 조회하는 미디어 질의가 있는 것처럼 컨테이너의 크기를 조회할 수 있습니다.이를 바탕으로 우리는 상기 용기의 하위 용기에 서로 다른 양식을 적용할 수 있다.
얘는 뭐 같아?정확한 기준은 마련 중이다.그러나 현재 상황은 이렇다.

.container {
  contain: layout size;
  /* Or... */
  contain: layout inline-size;
}

@container (min-width: 768px) {
  .child { background: hotpink; }
}

layout 키워드는 요소에 대해 layout-containment을 엽니다.inline-size은 사용자가 더욱 구체적으로 안전 케이스를 이해할 수 있도록 한다.이것은 우리가 현재 용기의 width만 조회할 수 있다는 것을 의미한다.size을 통해 우리는 컨테이너의 height을 조회할 수 있다.
다시 한 번 말하지만, 우리는 여전히 바꿀 수 있다.본문을 작성할 때 용기 조회(polyfill이 없음)를 사용하는 유일한 방법은 Chrome Canary(chrome://flags)의 표지 뒤에 있다.나는 당신이 csswg.org의 초고를 빨리 읽는 것을 절대적으로 건의합니다.
게임을 시작하는 가장 간단한 방법은 크기를 조절할 수 있는 용기 요소를 보여주는 시범을 신속하게 만드는 것이다.contain 값을 변경하여 프레젠테이션이 어떻게 응답하는지 확인합니다.이 프레젠테이션은 축을 제한하지 않고 contain: layout size을 사용합니다.용기의 height과 width이 모두 일부 한도값을 만족시킬 때 셔츠의 사이즈는 조정된다.

@container (min-width: 400px) and (min-height: 400px) {
  .t-shirt__container {
    --size: "L";
    --scale: 2;
  }
}

이것이 바로 당신이 지금 알아야 할 용기 조회에 관한 내용입니다.그것은 사실상 새로운 CSS 줄일 뿐이다.
유일한 문제는 지금까지 내가 본 대부분의 용기 조회 시범은 매우 표준적인'카드'예시를 사용하여 이 개념을 시범적으로 보여 주었다는 것이다.오해하지 마세요. 카드는 용기 조회의 좋은 용례이기 때문입니다.카드 구성 요소는 실제로 용기 조회의 포스터 하위 구성 요소입니다.통용되는 카드 디자인과 서로 다른 레이아웃에서 사용할 때 어떤 영향을 받을지 고려해 보자.이것은 흔히 볼 수 있는 문제다.우리들 중 많은 사람들이 이런 프로젝트에 종사한 적이 있다. 결국 우리는 각양각색의 카드를 만들었고, 이 카드들은 모두 그들의 서로 다른 배치에 영합했다.
그러나 카드는 용기 조회를 시작하도록 자극할 수 없다.나는 그들이 더 큰 한계로 밀려 재미있는 일을 하는 것을 보고 싶다.나는 티셔츠 사이즈 시범에서 그들과 약간의 놀이를 한 적이 있다.나는 내가 깊이 연구하기 시작할 때까지 더 좋은 브라우저 지원을 기다릴 계획이다. (나는 현재 Brave 사용자이다.)그런데 용기 조회를 공유했어요polyfill!

제이🐻🛠
@jh3yy

며칠 전에 용기를 공유해 달라고 큰 소리로 외쳤다👏이것은 나로 하여금 해커 공격을 시작하게 했다.😅 twitter.com/bramusblog/sta…
2021년 4월 30일 오후 22:22
브라운우리
# 브라무스 브로그
CQFill은 CSS 컨테이너 쿼리의 Polyfill(작성자 @jon neal)
🔗 https://t.co/koWPzUccMk
🏷 #ContainerQueries#css#polyfillhttps://t.co/jVxGdSMuzO
이것은 나로 하여금 해커 용기를 조회하는 방법을 생각하게 했다.
⚠️ 스포일러 경보: 내 해커는 소용없어.이것은 일시적인 것이거나 적어도 나는 그렇다고 생각한다.그러나 용기 조회를 둘러싼 더 많은 대화를 불러일으키기 때문에 사실상 좋은 일이다.
내 생각은 뭐야?"Checkbox Hack"과 비슷한 것을 만들고 싶지만 용기 조회에 사용합니다.

<div class="container">
  <div class="container__resizer"></div>
  <div class="container__fixed-content"></div>
</div>

이 생각은 용기에 크기를 조절할 수 있는 원소가 있고 그 다음에 용기 바깥쪽에 고정된 위치에 있는 원소가 있다는 것이다.컨테이너 크기를 조정하면 컨테이너 질의를 트리거하고 고정 요소의 스타일을 재설정할 수 있습니다.

.container {
  contain: layout size;
}

.container__resize {
  resize: vertical;
  overflow: hidden;
  width: 200px;
  min-height: 100px;
  max-height: 500px;
}

.container__fixed-content {
  position: fixed;
  left: 200%;
  top: 0;
  background: red;
}

@container(min-height: 300px) {
  .container__fixed-content {
    background: blue;
  }
}

프레젠테이션의 빨간색 상자 크기를 조정해 보십시오.그것은 보라색 상자의 색깔을 바꿀 것이다.

우리는 용기 조회로 고전적인 CSS 모인을 폭로할 수 있습니까?

이 작품을 보고 나는 흥분해 마지않았다.마지막으로 CSS로 Peter Griffin CSS mee 버전을 만들고 이를 폭로할 기회가 있습니다!

너는 아마도 모인을 본 적이 있을 것이다.이것은 문을 두드리는 소리여서 관리하기가 얼마나 어려운가.나는 [email protected]으로 이 시연을 만들었다. 물론 나도 작은 동작을 했다.😅
이동 손잡이는 원소의 크기를 조절하여 용기의 크기에 영향을 준다.서로 다른 용기 단점은 CSS 변수 --open을 0에서 1으로 업데이트하는데 그 중에서 1은'열기', 0은'닫기'상태이다.

@container (min-height: 54px) {
  .blinds__blinds {
    --open: 0.1;
  }
}
@media --css-container and (min-height: 54px) {
  .blinds__blinds {
    --open: 0.1;
  }
}
@container (min-height: 58px) {
  .blinds__blinds {
    --open: 0.2;
  }
}
@media --css-container and (min-height: 58px) {
  .blinds__blinds {
    --open: 0.2;
  }
}
@container (min-height: 62px) {
  .blinds__blinds {
    --open: 0.3;
  }
}
@media --css-container and (min-height: 62px) {
  .blinds__blinds {
    --open: 0.3;
  }
}

근데내가 말한 바와 같이 이런 해커는 불가능하다.

무서웠어
#영토 문제

인라인 크기를 포함하여 블록(높이) 질의를 허용하지 않아야 하는 Hmmm너는 아마도 js polyfill의 버그를 풀고 있을 것이다.나는 이 생각을 좋아하지만, 나는 CSS에서 용기 조회를 사용할 때 이런 방법은 통하지 않는다고 생각한다.
2021년 5월 1일 오전 05:39
이곳에서 가장 좋은 것은 용기 조회가 어떻게 작동하는지에 대한 토론을 불러일으켰다는 것이다.용기 조회polyfill의 오류도 강조했습니다. 이 오류는 이미 복구되었습니다.하지만 나는 이런 해커의 효과를 매우 보고 싶다.
Miriam Suzanne은 컨테이너 쿼리를 중심으로 멋진 콘텐츠를 만들어 왔습니다.이 능력들은 이미 매우 큰 변화가 생겼다.이것이 바로 최전방에서 생활하는 위험이다.her latest articles 중 하나가 현재 상태를 총괄했다.

조나슨 닐
# 조인 오닐

금방 고칠게요.규범을 따르는 것이 매우 중요하다.그나저나 얼마나 많은 동영상과 시연이 '내보내기' 행위에 의존했는지 걱정이다.main에 아직 발표되지 않은 코드가 이 요구를 포기했기 때문에 "import"/path/to/cqfill.js'는 모든 것이 필요할 것이다.
2021년 5월 2일 새벽 3:12
비록 나의 최초의 프레젠테이션/해독은 성공하지 못했지만, 우리는 여전히 '크기 조정' 의 해독을 사용하여 이 블라인드를 만들 수 있다.마찬가지로 만약에 우리가 height을 사용한다면 우리는 contain: layout size을 조회할 수 있다.방주: 흥미로운 것은 현재 contain을 사용하여 하위 요소의 크기에 따라 용기의 높이를 조회할 수 없다는 것이다.
어쨌든이 프레젠테이션을 고려해 보십시오.
화살표는 컨테이너 크기 조절에 따라 회전합니다.이 팁은 컨테이너 쿼리를 사용하여 역할 영역 CSS 사용자 정의 속성을 업데이트하는 것입니다.

.container {
  contain: layout size;
}

.arrow {
  transform: rotate(var(--rotate, 0deg));
}

@container(min-height: 200px) {
  .arrow {
    --rotate: 90deg;
  }
}

여기에 용기 조회 기교가 하나 있다.첫 번째 해킹 개념을 사용할 수 없는 단점은 우리가 완전히 3D화할 수 없다는 것이다.hidden이 넘으면 작업이 중지됩니다.우리는 창문을 통과하는 밧줄이 더 필요하다. 이것은 창턱이 우리의 갈 길을 막는다는 것을 의미한다.
하지만 우리는 거의 그곳에 도착할 수 있다.
이 프레젠테이션은 예비 프로세서를 사용하여 용기 조회 절차를 생성합니다.매 단계마다 역할 영역 사용자 정의 속성을 업데이트합니다.이것은 피터를 밝히고 블라인드를 열었다.
이곳의 기교는 용기를 확대해서 크기를 조절하는 손잡이를 더욱 크게 하는 것이다.그리고 나서 나는 내용의 비율을 줄여서 그것의 용도에 적응했다.
이 흥미로운 시범인'모인 폭로'는 아직 100%가 아니지만, 우리는 그것과 점점 가까워졌다.용기 조회는 사람을 흥분시키는 전망이다.브라우저 지원이 발전함에 따라 브라우저가 어떻게 변할지 흥미로운 일이다.사람들이 그것을 어떻게 이용하거나 다른 방식으로 이용하는지 보는 것도 흥분된다.
누가 알겠는가?언젠가는'크기 조정 해커'가 악명 높은'체크 박스 해커'와 잘 결합할 수도 있다.
잘 유지하고 있어!ʕ •ᴥ•ʔ