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

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

Cửa sổ bật lên xuất hiện ở mọi nơi trên web. Bạn có thể thấy các biểu tượng này trong trình đơn, chú thích 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 công bố thông tin 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 tạo chúng trong trình duyệt vẫn rất 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ẽ xuất hiện trên các trình duyệt, trong đó Popover API là API đầu tiên.

Popover 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 trong hành vi của chúng. 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 yêu cầu người dùng tương tác rõ ràng để đóng phương thức. popover hỗ trợ tính năng đóng nhanh. dialog không phải là một phương thức. 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ề những điểm khác biệt.

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 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ừ Popover API.

Tokopedia

Việc sử dụng các thuộc tính của cửa sổ bật lên giúp giảm đến 70% số dòng mã trong React. Phương thức có thể được kiểm soát một cách 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 tôi cũng có thể dùng @starting-style để tạo hiệu ứng động cho việ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 có 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 phương thức sẽ mở ra để cho thấy hình ảnh phóng to. Đây là một mẫu phổ biến được 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 phương thức này, họ đã sử dụng một phương thức DOM và một nút. Nút này đã thay đổi trạng thái React để mở phương thức. 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ở cửa sổ bật lên có giá trị giống như 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 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 riêng biệt. Trong ví dụ về mã sau đây, cửa sổ bật lên sẽ thu phóng bằng cách sử dụng thuộc tính transform: 'scale()'.

Ví dụ về mã này cho thấy cách triển khai ảnh động xuất hiện và biến mấ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ụ những 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.Đây là một polyfill chỉ có kích thước 3,2 KB khi nén bằng gzip. Họ hài lòng với polyfill này vì nó hoạt động tốt và không gây ra tình trạng giảm 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 này đã đạt được tính năng phân chia mã bằng cách huỷ gắn thành phần cửa sổ bật lên cho những trang không sử dụng thành phần này, sau đó phân chia 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.

Hãy cân nhắc việc kết hợp các cửa sổ bật lên với tính năng định vị phần tử neo bằng 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. Ví dụ: điều này hữu ích cho trình đơn và chú thích.

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().