การยุบส่วนเนื้อหา ซึ่งบางครั้งเรียกว่าแอคคอร์เดียน เป็นรูปแบบ UI ที่พบได้ทั่วไป อย่างไรก็ตาม เนื้อหาที่ซ่อนอยู่ในส่วนที่ยุบจะค้นหาโดยใช้การค้นหาในหน้าเว็บไม่ได้ นอกจากนี้ คุณยังลิงก์ไปยังข้อความที่ตัดตอนมาภายในภูมิภาคที่ยุบไม่ได้
แอตทริบิวต์ HTML hidden=until-found และเหตุการณ์ beforematch ช่วยแก้ปัญหาเหล่านี้ได้ การเพิ่ม hidden=until-found ลงในคอนเทนเนอร์สําหรับเนื้อหาที่ซ่อนอยู่จะช่วยให้เบราว์เซอร์ค้นหาข้อความในส่วนที่ซ่อนอยู่ได้ และแสดงส่วนนั้นหากพบรายการที่ตรงกัน
ฟีเจอร์เหล่านี้พร้อมใช้งานใน Chrome 102 แล้ว เรามาลองดูวิธีการทำงานของฟีเจอร์กัน
วิธีการใช้งาน
หากเว็บไซต์มีส่วนที่ยุบได้ซึ่งคุณต้องการให้ค้นหาได้ ให้แทนที่รูปแบบที่ทำให้ส่วนดังกล่าวซ่อนอยู่ด้วยแอตทริบิวต์ hidden=until-found หากหน้าเว็บมีสถานะอื่นที่ต้องซิงค์กับการแสดงหรือซ่อนส่วน ให้เพิ่ม beforematch event listener ที่จะเริ่มทํางานกับองค์ประกอบ hidden=until-found ก่อนที่เบราว์เซอร์จะแสดงองค์ประกอบ
คำเตือน
เนื้อหา hidden=until-found ควรแสดงได้โดยไม่ต้องใช้ฟีเจอร์ค้นหาในหน้า เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่สอดคล้องกัน ผู้ใช้บางคนอาจใช้การค้นหาในหน้าเว็บ และเบราว์เซอร์ที่ไม่รองรับ hidden=until-found จะได้รับประสบการณ์การใช้งานแบบเดิมของเนื้อหาที่ซ่อนไว้โดยไม่มีการเปิดเผยการค้นหาในหน้าเว็บ
หากต้องการตรวจสอบว่าเนื้อหาที่ซ่อนอยู่สามารถค้นหาได้ในเบราว์เซอร์ที่ไม่รองรับ hidden=until-found คุณสามารถขยายเนื้อหาที่ซ่อนอยู่ในเบราว์เซอร์เหล่านั้นได้ทุกเมื่อ การตรวจหาฟีเจอร์ทำได้โดยตรวจหาตัวแฮนเดิลเหตุการณ์ beforematch ที่มีอยู่ ดังนี้
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found ใช้พร็อพเพอร์ตี้ CSS content-visibility:hidden แทนพร็อพเพอร์ตี้ display:none ที่มีแอตทริบิวต์ที่ซ่อนอยู่ปกติ ซึ่งจำเป็นต้องใช้เพื่อค้นหาเนื้อหาขณะที่ปิดอยู่ แต่ก็มีผลกระทบข้างเคียงดังนี้
- API เลย์เอาต์บางรายการ เช่น
getBoundingClientRectจะรายงานว่าเนื้อหาที่ซ่อนอยู่ภายในองค์ประกอบhidden=until-foundใช้พื้นที่และมีตําแหน่งในหน้า - ระบบจะไม่แสดงผลโหนดย่อยขององค์ประกอบ
hidden=until-foundแต่องค์ประกอบhidden=until-foundเองจะยังคงมีกล่อง ซึ่งหมายความว่าพร็อพเพอร์ตี้ CSS เช่น เส้นขอบและขนาดที่ชัดเจนจะยังคงส่งผลต่อการแสดงผล
ตัวอย่างของกรณีนี้คือ การแสดงตัวอย่างต่อไปนี้จะเพิ่มระยะขอบ เส้นขอบ และระยะห่างจากขอบในองค์ประกอบที่มีการใช้ hidden=until-found กล่องที่มีเส้นขอบสีเทาจะปรากฏขึ้นตรงตำแหน่งที่เนื้อหาที่ซ่อนอยู่จะปรากฏขึ้น จากนั้นระบบจะแสดงเนื้อหาที่ซ่อนอยู่เมื่อมีการเปิดเผย นี่คือช่องขององค์ประกอบที่ซ่อนอยู่
คุณสามารถหลีกเลี่ยงปัญหานี้ได้ด้วยการใส่เส้นขอบในองค์ประกอบที่ฝังอยู่ภายในคอนเทนเนอร์ที่มี hidden=until-found