Ahmad Shadeed는 컨테이너 쿼리를 일찍 시작했으며 증가하는 예제 모음 일상적인 패턴을 바탕으로
그리고 당신이 그것을 놓쳤다면, 그의 컨테이너 쿼리에 대한 최신 게시물 이번 달에 Chrome 105에 상륙한 이후 작동 방식을 훌륭하게 다루고 있습니다(곧 Safari 16에서 볼 수 있습니다). 일부 선택 하이라이트 및 요약:
- 컨테이너는 다음과 같이 정의됩니다.
container-type재산. 이전 데모 및 제안은contain대신. - 컨테이너 쿼리는 뷰포트 크기를 대상으로 하기 위해 계속 작성해 온 미디어 쿼리와 매우 유사합니다. 따라서 다음과 같은 것보다
@media (min-width: 600px) {}, 우리는@container (min-width: 600px) {}. 그러면 새로운 중단점 값을 알아내는 작업을 뺀 많은 미디어 쿼리를 컨테이너 쿼리로 매우 간단하게 변환할 수 있습니다. - 코드에서 컨테이너를 구별하는 데 도움이 되도록 컨테이너 이름을 지정할 수 있습니다(예:
container-name: blockquote).
잘했어, 아마드! 그리고 공유해주셔서 감사합니다!
