ตัวเรียกใช้ความสนใจและแอตทริบิวต์ command

กลุ่ม Open UI กำลังทำให้แอตทริบิวต์ HTML ใหม่สองรายการเป็นมาตรฐาน — command สำหรับการทำงานที่เรียกด้วยการคลิก และ interesttarget สำหรับ “ความสนใจ” ที่เรียกด้วยการวางเมาส์หรือโฟกัส ซึ่งเป็นพื้นฐานของคำแนะนำเครื่องมือและการแสดงตัวอย่าง ทั้งสองรายการขยายความสามารถของ HTML ด้วยพฤติกรรมแบบประกาศที่แต่เดิมมักต้องใช้ JavaScript

ปุ่มที่มี command="show-modal" และ commandfor="dialog-id" จะแสดงกล่องโต้ตอบได้โดยไม่ต้องใช้ JS — แทนที่การเรียก dialog.showModal() ด้วยตนเอง คำสั่งอื่น ๆ ได้แก่ command="close" command="toggle-popover" และ command="show-popover"

ชุดคำสั่งเริ่มต้นมุ่งรองรับรูปแบบส่วนติดต่อผู้ใช้ที่พบได้ทั่วไป ได้แก่ การแสดงหรือซ่อนกล่องโต้ตอบ (ที่มีมาให้ในตัวด้วย <dialog>) การสลับป๊อปโอเวอร์ (Popover API) และอาจเพิ่มขึ้นในอนาคต องค์ประกอบแบบกำหนดเองสามารถประกาศว่ารองรับคำสั่งใดได้ผ่านตัวจัดการเหตุการณ์ oncommand

นอกเหนือจากคำสั่งที่มีมาให้ในตัว ข้อกำหนดยังอนุญาตให้ใช้สตริงคำสั่งแบบกำหนดเองที่ขึ้นต้นด้วย “--” องค์ประกอบเป้าหมายจะได้รับเหตุการณ์ command ซึ่งคุณสามารถจัดการได้ใน JS: el.addEventListener("command", (e) => { if (e.command === "--save") save(); })

แอตทริบิวต์ interesttarget ใช้ระบุองค์ประกอบเป้าหมายของ “ความสนใจ” ซึ่งโดยทั่วไปคือคำแนะนำเครื่องมือที่ปรากฏเมื่อวางเมาส์หรือโฟกัส เบราว์เซอร์จะจัดการเวลา (ระยะหน่วงเมื่อตั้งใจวางเมาส์ 300ms) ตำแหน่ง (ด้วยการจัดตำแหน่งแบบยึดจุด) และการปิดโดยอัตโนมัติ

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

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

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

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

กลุ่มชุมชน Open UI (open-ui.org) เป็นผู้ผลักดันงานส่วนใหญ่นี้ โดยเสนอแนวคิด สร้างต้นแบบ และผลักดันองค์ประกอบกับแอตทริบิวต์ HTML ใหม่ผ่านกระบวนการมาตรฐาน โปรดติดตามบล็อกของกลุ่มเพื่อดูข้อเสนอล่าสุด

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

ติดตามข้อเสนอ (open-ui.org) ทดลองใช้ใน Chromium โดยเปิดใช้แฟล็ก และวางแผนนำมาใช้เมื่อความสามารถเหล่านี้มีเสถียรภาพ ตรวจสอบชุดโค้ดที่มีอยู่ของคุณ โดยนับว่า JS ถูกใช้ไปกับงานเบื้องหลังของกล่องโต้ตอบ ป๊อปโอเวอร์ และคำแนะนำเครื่องมือมากเพียงใด โค้ดส่วนนั้นมีเป้าหมายที่จะถูกแทนที่ภายในการออกรุ่นไม่กี่ครั้งข้างหน้า

แอตทริบิวต์คำสั่งบนปุ่มมีจุดประสงค์อะไร

ความสามารถใหม่สองอย่างที่กำลังเกิดขึ้นช่วยขยายคลังคำศัพท์ส่วนติดต่อผู้ใช้แบบเชิงประกาศของ HTML ได้แก่ แอตทริบิวต์คำสั่งและแอตทริบิวต์ระบุเป้าหมายคำสั่งสำหรับการทำงานที่เรียกด้วยการคลิก (แสดงกล่องโต้ตอบแบบโมดัลและสลับป๊อปโอเวอร์) และแอตทริบิวต์เป้าหมายความสนใจร่วมกับโหมดป๊อปโอเวอร์แบบคำใบ้สำหรับคำแนะนำเครื่องมือที่เรียกด้วยการวางเมาส์หรือโฟกัส ทั้งสองรายการแทนที่รูปแบบการใช้ JavaScript ที่พบบ่อยด้วยแอตทริบิวต์ HTML ช่วยปรับปรุงการเข้าถึงและลดขนาดบันเดิล ความสามารถเหล่านี้ยังคงพัฒนาอยู่ โปรดติดตาม Open UI เพื่อดูความคืบหน้าสู่เสถียรภาพ และนำไปใช้งานเมื่อเบราว์เซอร์เริ่มรองรับ