การสร้างการแจ้งเตือนแบบข้อความสั้นๆ

ฟีเจอร์บนเว็บ: Popover Anchor positioning sibling-count() และ sibling-index() transition-behavior

การแจ้งเตือนแบบข้อความสั้นๆ เป็นข้อความสถานะชั่วคราว ซึ่งไม่ควรปิดเมื่อผู้ใช้โต้ตอบกับส่วนอื่นๆ ของหน้าเว็บเหมือนกับเมนู สถานะ popover="manual" เหมาะสมที่สุดเนื่องจากไม่มีลักษณะการทำงาน "ปิดเมื่อคลิกนอกองค์ประกอบ" และอนุญาตให้มีการแจ้งเตือนหลายรายการพร้อมกันได้

หลักเกณฑ์การใช้งาน

  • บังคับ: ใช้ popover="manual" เพื่อให้การแจ้งเตือนยังคงปรากฏอยู่จนกว่าจะปิดอย่างชัดเจนหรือหมดเวลาโดยสคริปต์
  • ควรใช้คอนเทนเนอร์เพื่อจัดการการซ้อนทับของข้อความโทสต์หลายรายการ เนื่องจากป๊อปโอเวอร์ในเลเยอร์บนสุดจะละเว้นดัชนีลำดับ Z ของระดับบน คุณจึงต้องจัดตำแหน่งป๊อปโอเวอร์ทีละรายการหรือภายในกลุ่มเลย์เอาต์ทั่วไป
  • ควรใช้ sibling-index() เพื่อเพิ่มระยะขอบระหว่างการแจ้งเตือนแบบข้อความเพื่อให้มองเห็นรายการที่อยู่ต่ำกว่าในสแต็ก
  • ควรระบุปุ่ม "ปิด" ที่ชัดเจนภายในข้อความโทสต์โดยใช้ popovertargetaction="hide"
  • ควรใช้ JavaScript สำหรับตัวจับเวลาการปิดอัตโนมัติ (เช่น การเรียกใช้ hidePopover() หลังจาก 3,000 มิลลิวินาที)
  • ควรใช้ transition-behavior: allow-discrete เพื่อทำให้การเข้าและออกจากเลเยอร์บนสุดเป็นภาพเคลื่อนไหว

กลยุทธ์สำรอง

การรองรับเบราว์เซอร์และทางเลือกสำรองสำหรับ Popover

Popover API ส่วนใหญ่เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง แต่ลักษณะการทำงานที่กำหนดไว้ เช่น การโปรโมตเลเยอร์บนสุด การปิดเมื่อคลิกนอกองค์ประกอบ และการเรียกใช้ popovertarget ไม่มี CSS ที่เทียบเท่า เบราว์เซอร์รุ่นเก่าต้องใช้ Polyfill หรือการสำรองข้อมูลด้วยตนเองหากคุณไม่ต้องการจัดส่ง

Polyfill: หากต้องการรองรับแอตทริบิวต์ popover ในเบราว์เซอร์รุ่นเก่า ให้โหลด @oddbird/popover-polyfill แบบมีเงื่อนไข จำเป็น: ตรวจหาฟีเจอร์โดยการตรวจสอบพร็อพเพอร์ตี้ popover ใน HTMLElement.prototype และโหลด Polyfill เฉพาะเมื่อไม่มีการรองรับแบบเนทีฟ อย่าโหลดโดยไม่มีเงื่อนไข

เมื่อใช้ Bundler หรือแผนที่การนำเข้า ให้ทำดังนี้

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

หากไม่มี Bundler ให้นำเข้าจาก CDN ภายใน <script type="module">:

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

ข้อควรระวังเกี่ยวกับรูปแบบ: Polyfill ไม่สามารถกำหนดคลาสจำลอง :popover-open จริงได้ จึงใช้คลาส .\:popover-open แทน จำเป็น: รวมทั้ง 2 รายการเข้าด้วยกันโดยใช้ :is() หรือ :where() ไม่เช่นนั้นเบราว์เซอร์ที่ไม่มี :popover-open จะทิ้งกฎทั้งหมด

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

หรือสำหรับทางเลือกสำรองแบบเดิมที่ไม่มี Polyfill ให้ใช้ position: fixed และคำนวณพิกัดด้วยตนเองผ่าน getBoundingClientRect() หรือใช้การกำหนดตำแหน่งเริ่มต้นด้วย inset: auto หากยอมรับได้สำหรับกรณีการใช้งาน

sibling-index()

  • คำแนะนำ: หากระบบไม่รองรับ sibling-index() ให้ใช้โอเปอเรเตอร์ + เพื่อเพิ่มระยะขอบด้วยตนเอง เช่น popover + popover { margin-top: 1rem }

anchor-positioning

  • คำแนะนำ: ใช้ CSS Anchor Positioning Polyfill สำหรับทางเลือกสำรองที่ไม่ใช่ Polyfill ให้กำหนดค่าเริ่มต้นของเคล็ดลับเครื่องมือเป็นตำแหน่งคงที่ที่ด้านล่างของวิวพอร์ตโดยใช้ @supports not (anchor-name: --foo)

transition-behavior

  • คำแนะนำ: หากระบบไม่รองรับ transition-behavior ให้ใช้ JavaScript เพื่อเพิ่มภาพเคลื่อนไหวผ่านคลาสเมื่อองค์ประกอบข้อความโทสต์เปลี่ยนเข้าและออก