Nghiên cứu điển hình về truy vấn vùng chứa

Swetha Gopalakrishnan

Saurabh Rajpal

Cụm từ tìm kiếm về vùng chứa cung cấp phương pháp tiếp cận linh hoạt và linh hoạt để thiết kế của bạn. Truy vấn vùng chứa sử dụng quy tắc @container at. Tính năng này hoạt động theo cách tương tự truy vấn nội dung đa phương tiện bằng @media, nhưng thay vào đó, @container lại truy vấn một cấp độ gốc vùng chứa cho thông tin định kiểu thay vì khung nhìn và tác nhân người dùng.

Truy vấn vùng chứa là một phần của Cơ sở mới có sẵn.

Bằng cách phản hồi kích thước vùng chứa, truy vấn vùng chứa cho phép các thành phần thích ứng vào vị trí của họ trong một giao diện. Ví dụ: thành phần thẻ có thể điều chỉnh kích thước và kiểu theo vùng chứa đặt quảng cáo đó, có thể là thanh bên, hình ảnh chính hoặc lưới trong nội dung chính của trang.

Như trong hình minh hoạ sau đây, bạn có thể kết hợp các truy vấn phương tiện cho macro bố cục, truy vấn vùng chứa cho bố cục vi mô, trong đó có nội dung nghe nhìn dựa trên lựa chọn ưu tiên của người dùng để tạo một hệ thống thiết kế thích ứng mạnh mẽ. Đã đọc tìm hiểu thêm về truy vấn vùng chứa và thiết kế thích ứng mới.

Bài viết này nằm trong loạt bài thảo luận về cách các công ty thương mại điện tử đã nâng cao trang web của họ bằng cách sử dụng các tính năng mới về CSS và giao diện người dùng. Lần này, chúng tôi sẽ tìm hiểu sâu hơn về cách một số công ty đã sử dụng và hưởng lợi từ truy vấn vùng chứa.

redBus

redBus duy trì và phân phát các mã khác nhau cho phiên bản dành cho thiết bị di động và máy tính để bàn của mình. Sau khi triển khai các truy vấn vùng chứa trên Việc cần làm và cargo, họ đã có thể hợp nhất mã này vào một cơ sở mã duy nhất cho các trang web này. Nhờ vậy, các đường liên kết đó có khả năng thích ứng và được lưu thời gian phát triển. Ví dụ sau minh hoạ việc này bằng cách sử dụng trang hàng hoá:

Mã

Trong ví dụ sau, .bpdpCardWrapper là vùng chứa mẹ, có tên là bpdpSection.

Nếu vùng chứa bpdpSection có chiều rộng tối thiểu là 744px, thì font-size và line-height cho các thành phần do .bpdpCardContainer chọn và .subTxt, .bpdpAddress đã được cập nhật.

//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;
   }
}

Tác động

Tokopedia

Trang chi tiết sản phẩm (PDP) của Tokopedia chứa nhiều thẻ cho cửa hàng và thông tin sản phẩm. Trước đây, bố cục của trang này được chia thành ba và đôi khi tên sản phẩm ở bên trái bị cắt bớt cho nhỏ hơn kích thước màn hình (xem video "Trước" sau).

Để giải quyết vấn đề về bố cục này, họ đã dễ dàng và nhanh chóng sử dụng các truy vấn vùng chứa. Sau khi triển khai, chúng có thể có bố cục linh hoạt, tên sản phẩm luôn hiển thị đầy đủ (xem video "Sau" sau).

Trước

Sau

Mã

Đoạn mã sau đây truy vấn kích thước của vùng chứa mẹ có tên infowrapper. Nếu chiều rộng tối đa của infowrapper là 360px thì các thành phần con width, margin, và padding được điều chỉnh.

Việc đặt container-type thành inline-size sẽ truy vấn kích thước theo hướng cùng dòng của cấp độ gốc. Trong ngôn ngữ Latinh như tiếng Anh, đây sẽ là chiều rộng của ký tự vùng chứa mẹ vì văn bản chạy nội tuyến từ trái sang phải.

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;
  }
`;

Những điều cần xem xét khi sử dụng truy vấn vùng chứa

Tokopedia nhận thấy trường hợp sử dụng của họ bằng cách tìm dấu ba chấm trên trang web. Điều này cho biết vùng chứa có thể quá nhỏ, khiến nội dung bị cắt cho người dùng.

Một trường hợp sử dụng hay khác đối với các truy vấn vùng chứa cho trang web thương mại điện tử là xem cho các thành phần được tái sử dụng. Ví dụ: nút Thêm vào giỏ hàng có thể hiển thị dựa trên vùng chứa mẹ (ví dụ: chỉ biểu tượng nếu nằm trong vùng chứa thẻ và biểu tượng sản phẩm có văn bản nếu đó là CTA chính trên trang). Chiến lược phát hành đĩa đơn có thể là một lựa chọn phù hợp cho các truy vấn về vùng chứa.

Bạn có thể chọn cải thiện dần trang web của mình. Ví dụ: bạn có thể bắt đầu bằng những trường hợp sử dụng nhỏ hơn như ví dụ về hình elip của Tokopedia, và triển khai các truy vấn vùng chứa ở đó. Sau đó, chúng tôi dần tìm ra nhiều ca nhiễm hơn và cải thiện CSS.

Tài nguyên:

• Truy vấn vùng chứa nằm trong trình duyệt ổn định
• Truy vấn vùng chứa – Thiết kế trong trình duyệt
• Bản minh hoạ về truy vấn vùng chứa
• Bản minh hoạ: thẻ truy vấn vùng chứa
• Video: Tính năng mới trong giao diện người dùng web – I/O 2023
• Bạn muốn báo cáo lỗi hay yêu cầu tính năng mới? Chúng tôi rất mong được lắng nghe ý kiến của bạn.

Khám phá các bài viết khác trong loạt bài viết này nói về cách thương mại điện tử các công ty được hưởng lợi từ việc sử dụng các tính năng mới của CSS và giao diện người dùng, chẳng hạn như Điều hướng cuộn ảnh động, cửa sổ bật lên, các truy vấn về vùng chứa và bộ chọn has().

• Tại sao Chức năng của giao diện người dùng web lại quan trọng đối với trang web thương mại điện tử của bạn?
• Nghiên cứu điển hình về ảnh động dựa trên cuộn
• Xem nghiên cứu điển hình về việc chuyển đổi
• Nghiên cứu điển hình về cửa sổ bật lên
• :has() chọn trường hợp nghiên cứu