ขอแนะนำ POPover API

Una Kravets

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

เพื่อแก้ไขปัญหานี้ เราจะเปิดตัวชุด HTML API แบบประกาศใหม่สําหรับการสร้างป๊อปอัปในเบราว์เซอร์ โดยเริ่มจาก popover API ใน Chromium 114

แอตทริบิวต์ป๊อปอัป

การรองรับเบราว์เซอร์

  • Chrome: 114
  • Edge: 114
  • Firefox: 125
  • Safari: 17.

แหล่งที่มา

คุณปล่อยให้เบราว์เซอร์จัดการความซับซ้อนทั้งหมดด้วยแอตทริบิวต์ popover และชุดฟีเจอร์ที่ตามมาได้แทนที่จะต้องจัดการเอง รายการที่รองรับป๊อปอัป HTML

  • การโปรโมตไปยังเลเยอร์บนสุด ป๊อปอัปจะปรากฏขึ้นในเลเยอร์แยกต่างหากเหนือส่วนที่เหลือของหน้าเว็บ คุณจึงไม่ต้องค้นหาโดยใช้ดัชนี z
  • ฟังก์ชันการปิดไฟ การคลิกนอกพื้นที่ของป๊อปอัปจะปิดป๊อปอัปและโฟกัสกลับ
  • การจัดการโฟกัสเริ่มต้น การเปิดป๊อปอัปจะทำให้แท็บถัดไปหยุดอยู่ที่ภายในป๊อปอัป
  • การเชื่อมโยงแป้นพิมพ์ที่เข้าถึงได้ การกดแป้น esc จะปิดป๊อปอัปและโฟกัสกลับ
  • การเชื่อมโยงคอมโพเนนต์ที่เข้าถึงได้ การเชื่อมต่อองค์ประกอบป๊อปอัปกับทริกเกอร์ป๊อปอัปตามความหมาย

ตอนนี้คุณสร้างป๊อปอัปที่มีฟีเจอร์ทั้งหมดเหล่านี้ได้โดยไม่ต้องใช้ JavaScript รายการแบบป๊อปอัปพื้นฐานต้องมี 3 สิ่งต่อไปนี้

  • แอตทริบิวต์ popover ในองค์ประกอบที่มีป๊อปอัป
  • id ในองค์ประกอบที่มีป๊อปอัป
  • popovertarget ที่มีค่าของ id ของป๊อปอัปในองค์ประกอบที่เปิดป๊อปอัป
<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

ตอนนี้คุณก็มีป๊อปอัปพื้นฐานที่ใช้งานได้อย่างเต็มรูปแบบแล้ว

คุณสามารถแสดงข้อมูลเพิ่มเติมหรือใช้เป็นวิดเจ็ตการเปิดเผยข้อมูลได้

ค่าเริ่มต้นและการลบล้าง

โดยค่าเริ่มต้น เช่น ในข้อมูลโค้ดก่อนหน้า การตั้งค่าป๊อปอัปด้วย popovertarget หมายความว่าปุ่มหรือองค์ประกอบที่เปิดป๊อปอัปจะเปิดและปิดป๊อปอัป แต่คุณยังสร้างป๊อปอัปที่ชัดเจนได้โดยใช้ popovertargetaction ซึ่งจะลบล้างการดําเนินการเปิด/ปิดเริ่มต้น ตัวเลือก popovertargetaction รายการ ได้แก่

popovertargetaction="show": แสดงป๊อปอัป popovertargetaction="hide": ซ่อนป๊อปอัป

เมื่อใช้ popovertargetaction="hide" คุณสามารถสร้างปุ่ม "ปิด" ได้ภายในป๊อปอัป ตามที่แสดงในตัวอย่างต่อไปนี้

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

ป๊อปอัปอัตโนมัติกับป๊อปอัปที่เปิดด้วยตนเอง

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

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

หากดูการสาธิตด้านบน คุณจะเห็นว่าการคลิกนอกพื้นที่ของป๊อปอัปจะไม่ปิดป๊อปอัป นอกจากนี้ หากมีป๊อปอัปอื่นๆ เปิดอยู่ ป๊อปอัปเหล่านั้นจะไม่ปิด

วิธีตรวจสอบความแตกต่าง

ป๊อปอัปที่มี popover=auto:

  • เมื่อเปิดแล้ว ให้บังคับปิดป๊อปอัปอื่นๆ
  • ปิดไฟได้

ป๊อปอัปที่มี popover=manual:

  • อย่าปิดองค์ประกอบประเภทอื่นๆ ด้วยวิธีบังคับ
  • อย่าปิดไฟ ปิดโดยใช้การทํางานของปุ่มเปิด/ปิดหรือปิด

การจัดรูปแบบป๊อปอัป

จนถึงตอนนี้คุณได้เรียนรู้เกี่ยวกับป๊อปอัปพื้นฐานใน HTML แล้ว แต่ก็มีฟีเจอร์การจัดสไตล์ที่ยอดเยี่ยมบางอย่างที่มาพร้อมกับ popover ด้วย ความสามารถอย่างหนึ่งคือความสามารถในการจัดรูปแบบ ::backdrop

ในป๊อปอัป auto เลเยอร์นี้จะอยู่ใต้เลเยอร์บนสุดโดยตรง (ซึ่งเป็นตำแหน่งที่ป๊อปอัปแสดงอยู่) ซึ่งอยู่เหนือส่วนอื่นๆ ของหน้า ในตัวอย่างต่อไปนี้ ::backdrop มีสีแบบโปร่งแสง

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

ความแตกต่างระหว่าง popover กับ dialog

โปรดทราบว่าแอตทริบิวต์ popover ไม่ได้ให้ความหมายในตัว แม้ว่าตอนนี้คุณจะสร้างประสบการณ์การใช้งานที่คล้ายกับกล่องโต้ตอบแบบโมดัลได้โดยใช้ popover="auto" แต่ทั้ง 2 รูปแบบนี้ก็มีความแตกต่างที่สำคัญอยู่ 2-3 ข้อดังนี้

องค์ประกอบ dialog ที่เปิดด้วย dialog.showModal (กล่องโต้ตอบแบบโมดอล) เป็นประสบการณ์ที่ต้องใช้การโต้ตอบของผู้ใช้อย่างชัดเจนเพื่อปิดโมดอล popover รองรับการปิดไฟ ส่วน dialog แบบโมดอลจะไม่มี กล่องโต้ตอบแบบโมดัลทําให้ส่วนที่เหลือของหน้าไม่ทํางาน popover ไม่ได้

การสาธิตข้างต้นเป็นกล่องโต้ตอบเชิงความหมายที่มีลักษณะการทำงานของป๊อปอัป ซึ่งหมายความว่าส่วนที่เหลือของหน้าเว็บจะไม่หยุดทำงานและป๊อปอัปกล่องโต้ตอบจะแสดงลักษณะการทำงานแบบปิดเบาๆ คุณสร้างกล่องโต้ตอบนี้ด้วยลักษณะการทํางานของป๊อปอัปได้โดยใช้โค้ดต่อไปนี้

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

เร็วๆ นี้

การเข้าและออกแบบอินเทอร์แอกทีฟ

ความสามารถในการทำให้พร็อพเพอร์ตี้แบบไม่ต่อเนื่องเคลื่อนไหว ซึ่งรวมถึงการทำภาพเคลื่อนไหวจาก display: none ไปยังพร็อพเพอร์ตี้อื่นและจากพร็อพเพอร์ตี้อื่นไปยัง display: none รวมถึงการทำภาพเคลื่อนไหวจากเลเยอร์บนสุดไปยังพร็อพเพอร์ตี้อื่นและจากพร็อพเพอร์ตี้อื่นไปยังเลเยอร์บนสุดยังไม่พร้อมใช้งานในเบราว์เซอร์ แต่เราวางแผนที่จะเพิ่มฟีเจอร์เหล่านี้ใน Chromium เวอร์ชันที่กำลังจะเปิดตัว ซึ่งจะตามมาหลังจากรุ่นนี้

ความสามารถในการแสดงภาพเคลื่อนไหวของพร็อพเพอร์ตี้แบบแยกต่างหากและการใช้ :popover-open และ @starting-style จะช่วยให้คุณตั้งค่ารูปแบบก่อนและหลังการเปลี่ยนแปลงเพื่อให้การเปลี่ยนเป็นไปอย่างราบรื่นเมื่อเปิดและปิดป๊อปอัป มาดูตัวอย่างก่อนหน้านี้ ภาพเคลื่อนไหวที่แสดงและซ่อนจะดูราบรื่นขึ้นมาก และช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้น

ตำแหน่งของ Anchor

ป๊อปอัปนั้นมีประโยชน์มากเมื่อคุณต้องการวางตำแหน่งการแจ้งเตือน โมดัล หรือการแจ้งเตือนตามวิวพอร์ต แต่ป๊อปอัปยังมีประโยชน์สําหรับเมนู เคล็ดลับเครื่องมือ และองค์ประกอบอื่นๆ ที่ต้องวางตําแหน่งให้สัมพันธ์กับองค์ประกอบอื่นๆ ด้วย ด้วยเหตุนี้ การปักหมุด CSS จึงเข้ามามีบทบาทในจุดนี้

ตัวอย่างเมนูแบบวงกลมต่อไปนี้ใช้ popover API พร้อมกับการวางตำแหน่งจุดยึด CSS เพื่อให้แน่ใจว่า popover #menu-items จะยึดอยู่กับทริกเกอร์เปิด/ปิด ซึ่งเป็นปุ่ม #menu-toggle เสมอ

การตั้งค่าแท็ก Anchor คล้ายกับการตั้งค่าป๊อปอัปดังนี้

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

คุณตั้งค่า Anchor ได้โดยกำหนด id (ในตัวอย่างนี้คือ #menu-toggle) แล้วใช้ anchor="menu-toggle" เพื่อเชื่อมต่อทั้ง 2 องค์ประกอบ ตอนนี้คุณใช้ anchor() เพื่อจัดสไตล์ป๊อปอัปได้แล้ว เมนูป๊อปอัปที่กึ่งกลางซึ่งยึดอยู่ที่บรรทัดฐานของปุ่มเปิด/ปิด Anchor อาจมีสไตล์ดังนี้

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

ตอนนี้คุณมีเมนูป๊อปอัปที่ทำงานได้เต็มที่และตรึงอยู่กับปุ่มเปิด/ปิด และมีฟีเจอร์ในตัวของ Popover ครบแล้ว ไม่จำเป็นต้องใช้ JavaScript!

บทสรุป

Popovout API เป็นขั้นตอนแรกในชุดความสามารถใหม่ๆ ที่จะทำให้การสร้างเว็บแอปพลิเคชันจัดการได้ง่ายขึ้นและเข้าถึงได้ง่ายขึ้นโดยค่าเริ่มต้น เราตื่นเต้นที่จะได้เห็นวิธีที่คุณใช้ป๊อปอัป

อ่านเพิ่มเติม