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

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.

Hỗ trợ trình duyệt

  • Chrome: 105.
  • Cạnh: 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à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.

Hình ảnh cho thấy cách các kiểu kết hợp với nhau.
web.dev – Ứng dụng phản hồi 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

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 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 tính nhất quán kém. Khó giải quyết nhưng khả thi.
Hiệu suất Dễ xử lý vì hệ thống riêng biệt nhưng trùng lặp với việc cải thiện hiệu suất. Đây là trang và tính năng cụ thể nhưng điểm số PageSpeedInsights của RedBus trên 80.
Quá trình phát triển Tách biệt các nhóm nhà phát triển. Rút ngắn thời gian 30% – 40%.

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

Trước khi triển khai các truy vấn về vùng chứa, cụm từ "ISKU 10 in 1 Obeng satu.." ở trên cùng bên trái sẽ 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 để đảm bảo văn bản nằm trong khung nhìn.

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:

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().