Trang này được dịch bởi Cloud Translation API.

Nghiên cứu điển hình về cửa sổ bật lên

Swetha Gopalakrishnan

Saurabh Rajpal

Cửa sổ bật lên ở mọi nơi trên web. Bạn có thể thấy chúng trong trình đơn, nút bật/tắt và hộp thoại, dùng cho các tính năng như cài đặt tài khoản, tiện ích thông tin công bố và bản xem trước thẻ sản phẩm. Mặc dù các thành phần này phổ biến như thế nào, nhưng việc tạo dựng chúng trong các trình duyệt vẫn rườm rà một cách đáng ngạc nhiên. Để giải quyết vấn đề này, một nhóm API HTML khai báo để tạo cửa sổ bật lên sắp được triển khai cho các trình duyệt, đó là API Popover.

Cửa sổ bật lên là một phần của chương trình Baseline Newly Available.

Hỗ trợ trình duyệt

Nguồn

Cửa sổ bật lên thường bị nhầm lẫn với hộp thoại. Tuy nhiên, có một số về những điểm khác biệt về hành vi. Một phần tử dialog được mở bằng dialog.showModal (hộp thoại phương thức), là một trải nghiệm yêu cầu tương tác rõ ràng của người dùng để đóng cửa sổ phụ. popover hỗ trợ tính năng đóng dựa trên ánh sáng. Phương thức dialog thì không. Hộp thoại phương thức đặt phần còn lại của trang ở chế độ trơ. popover thì không. Đọc thêm về sự khác biệt.

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 sử dụng các tính năng mới về CSS và giao diện người dùng. Trong bài viết này, hãy khám phá cách Tokopedia triển khai và hưởng lợi từ API Popover.

Tokopedia

Việc sử dụng các thuộc tính cửa sổ bật lên giúp giảm tới 70% dòng mã trong React. Cửa sổ phụ có thể được kiểm soát tự nhiên bằng HTML thay vì yêu cầu xử lý sự kiện trong JavaScript và sử dụng React.createPortal để di chuyển DOM phương thức đến cuối document.body. Chúng ta cũng có thể sử dụng @starting-style để tạo ảnh động mở và đóng cửa sổ bật lên.—Andy Wihalim, Phần mềm cấp cao Kỹ sư, Tokopedia.

Các trang chi tiết sản phẩm (PDP) của Tokopedia chứa nhiều hình ảnh sản phẩm cho mỗi trang của Google. Khi người dùng nhấp vào hình thu nhỏ của sản phẩm, một cửa sổ sẽ mở ra để cho thấy hình ảnh phóng to. Đây là một mẫu phổ biến được sử dụng trong các trang web thương mại điện tử.

Mã

Tokopedia sử dụng React để phát triển giao diện người dùng. Trước khi triển khai cửa sổ bật lên cho cửa sổ phụ này, họ đã sử dụng cửa sổ phụ và một nút. Nút đã thay đổi trạng thái React (Phản ứng) để mở cửa sổ phụ. Với API cửa sổ bật lên, họ chỉ định một Thuộc tính popovertarget trong phần tử mở ra cửa sổ bật lên kèm theo một giá trị giống với mã nhận dạng của phần tử cửa sổ bật lên.

Với cách triển khai cơ bản này, cửa sổ bật lên vẫn hoạt động nhưng sẽ xuất hiện rồi biến mất mà không cần bất kỳ hoạt ảnh nào. Để tạo ảnh động vào và thoát mượt mà cho cửa sổ bật lên, hãy sử dụng :popover-open và @starting-style đồng thời cho phép ảnh động các tính chất rời rạc. Trong ví dụ về mã sau, cửa sổ bật lên sẽ thu nhỏ và thu nhỏ bằng cách sử dụng transform: 'scale()'.

Ví dụ về mã này cho thấy cách triển khai ảnh động nhập và thoát cho API cửa sổ bật lên.

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },
  transform: 'scale(0.8)',
  opacity: 0,

  '&:popover-open': {
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
    transform: 'scale(1)',
    opacity: 1,
  },
});

Để phục vụ cho các trình duyệt không hỗ trợ API cửa sổ bật lên, Tokopedia đã triển khai popover-polyfill theo điểm lẻ, chỉ có 3,2 KB khi nén gzip. Họ hài lòng với polyfill vì phương thức này hoạt động tốt và không gây ra sự hồi quy hiệu suất. Nhìn chung, có thể giảm tới 70% dòng mã trong React bằng API bật lên.

Tokopedia sử dụng React và họ đã đạt được khả năng phân tách mã bằng cách ngắt kết nối thành phần cửa sổ bật lên cho các trang không sử dụng, sau đó thực hiện phân tách mã cho phần tử cửa sổ bật lên. Bằng cách này, họ đã giảm quy mô của yêu cầu ban đầu.

Cân nhắc việc kết hợp cửa sổ bật lên với vị trí neo CSS (sắp có trên Chrome) để đặt chúng so với các phần tử khác. Dữ liệu này rất hữu ích, chẳng hạn như đối với trình đơn và chú thích.

Tài nguyên

Giới thiệu API Cửa sổ bật lên
Sự khác biệt giữa cửa sổ bật lên và hộp thoại
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().

Nghiên cứu điển hình về cửa sổ bật lên

Tokopedia

Mã

Những điều cần xem xét khi sử dụng API Popover

Tài nguyên