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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

Truy vấn vùng chứa mang đến một phương pháp linh hoạt và có tính động cao cho thiết kế thích ứng. Cụm từ tìm kiếm vùng chứa sử dụng quy tắc @container. Thao tác này hoạt động tương tự như một truy vấn nội dung nghe nhìn có @media, nhưng thay vào đó, @container truy vấn một vùng chứa mẹ để biết thông tin về kiểu thay vì khung hiển thị và tác nhân người dùng.

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ụ: 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 vào, cho dù đó là thanh bên, phần chính hoặc lưới trong nội dung chính của một trang.

Như minh hoạ dưới đây, bạn có thể kết hợp các truy vấn nội dung nghe nhìn cho bố cục vĩ mô, truy vấn vùng chứa cho bố cục vi mô, với các 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ế linh hoạt 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 minh hoạ cách các kiểu định kiểu khác nhau kết hợp với nhau.
web.dev – Thiết kế web đáp ứng mới.

Bài viết này là một phần 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 của CSS và giao diện người dùng. Lần này, chúng ta sẽ tìm hiểu 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 mã khác nhau cho phiên bản dành cho thiết bị di động và phiên bản dành cho máy tính. 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 toàn bộ mã nguồn duy nhất cho các trang web này. Điều này giúp các thành phần phản hồi nhanh và tiết kiệm thời gian phát triển. Ví dụ sau đây minh hoạ việc này bằ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 toàn bộ mã nguồn) Sau (toàn bộ mã nguồ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 tính nhất quán kém. Khó giải quyết nhưng vẫn có thể.
Hiệu suất Dễ xử lý vì hệ thống tách biệt nhưng trùng lặp nỗ lực cải thiện hiệu suất. Đây là trang và tính năng cụ thể nhưng điểm PageSpeedInsights của redBus cao hơn 80.
Quá trình phát triển Các nhóm nhà phát triển riêng biệt. Giảm 30% – 40% thời gian.

Tokopedia

Trang chi tiết sản phẩm (PDP) của Tokopedia có 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 3 cột và đôi khi tên sản phẩm ở bên trái bị cắt bớt đối với 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 áp dụng các truy vấn vùng chứa. Sau khi triển khai, họ có thể có một bố cục linh hoạt, trong đó tên sản phẩm luôn hiển thị đầy đủ (xem video "Sau khi triển khai" sau đây).

Trước

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

Sau

Việc triển khai các 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ã

Đoạn 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.

Đặ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 sẽ hiển thị 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 cân nhắc 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 chấm lửng trong văn bản trên trang web của họ. Điều này cho thấy những 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 khác phù hợp với truy vấn vùng chứa cho các trang web thương mại điện tử là tìm kiếm các thành phần được 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 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à một CTA chính trên trang). Nút này có thể là một lựa chọn phù hợp cho các truy vấn vùng chứa.

Bạn có thể chọn cải thiện trang web của mình theo từng bước. 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 ở đó. Sau đó, hãy tìm thêm các trường hợp và cải thiện CSS một cách dần dần.

Tài nguyên:

Khám phá các bài viết khác trong loạt bài này để tìm hiểu 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 CSS và các tính năng giao diện người dùng mới như ảnh động dựa trên thao tác cuộn, cửa sổ bật lên, truy vấn vùng chứa và bộ chọn has().