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 có ở mọi nơi trên web. Bạn có thể thấy các thông báo này 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 đến mức nào, việc xây dựng chúng trong trình duyệt vẫn rất cồng kềnh một cách đáng kinh ngạc. Để giải quyết vấn đề này, chúng tôi sẽ ra mắt một bộ API HTML khai báo mới để tạo cửa sổ bật lên cho các trình duyệt, trong đó có API Cửa sổ bật lên.

Cửa sổ bật lên là một phần của Cơ sở mới có sẵn.

Hỗ trợ trình duyệt

  • 114
  • 114
  • 125
  • 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 trong hành vi của các trình xử lý này. 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 người dùng tương tác rõ ràng để đóng cửa sổ phụ. popover hỗ trợ tính năng loại bỏ ánh sáng. Phương thức dialog thì không. Hộp thoại phương thức khiến 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 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á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 Popover.

Tokopedia

Việc sử dụng thuộc tính cửa sổ bật lên giúp giảm tới 70% dòng mã trong React. Phương thức này có thể được kiểm soát sẵ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 cho bướ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 từng sản phẩm. Khi người dùng nhấp vào hình thu nhỏ sản phẩm, một cửa sổ phụ sẽ mở ra để hiển thị hình ảnh phóng to. Đây là một kiểu 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 Popover 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ở cửa sổ phụ. Với API cửa sổ bật lên, chúng 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 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 và biến mất mà không có bất kỳ ả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 và 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 điều chỉnh tỷ lệ theo tỷ lệ và thu nhỏ bằng cách sử dụ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',

  '@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 bằng identifierbird, với kích thước chỉ 3,2 KB khi nén gzip. Họ hài lòng với polyfill này vì mô hình này hoạt động tốt và không gây hồi quy hiệu suất. Nhìn chung, họ có thể giảm đến 70% 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 Popover

Tokopedia sử dụng React và nhóm này đã đạt được quá trình phân tách mã bằng cách ngắt kết nối thành phần 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 hiển thị. 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 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) để đặt vị trí tương ứng với các phần tử khác. Ví dụ: điều này rất hữu ích cho các trình đơn và chú giải công cụ.

Tài nguyên

Khám phá các bài viết khác trong loạt bài này nói về cách các công ty thương mại điện tử được 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 cuộn, cửa sổ bật lên, truy vấn vùng chứa và bộ chọn has().