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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Truy vấn vùng chứa cung cấp một phương pháp linh hoạt và linh động cao cho thiết kế thích ứng. Truy vấn vùng chứa sử dụng quy tắc @container at. Điều này hoạt động theo cách tương tự như truy vấn nội dung nghe nhìn với @media, nhưng thay vào đó, @container sẽ truy vấn một vùng chứa mẹ để có 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 Dữ liệu cơ sở mới có sẵn.

Hỗ trợ trình duyệt

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Nguồ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ới vị trí của chúng trong giao diện. Ví dụ: một thành phần thẻ có thể điều chỉnh kích thước và kiểu theo vùng chứa mà thành phần đó được đặt trong đó, cho dù đó là thanh bên, phần tiêu đề hoặc lưới trong phần nội dung chính của trang.

Như minh hoạ trong hình sau, bạn có thể kết hợp truy vấn nội dung nghe nhìn cho bố cục macro, truy vấn vùng chứa cho bố cục vi mô với truy vấn 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ẽ. Hãy đọc thêm về truy vấn vùng chứa và thiết kế thích ứng mới.

Hình ảnh cho thấy cách các kiểu khác nhau hoạt động cùng nhau.
web.dev – Kiểu dáng mới, đáp ứng mọi nhu cầu.

Bài viết này nằm trong loạt bài thảo luận 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 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 ta sẽ tìm hiểu sâu 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ề vùng chứa trên trang Việc cần làm và hàng hoá, 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ờ đó, ứng dụng có thể phản hồi nhanh và tiết kiệm được thời gian phát triển. Ví dụ sau đây 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 và .subTxt, .bpdpAddress chọn sẽ đượ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

Trước (nhiều cơ sở mã) Sau (cơ sở mã đơn)
Cơ sở hạ tầng Cơ sở hạ tầng riêng biệt (chi phí cao). Cùng một cơ sở hạ tầng (giảm chi phí).
Thiết kế Giao diện người dùng riêng biệt nhưng thiếu tính nhất quán. Khó giải quyết nhưng khả thi.
Hiệu suất Dễ xử lý vì hệ thống tách biệt nhưng lại lặp lại nỗ lực cải thiện hiệu suất. Đây là điểm số dành riêng cho trang và tính năng, nhưng điểm số PageSpeedInsights của redBus là trên 80.
Quá trình phát triển Tách biệt các nhóm nhà phát triển. Giảm 30% – 40% thời gian.

Tokopedia

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

Để 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, trong đó tên sản phẩm luôn hiển thị đầy đủ (xem video "Sau" sau).

Trước

Trước khi triển khai các truy vấn về vùng chứa, dòng chữ "ISKU 10 in 1 Obeng satu.." ở trên cùng bên trái bị cắt bớt đối với các kích thước màn hình nhỏ hơn.

Sau

Việc triển khai truy vấn vùng chứa sẽ điều chỉnh bố cục để giữ văn bản trong khung nhìn.

Mã

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ì width, margin, và padding của các thành phần con sẽ được điều chỉnh.

Việc đặt container-type thành inline-size sẽ truy vấn kích thước hướng nội tuyến của phần tử mẹ. Trong các ngôn ngữ Latinh như tiếng Anh, đây sẽ là chiều rộng của vùng chứa mẹ, vì văn bản chạy cùng dòng 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 đã tìm thấy trường hợp sử dụng của mình bằng cách tìm dấu ba chấm văn bản trên trang web của họ. Điều này cho biết các vùng chứa có thể quá nhỏ, khiến nội dung bị cắt đối với người dùng.

Một trường hợp sử dụng tốt khác cho các truy vấn vùng chứa cho trang web thương mại điện tử là chú ý đến các thành phần được sử dụng lại. Ví dụ: nút Thêm vào giỏ hàng có thể hiển thị khác nhau dựa trên vùng chứa mẹ (ví dụ: chỉ biểu tượng nếu nằm trong thẻ sản phẩm và biểu tượng có văn bản nếu đó là lời kêu gọi hành động chính trên trang). Nút này có thể là một ứng cử viên phù hợp cho các truy vấn 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 với các 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 tại đó. Sau đó, hãy dần tìm thêm các trường hợp và cải thiện CSS.

Tài nguyên:

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