קטעי תוכן שניתן לכווץ, שנקראים לפעמים אקורדיון, הם דפוס נפוץ בממשק המשתמש. עם זאת, לא ניתן לחפש תוכן שמוסתר בקטעים המקוצרים באמצעות חיפוש בתוך הדף. בנוסף, אי אפשר לקשר לקטעי טקסט בתוך אזורים מכווצים.
אפשר לפתור את הבעיות האלה באמצעות מאפיין ה-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.