ขอแนะนำ POPover API

Una Kravets

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

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

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

โดยปล่อยให้เบราว์เซอร์จัดการสิ่งต่างๆ เองด้วยแอตทริบิวต์ 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 ได้ด้วย การดำเนินการนี้จะลบล้างการทำงาน toggle เริ่มต้น ตัวเลือก 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" ได้แล้ว แต่ก็มีข้อแตกต่างสำคัญอยู่บ้างก็คือ

องค์ประกอบ 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 และการสร้างภาพเคลื่อนไหวไปและกลับจากเลเยอร์ด้านบนยังไม่พร้อมใช้งานในเบราว์เซอร์ อย่างไรก็ตาม เรามีแผนที่จะใช้งาน Chromium เวอร์ชันถัดไปอย่างใกล้ชิดหลังจากการเปิดตัวนี้

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

การวางตำแหน่งแท็ก Anchor

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

การสาธิตเมนูแบบรัศมีต่อไปนี้ใช้ API แบบป๊อปอัปร่วมกับการวางตำแหน่ง Anchor ของ CSS เพื่อให้แน่ใจว่าป๊อปอัป #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!

บทสรุป

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

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

• กล่องโต้ตอบและป๊อปอัปที่ดูคล้ายกัน แล้วมีความแตกต่างกันอย่างไร
• ความหมายและแอตทริบิวต์ป๊อปอัป
• เอกสาร MN เกี่ยวกับป๊อปอัป
• คำอธิบายป๊อปอัป OpenUI