Triển khai chức năng popover thông qua Popover API

 (developer.mozilla.org)
2 điểm bởi GN⁺ 2024-05-11 | 1 bình luận | Chia sẻ qua WhatsApp

Tóm tắt các nội dung chính của Popover API

Giới thiệu về Popover API

  • Popover API cung cấp cho nhà phát triển một cơ chế tiêu chuẩn, nhất quán và linh hoạt để hiển thị nội dung popover phía trên nội dung trang
  • Nội dung popover có thể được điều khiển theo cách khai báo bằng thuộc tính HTML hoặc thông qua JavaScript

Đặc điểm và cách sử dụng Popover

  • Popover được chia thành hai kiểu là Modal và Non-modal, và popover được tạo bằng Popover API luôn là Non-modal
    • Modal nghĩa là phần còn lại của trang sẽ được render ở trạng thái không thể tương tác trong khi popover đang hiển thị
    • Non-modal nghĩa là vẫn có thể tương tác với phần còn lại của trang trong khi popover đang hiển thị
  • Các trường hợp sử dụng phổ biến của popover gồm menu hành động, thông báo "toast" tùy biến, gợi ý cho phần tử biểu mẫu, bộ chọn nội dung hoặc UI hướng dẫn
  • Popover có thể được tạo theo cách khai báo thông qua thuộc tính HTML hoặc thông qua JavaScript API

Các thuộc tính HTML liên quan đến Popover API

  • popover: thuộc tính toàn cục biến một phần tử thành phần tử popover
  • popovertarget: biến phần tử <button> hoặc <input> thành nút điều khiển popover
  • popovertargetaction: chỉ định thao tác sẽ được thực hiện trên phần tử popover do <button> hoặc <input> điều khiển

Các tính năng CSS liên quan đến Popover API

  • ::backdrop: phần tử toàn màn hình được đặt ngay phía sau phần tử popover, có thể dùng để thêm hiệu ứng cho nội dung trang phía sau popover nếu muốn
  • :popover-open: pseudo-class chỉ khớp khi phần tử popover đang ở trạng thái hiển thị, có thể dùng để áp dụng style khi popover được hiển thị

Các interface và phần mở rộng liên quan đến Popover API

  • ToggleEvent: biểu diễn sự kiện thông báo cho người dùng khi trạng thái của phần tử popover chuyển đổi giữa hiển thị và ẩn
  • Đã bổ sung các thuộc tính thể hiện như HTMLElement.popover, HTMLButtonElement.popoverTargetElement, HTMLInputElement.popoverTargetElement, HTMLButtonElement.popoverTargetAction, HTMLInputElement.popoverTargetAction
  • Đã bổ sung các phương thức thể hiện như HTMLElement.hidePopover(), HTMLElement.showPopover(), HTMLElement.togglePopover()
  • Đã bổ sung các sự kiện beforetoggle, toggle

Ý kiến của GN⁺

  • Popover API có ý nghĩa ở chỗ cung cấp cho nhà phát triển web một cách chuẩn hóa để dễ dàng triển khai UI popover. Trước đây, thường phải dùng thư viện hoặc tự triển khai
  • Tuy vậy, cần lưu ý rằng Popover API vẫn còn là tính năng thử nghiệm và phạm vi hỗ trợ của trình duyệt còn hạn chế. Để sử dụng trong môi trường production, có thể cần cân nhắc dùng kèm polyfill hoặc các thư viện hiện có
  • Một số thư viện cung cấp tính năng tương tự gồm có component Popover của Bootstrap, Tippy.js, v.v.
  • Khi sử dụng Popover API, cũng cần cân nhắc khía cạnh accessibility. Cần có khả năng điều khiển popover bằng bàn phím, đồng thời cung cấp văn bản thay thế cho người dùng screen reader

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-05-11
Ý kiến trên Hacker News

Tóm lại như sau.

  • Khi CSS Anchor Positioning được giới thiệu, có thể kết hợp với Popover API để triển khai tooltip tùy biến hoặc menu ngữ cảnh theo cách khai báo, nhờ đó sẽ không còn cần các thư viện như PopperJS.
  • Nếu muốn hộp thoại modal thì cũng có thể dùng phần tử <dialog>.
  • Hiện tại, popover có những giới hạn trong triển khai, chẳng hạn không thể vượt ra ngoài ranh giới cửa sổ trình duyệt và không tích hợp tốt với hệ thống quản lý cửa sổ của OS máy chủ. Để triển khai đúng cách, trên Win32 có lẽ sẽ cần một HWND riêng cho mỗi popover, còn trên macOS sẽ cần NSView.
  • Việc trình duyệt có sẵn trình chặn popup mà vẫn tạo ra API kiểu này quả là mỉa mai. Nó gợi nhớ đến cuộc chiến quảng cáo popup/popunder vào cuối thập niên 90 đến đầu những năm 2000.
  • Nếu dùng Popover API thì sẽ càng dễ bị các extension nhắm mục tiêu để chặn. Nó có lẽ chủ yếu sẽ được dùng cho những mục đích mà người dùng không thích, như CTA marketing hoặc chat hỗ trợ mang tính xâm nhập.
  • Người ta nói nếu muốn biến Popover thành modal thì hãy dùng phần tử <dialog>, nhưng trong các trường hợp như làm mờ nền thì việc biến popover thành modal mới là use case phù hợp. Liệu <popover modal=true> có phải là cách tốt hơn không?
  • Có chia sẻ mã ví dụ tự triển khai bằng Stimulus + Popper.
  • Có ý kiến chỉ ra rằng trên trang không có hình ảnh cho thấy popover là gì.
  • Có phản hồi bày tỏ sự kinh ngạc trước sự xuất hiện của Popover API.