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