컨테이너 쿼리를 잊지 말자

CSS 컨테이너 쿼리는 항상 개발자가 개선을 강력하게 요구하는 기능 중 하나였습니다. 컨테이너 쿼리가있는 경우 페이지 크기에 따라 많은 글로벌 미디어 쿼리를 작성할 필요가 없다는 일반적인 견해입니다. 우리가 실제로 제어하고자하는 것은 더 로컬 컨테이너이기 때문에 이제는 CSS에서 가장 좋은 도구이기 때문에 미디어 쿼리를 사용하여 만 구현할 수 있습니다. 나는 이것에 완전히 동의합니다.

그러나 때때로 나타나는 견해도 있습니다. "개발자들은 컨테이너 쿼리가 필요하다고 생각하지만 그렇지 않습니다." 이 진술에 동의하지 않습니다. 컨테이너 쿼리를 사용할 수 있다면, 우리는 분명히 많은 유용한 작업을 수행 할 수 있습니다. 가장 중요한 것은 클리너를 작성하고 포트가 쉽게 작성하고 코드를 이해하기 쉬운 것입니다. 오늘날 구성 요소 기반 UI를 구축하는 것은 합의 인 것 같습니다.

현재 오늘날 컨테이너 쿼리를 사용할 수있는 현대적인 JavaScript 방법이 있지만이 기술이 JavaScript 영역에 머물러 있어야한다는 의미는 아닙니다. CSS에서 더 의미가 있습니다.

2019 년 말 에이 주제에 대한 나의 생각은 다음과 같습니다.

• Philip Walton의 "반응 형 구성 요소 : 컨테이너 쿼리 문제를 해결하기위한 솔루션"은 JavaScript의 ResizeObserver를 사용하여 현재 문제를 해결하는 좋은 방법을 보여줍니다. 잘 수행하고 어디서나 작동합니다. 데모 웹 사이트는 반응 형 구성 요소의 요구를 강조하기 때문에 가장 좋은 웹 사이트입니다 (다른 문서화 된 사용 사례가 있지만). 필립은 순수한 CSS 솔루션이 더 이상적이라고 말합니다.
• 약 1 년 전, CSS 중첩은 열풍을 일으켰습니다. 토론은 둥지가 가능하다는 것을 보여줍니다. 합리적인 Sass Nesting의 오랜 옹호자로서, 나는 그것에 동의합니다. 따라서 컨테이너 쿼리의 구문이 비슷한 것을 활용할 수 있는지 궁금합니다. 아마도 중첩 쿼리의 범위가 부모 선택기로 제한됩니까? 또는 현재 사양이 자손 선택기와 마찬가지로 미디어 문장을 나타내는 앰퍼 샌드를 접두사로 사용합니까?
• 다른 제안 된 구문은 일반적으로 .container:media(max-width: 400px) { } 과 같은 어떤 종류의 결장의 사용을 포함합니다. 나도 좋아한다. 단일 콜론 선택기 (의사 선택자)는 철학적으로 "이러한 조건에서 요소 선택" - 예를 들어 :hover , :nth-child 등 - 미디어 범위가 의미가 있습니다.
• 구문 이이 기능에 가장 큰 장애물이라고 생각하지 않습니다. 구현 성능입니다. 마지막으로 아는 한, 그것은 성능이 훨씬 더 많기 때문에 브라우저 작동 방식에 대한 전체 렌더링 프로세스를 방해하고 있습니다. 이것은 큰 장애물 인 것 같습니다. 그러나 나는 여전히 그것을 잊고 싶지 않습니다. 인터넷에서 많은 혁신이 일어나고 있으며, 오늘날이를 달성하는 방법이 명확하지 않다고해서 내일 아무도 실행 가능한 방법을 찾을 수 없다는 것을 의미하지는 않습니다.

위 내용은 컨테이너 쿼리를 잊지 말자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!