컨테이너 쿼리 우수사례

Swetha Gopalakrishnan

Saurabh Rajpal

컨테이너 쿼리 매우 동적이고 유연한 접근 방식을 통해 설계했습니다. 컨테이너 쿼리는 @container at 규칙을 사용합니다. 이는 비슷한 @media를 사용하여 미디어 쿼리로 연결하는 대신 @container가 상위 요소를 쿼리합니다. 표시 영역 및 사용자 에이전트가 아닌 스타일 지정 정보 컨테이너를 사용합니다.

컨테이너 쿼리는 새로 사용 가능한 기준의 일부입니다.

컨테이너 쿼리는 컨테이너 크기에 응답함으로써 구성요소가 인터페이스 내 해당 위치로 복사됩니다. 예를 들어 카드 구성요소는 사이드바, 히어로 등 배치된 컨테이너에 따라 크기와 스타일을 정해야 합니다. 섹션 또는 페이지 본문 내의 그리드입니다.

다음 그림과 같이 매크로를 위해 미디어 쿼리를 결합할 수 있습니다. 사용자 환경설정 기반 미디어가 포함된 마이크로 레이아웃용 컨테이너 쿼리 사용하여 강력한 반응형 디자인 시스템을 만들 수 있습니다. 읽기 컨테이너 쿼리에 대해 자세히 알아보고 새로운 반응형 디자인을 도입했습니다.

</ph>

이 글은 전자상거래 회사들의 새로운 CSS 및 UI 기능을 사용하여 웹사이트를 개선했습니다. 이번에는 을 통해 컨테이너 쿼리를 사용하고 그로부터 혜택을 얻은 방법을 살펴봤습니다.

redBus

redBus는 모바일 및 데스크톱 버전에 대해 서로 다른 코드를 유지하고 제공합니다. 애플리케이션에 컨테이너 쿼리를 구현한 후 즐길 거리 및 cargo 페이지에서 이 코드를 통합했으며 하나의 코드베이스로 만들 수 있습니다. 이렇게 하면 시간을 절약할 수 있습니다 다음 예는 cargo 페이지를 사용하여 이를 보여줍니다.

코드

다음 예에서 .bpdpCardWrapper는 상위 컨테이너입니다. 이름은 bpdpSection입니다.

컨테이너 bpdpSection의 최소 너비가 744px인 경우 font-size .bpdpCardContainer 및 line-height가 선택한 구성요소의 .subTxt, .bpdpAddress이 업데이트되었습니다.

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

영향

Tokopedia

Tokopedia의 제품 세부정보 페이지 (PDP)에는 매장과 확인할 수 있습니다 이전에는 이 페이지의 레이아웃이 세 개의 왼쪽에 있는 제품 이름이 잘려서 잘린 상태로 표시될 수 있습니다. 화면 크기 (다음 '이전' 동영상 참고)를 참고하세요.

이 레이아웃 문제를 해결하기 위해 팀은 컨테이너 쿼리를 쉽고 빠르게 채택했습니다. 이 구현 후, 회사들은 제품 이름은 항상 전체가 표시되었습니다 (다음 '이후' 동영상 참고).

이전

이후

코드

다음 코드는 infowrapper라는 상위 컨테이너의 크기를 쿼리합니다. infowrapper의 최대 너비가 360픽셀이면 하위 구성요소의 width, margin,, padding가 조정됩니다.

container-type를 inline-size로 설정하면 인라인 방향 크기를 쿼리합니다. 를 참조하세요. 영어와 같은 라틴어의 경우 너비는 텍스트가 왼쪽에서 오른쪽으로 인라인으로 흐르기 때문입니다.

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

컨테이너 쿼리 사용 시 고려해야 할 사항

Tokopedia는 사이트에서 텍스트 생략 부호를 찾아 사용 사례를 찾았습니다. 이는 컨테이너가 너무 작아서 콘텐츠가 잘릴 수 있음을 나타냅니다. 해제되어 있습니다.

전자상거래 사이트에서 컨테이너 쿼리를 사용하는 또 다른 좋은 사용 사례는 구성 요소가 포함됩니다. 예를 들어 장바구니에 추가 버튼이 표시될 수 있습니다. 다르게 표시됩니다 (예: 페이지의 기본 CTA인 경우 텍스트가 포함된 제품 카드 및 아이콘). 이 버튼은 컨테이너 쿼리에 적절할 수 있습니다.

원하는 경우 사이트를 점진적으로 개선할 수 있습니다. 예를 들어 Tokopedia의 타원 예와 같이 더 작은 사용 사례로 시작할 수 있습니다. 거기에 컨테이너 쿼리를 구현합니다 그런 다음 점차 더 많은 사례와 CSS를 개선할 수 있습니다.

리소스:

• 안정적인 브라우저에서 컨테이너 쿼리가 실행됨
• 컨테이너 쿼리 - 브라우저에서 설계하기
• 컨테이너 쿼리 데모
• 데모: 컨테이너 쿼리 카드
• 동영상: 웹 UI의 새로운 기능 - I/O 2023
• 버그를 신고하거나 새 기능을 요청하시겠어요? 의견을 들려주세요.

이 시리즈의 다른 기사에서 전자상거래가 어떻게 기업들은 스크롤 기반 전략과 같은 새로운 CSS 및 UI 기능을 사용하여 애니메이션, 팝오버, 컨테이너 쿼리, has() 선택기 등이 포함됩니다.

• 웹 UI 기능이 전자상거래 사이트에 중요한 이유는 무엇인가요?
• 스크롤 기반 애니메이션 우수사례
• 전환 우수사례 보기
• 팝오버 우수사례
• :has() 선택자 우수사례