ขอแนะนำ POPover API

Una Kravets

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

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

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

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

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

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

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

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

บทสรุป

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

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