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 mang đến một phương pháp rất linh hoạt và linh hoạt đối với thiết kế thích ứng. Truy vấn vùng chứa sử dụng @container theo quy tắc. Phương thức 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 vùng chứa mẹ để tạo kiểu cho thông tin 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

  • 105
  • 105
  • 110
  • 16

Nguồn

Bằng cách phản hồi vớ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 một 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 được đặt trong đó, có thể là thanh bên, phần chính hoặc lưới trong phần nội dung chính của trang.

Như minh hoạ trong hình minh hoạ sau, bạn có thể kết hợp các truy vấn đa phương tiện cho bố cục macro, truy vấn vùng chứa cho bố cục vi mô, với các truy vấn phương tiện dựa trên lựa chọn ưu tiên của người dùng để tạo ra một hệ thống thiết kế đáp ứng mạnh mẽ. Đọ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 – Đáp ứ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ác tính năng CSS và giao diện người dùng mới. Lần này, chúng ta sẽ đi sâu vào cách một số công ty đã sử dụng và hưởng lợi từ các truy vấn vùng chứa.

redBus

RedBus duy trì và phân phát mã khác nhau cho phiên bản dành cho thiết bị di động và máy tính để bàn. Sau khi triển khai các truy vấn vùng chứa trên các trang Việc cần làm và hàng hoá, họ đã có thể hợp nhất mã này thành một cơ sở mã duy nhất cho các trang web này. Điều này giúp chúng thích ứng và tiết kiệm thời gian phát triển. Ví dụ sau đây minh hoạ điều 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;
   }
}

Mức độ tác động

Trước (nhiều cơ sở mã) Sau (cơ sở mã duy nhất)
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 (chi phí giảm).
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 có thể thực hiện.
Hiệu suất Dễ dàng xử lý vì hệ thống tách biệt nhưng lại trùng lặp nỗ lực cải thiện hiệu suất. Đây là một trang và tính năng cụ thể nhưng điểm số PageSpeedInsights của RedBus cao hơn 80.
Quá trình phát triển Riêng biệt các nhóm nhà phát triển. Giảm được 30% – 40% thời gian.

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 cột và đôi khi tên sản phẩm ở bên trái bị cắt bớt để có kích thước màn hình nhỏ hơn (xem video "Trước" sau đây).

Để giải quyết vấn đề về bố cục này, họ đã sử dụng các truy vấn vùng chứa một cách dễ dàng và nhanh chóng. Sau khi triển khai, họ đã 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 đây).

Trước

Trước khi triển khai truy vấn vùng chứa, các từ "ISKU 10 in 1 Obengsatu.." ở trên cùng bên trái bị cắt bớt để 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 vẫn 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 là 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 theo hướng cùng dòng của thành phần 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 ra trường hợp sử dụng của mình bằng cách tìm dấu ba chấm trên trang web. Đ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 bớt đối với người dùng.

Một trường hợp sử dụng hiệu quả khác cho truy vấn vùng chứa cho trang web thương mại điện tử là để ý đế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ể xuất hiện theo cách khác nhau dựa trên vùng chứa gốc (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à CTA chính trên trang). Nút có thể là một đề xuất phù hợp cho các truy vấn vùng chứa.

Bạn có thể chọn thực hiện các biện pháp cải thiện dần cho 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ụ hình elip của Tokopedia, rồi triển khai các truy vấn vùng chứa tại đó. Sau đó, hãy dần dần tìm thêm các trường hợp 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 này nói về cách các công ty thương mại điện tử được hưởng lợi từ việc sử dụng các tính năng CSS và giao diện người dùng mới, chẳng hạn như ảnh động cuộn, cửa sổ bật lên, truy vấn vùng chứa và bộ chọn has().