ขอแนะนำ POPover API

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

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

แอตทริบิวต์ popover

คุณปล่อยให้เบราว์เซอร์จัดการความซับซ้อนทั้งหมดด้วยแอตทริบิวต์ 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 จะสร้างป๊อปอัปอีกประเภทหนึ่ง ซึ่งก็คือป๊อปอัปที่กําหนดเอง การดำเนินการเหล่านี้จะไม่บังคับปิดองค์ประกอบประเภทอื่นๆ และไม่ปิดผ่าน light-dismiss คุณต้องปิดผ่านตัวจับเวลาหรือการดำเนินการปิดอย่างชัดเจน ประเภทของป๊อปอัปที่เหมาะสมกับ 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 เสมอ

การตั้งค่าหมุดจะคล้ายกับการตั้งค่าป๊อปอัป

<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>

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

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

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

บทสรุป

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

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

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