Tạo thông báo ngắn

Tính năng web: Cửa sổ bật lên Định vị neo sibling-count() và sibling-index() transition-behavior

Thông báo ngắn là thông báo trạng thái tạm thời. Không giống như trình đơn, các thành phần này không được đóng khi người dùng tương tác với các phần khác của trang. Trạng thái popover="manual" là lựa chọn lý tưởng vì trạng thái này không có hành vi "light-dismiss" và cho phép nhiều thông báo cùng tồn tại.

Nguyên tắc triển khai

  • BẮT BUỘC: Sử dụng popover="manual" để thông báo luôn hiển thị cho đến khi được đóng rõ ràng hoặc hết thời gian chờ theo tập lệnh.
  • NÊN sử dụng vùng chứa để quản lý việc xếp chồng nhiều thông báo ngắn. Vì cửa sổ bật lên trong Lớp trên cùng bỏ qua chỉ mục z của phần tử mẹ, nên bạn phải định vị chúng riêng lẻ hoặc trong một nhóm bố cục chung.
  • NÊN sử dụng sibling-index() để thêm lề giữa các thông báo ngắn để có thể nhìn thấy các mục ở vị trí thấp hơn trong ngăn xếp.
  • NÊN cung cấp nút "Đóng" rõ ràng trong thông báo ngắn bằng cách sử dụng popovertargetaction="hide".
  • NÊN sử dụng JavaScript cho bộ hẹn giờ tự động đóng (ví dụ: gọi hidePopover() sau 3000 mili giây).
  • NÊN sử dụng transition-behavior: allow-discrete để tạo ảnh động cho hiệu ứng vào và thoát khỏi Lớp trên cùng.

Chiến lược dự phòng

Phương án dự phòng và hỗ trợ trình duyệt cho Popover

Popover API chủ yếu là cải tiến tăng dần, nhưng các hành vi xác định của API này (quảng bá lớp trên cùng, đóng nhẹ và gọi popovertarget) không có hành vi tương đương chỉ dùng CSS. Các trình duyệt cũ cần có polyfill hoặc phương án dự phòng thủ công nếu bạn không muốn cung cấp polyfill.

Polyfill: Để hỗ trợ thuộc tính popover trong các trình duyệt cũ, hãy tải @oddbird/popover-polyfill theo điều kiện. BẮT BUỘC: Phát hiện tính năng bằng cách kiểm tra thuộc tính popover trên HTMLElement.prototype và chỉ tải polyfill khi thiếu tính năng hỗ trợ gốc — KHÔNG tải polyfill vô điều kiện.

Với trình đóng gói hoặc bản đồ nhập:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

Nếu không có trình đóng gói, hãy nhập từ CDN bên trong <script type="module">:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

Lưu ý về kiểu: Polyfill không thể xác định lớp giả :popover-open thực, vì vậy, lớp này sẽ áp dụng lớp .\:popover-open. BẮT BUỘC: Kết hợp cả hai bằng :is() hoặc :where(), nếu không, các trình duyệt thiếu :popover-open sẽ loại bỏ toàn bộ quy tắc:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

Ngoài ra, đối với phương án dự phòng cũ không có polyfill, hãy sử dụng position: fixed và tính toán toạ độ theo cách thủ công thông qua getBoundingClientRect() hoặc dựa vào vị trí mặc định bằng inset: auto nếu điều đó phù hợp với trường hợp sử dụng.

sibling-index()

  • Hướng dẫn: Nếu sibling-index() không được hỗ trợ, hãy sử dụng toán tử + để thêm lề theo cách thủ công. Ví dụ: popover + popover { margin-top: 1rem }

anchor-positioning

  • Hướng dẫn: Sử dụng CSS Anchor Positioning Polyfill. Đối với phương án dự phòng không polyfill, hãy đặt chú giải công cụ ở vị trí cố định ở cuối khung nhìn bằng @supports not (anchor-name: --foo).

transition-behavior

  • Hướng dẫn: Nếu transition-behavior không được hỗ trợ, hãy sử dụng JavaScript để thêm ảnh động thông qua các lớp khi phần tử thông báo ngắn chuyển đổi vào và ra.