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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Cửa sổ bật lên xuất hiện ở khắp mọi nơi trên web. Bạn có thể thấy các thẻ này trong trình đơn, lời nhắc bật/tắt và hộp thoại, được dùng cho các tính năng như chế độ 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 rất phổ biến, nhưng việc xây dựng chúng trong trình duyệt vẫn rườm rà. Để giải quyết vấn đề này, một bộ API HTML khai báo mới để tạo cửa sổ bật lên sẽ ra mắt trên các trình duyệt, trong đó API đầu tiên là Popover API.

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

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

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ố điểm khác biệt chính về hành vi của các lớp này. Một phần tử dialog được mở bằng dialog.showModal (một hộp thoại phương thức), là một trải nghiệm đòi hỏi người dùng phải tương tác rõ ràng để đóng phương thức. popover hỗ trợ tính năng đóng nhẹ. dialog của cửa sổ bật lên 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 cửa sổ bật lên.

Tokopedia

Việc sử dụng các thuộc tính của cửa sổ bật lên đã giảm tới 70% số dòng mã trong React. Bạn có thể kiểm soát chế độ xem theo phương thức gốc 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 của chế độ xem này đến cuối document.body. Chúng tôi cũng có thể sử dụng @starting-style để tạo ảnh động cho thao tác mở và đóng cửa sổ bật lên. – Andy Wihalim, Kỹ sư phần mềm cấp cao, Tokopedia.

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 sản phẩm. Khi người dùng nhấp vào hình thu nhỏ của sản phẩm, một cửa sổ bật lên sẽ mở ra để hiển thị hình ảnh đã phóng to. Đây là 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 API cửa sổ bật lên cho cửa sổ bật lên này, họ đã sử dụng một cửa sổ bật lên DOM và một nút. Nút này đã thay đổi trạng thái React để mở cửa sổ bật lên. Với API cửa sổ bật lên, các phần tử này chỉ định thuộc tính popovertarget trong phần tử mở cửa sổ bật lên có 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 xuất hiện rồi biến mất mà không có ảnh động 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ủa các thuộc tính rời. Trong ví dụ về mã sau, cửa sổ bật lên sẽ thu nhỏ và phóng to bằng thuộc tính 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',

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

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

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

Những điều cần cân nhắc khi sử dụng API cửa sổ bật lên

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

Cân nhắc kết hợp cửa sổ bật lên với tính năng định vị neo CSS (sắp ra mắt trên Chrome) để định vị các cửa sổ bật lên đó so với các phần tử khác. Điều này hữu ích cho các trình đơn và chú giải công cụ, chẳng hạn.

Tài nguyên

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