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 phổ biến như thế nào, nhưng việc tạo các thành phần này trong trình duyệt vẫn còn khá cồng kềnh. Để 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 Các tính năng mới của Baseline.

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 sẽ khiến phần còn lại của trang không hoạt động. popover thì không. Đọc thêm về sự khác biệt.

Bài viết này là một phần của loạt bài thảo luận về cách các công ty thương mại điện tử cải thiện trang web của họ bằng các tính năng CSS và giao diện người dùng mới. 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 ta cũng có thể sử dụng @starting-style để tạo hiệu ứng độ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 sẽ hoạt động nhưng xuất hiện và biến mất mà không có ảnh động nào. Để tạo ảnh động xuất hiện 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 riêng biệt. 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 biết 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 Popover API

Tokopedia sử dụng React và nhóm đã đạt được việc 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().