การย่อส่วนของเนื้อหาซึ่งบางครั้งเรียกว่าแอคคอร์เดียนเป็นรูปแบบ UI ทั่วไป อย่างไรก็ตาม เนื้อหาที่ซ่อนอยู่ในส่วนที่ยุบอยู่จะไม่สามารถค้นหาโดยใช้การค้นหาในหน้า และจะลิงก์ไปยังส่วนย่อยข้อความภายในส่วนที่ยุบไม่ได้ด้วย
แอตทริบิวต์ HTML hidden=until-found และเหตุการณ์ beforematch ช่วยแก้ปัญหาเหล่านี้ได้ การเพิ่ม hidden=until-found ในคอนเทนเนอร์สำหรับเนื้อหาที่ซ่อน ช่วยให้เบราว์เซอร์ค้นหาข้อความในส่วนที่ซ่อนได้และแสดงส่วนดังกล่าวหากพบข้อความที่ตรงกัน
ฟีเจอร์เหล่านี้มีให้ใช้งานใน Chrome 102 มาดูวิธีการทำงานของฟีเจอร์เหล่านี้กันเลย
วิธีการใช้งาน
หากเว็บไซต์มีส่วนที่ยุบได้อยู่แล้วซึ่งคุณต้องการให้ค้นหาได้ ให้แทนที่รูปแบบที่ซ่อนส่วนนั้นด้วยแอตทริบิวต์ hidden=until-found หากหน้าเว็บมีสถานะอื่นซึ่งจะต้องซิงค์หรือไม่ว่ามีการแสดงส่วนหรือไม่ ให้เพิ่ม Listener เหตุการณ์ beforematch ที่จะเริ่มทำงานในองค์ประกอบ 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 จะใช้พร็อพเพอร์ตี้ content-visibility:hidden CSS แทนพร็อพเพอร์ตี้ display:none ที่แอตทริบิวต์ซ่อนปกติใช้ จำเป็นต้องใช้เพื่อค้นหาเนื้อหาขณะที่ปิดอยู่ แต่ก็มีผลข้างเคียงต่อไปนี้ด้วย
- API เลย์เอาต์บางรายการ เช่น
getBoundingClientRectจะรายงานว่าเนื้อหาที่ซ่อนอยู่ภายในองค์ประกอบhidden=until-foundใช้พื้นที่และมีตำแหน่งในหน้า - โหนดย่อยขององค์ประกอบ
hidden=until-foundจะไม่แสดงผล แต่ตัวองค์ประกอบhidden=until-foundเองจะยังคงมีช่องอยู่ ซึ่งหมายความว่าคุณสมบัติ CSS เช่น เส้นขอบและขนาดที่อาจไม่เหมาะสมจะยังคงมีผลต่อการแสดงผล
สำหรับตัวอย่างนี้ การสาธิตต่อไปนี้จะเพิ่มระยะขอบ เส้นขอบ และระยะห่างจากขอบให้กับองค์ประกอบที่ใช้ hidden=until-found บริเวณที่เนื้อหาที่ซ่อนอยู่จะปรากฏขึ้นคือกรอบที่มีขอบสีเทา ซึ่งจะเติมด้วยเนื้อหาที่ซ่อนอยู่เมื่อเนื้อหาถูกเปิดเผย ซึ่งก็คือช่องขององค์ประกอบที่ซ่อนไว้
ในการหลีกเลี่ยงปัญหานี้ ให้เพิ่มเส้นขอบให้กับองค์ประกอบที่ฝังอยู่ภายในคอนเทนเนอร์ที่มี hidden=until-found
รูปภาพหลักโดย Thomas Bormans