קטעי תוכן מתכווצים, שמתוארים לפעמים כאקורדיון, הם תבנית נפוצה בממשק המשתמש. עם זאת, לא ניתן יהיה לחפש תוכן מוסתר בקטעים המכווצים באמצעות חיפוש מסוג 'חיפוש בדף'. כמו כן, לא ניתן לקשר לקטעי טקסט בתוך אזורים מכווצים.
מאפיין ה-HTML hidden=until-found והאירוע beforematch יכולים לפתור את הבעיות האלה. הוספה של hidden=until-found למאגר התגים של התוכן המוסתר מאפשרת לדפדפן לחפש טקסט באזור המוסתר הזה ולחשוף את הקטע אם נמצאה התאמה.
התכונות האלה זמינות ב-Chrome 102, אז בוא ונראה איך הן פועלות.
איך להשתמש בעמודה
אם כבר יש באתר מדורים שניתנים לכיווץ ואתם רוצים לאפשר חיפוש בהם, מחליפים את הסגנונות שמסתירים את הקטע באמצעות המאפיין hidden=until-found. אם לדף יש גם מצב אחר שצריך להיות מסונכרן עם חשיפה או הסתרה של הקטע, יש להוסיף פונקציות event 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 מחילה את נכס ה-CSS content-visibility:hidden במקום את הנכס display:none שעליו חל המאפיין המוסתר הרגיל. הפעולה הזו נדרשת לחיפוש בתוכן כשהוא סגור, אבל יש לה גם את תופעות הלוואי הבאות:
- בחלק מממשקי ה-API לפריסה, כמו
getBoundingClientRect, יישלח דיווח שהתוכן המוסתר ברכיבhidden=until-foundתופס מקום ויש לו מיקום בדף. - צמתים צאצאים של הרכיב
hidden=until-foundלא יעברו עיבוד, אך לרכיב ה-hidden=until-foundעצמו עדיין תופיע תיבה. המשמעות היא שמאפייני CSS כגון גבול וגודל מפורש עדיין ישפיעו על העיבוד.
לדוגמה, ההדגמה הבאה מוסיפה שוליים, גבול ומרווח פנימי לרכיב שהחיל hidden=until-found. התוכן המוסתר מופיע בתיבה עם גבול אפור, שממלא את התוכן המוסתר כאשר הוא נחשף. זוהי התיבה של הרכיב המוסתר.
כדי להימנע מהבעיה הזו, צריך להוסיף את הגבול לרכיב שהוצב בתוך המאגר שמכיל hidden=until-found.
תמונה ראשית (Hero) של תומאס בורמן.