بخش‌های محتوای جمع‌شده، که گاهی به عنوان آکاردئون توصیف می‌شوند، یک الگوی رابط کاربری مشترک هستند. با این حال، جستجوی محتوای پنهان در بخش‌های جمع‌شده با استفاده از جستجوی یافتن در صفحه غیرممکن می‌شود. همچنین، امکان پیوند دادن به قطعات متن در مناطق جمع شده وجود ندارد.
ویژگی HTML hidden=until-found و رویداد beforematch می تواند این مشکلات را حل کند. با افزودن hidden=until-found به کانتینر محتوای مخفی خود، این امکان را برای مرورگر فراهم می‌کنید که متن را در آن منطقه پنهان جستجو کند و در صورت یافتن مطابقت، بخش را آشکار کند.
این ویژگی‌ها در Chrome 102 در دسترس هستند، بنابراین بیایید نگاهی به نحوه عملکرد آن‌ها بیندازیم.
نحوه استفاده از آن
اگر وب‌سایت شما از قبل دارای بخش‌های جمع‌شدنی است که می‌خواهید آن‌ها را قابل جستجو کنید، سبک‌هایی را که بخش را پنهان می‌کنند با ویژگی hidden=until-found جایگزین کنید. اگر صفحه شما حالت دیگری نیز دارد که باید با آشکار شدن یا نشدن بخش شما هماهنگ باشد، یک شنونده رویداد beforematch مسابقه اضافه کنید که درست قبل از آشکار شدن عنصر توسط مرورگر، روی عنصر hidden=until-found فعال می‌شود. .
هشدارها
برای یک تجربه کاربری ثابت، محتوای hidden=until-found باید بدون استفاده از find-in-page قابل نمایش باشد. همه کاربران از find-in-page استفاده نخواهند کرد، و مرورگرهایی که hidden=until-found پشتیبانی نمی‌کنند، تجربه اصلی محتوای پنهان را بدون آشکارسازی Find-in-Page دریافت خواهند کرد.
اگر می‌خواهید مطمئن شوید که محتوای پنهان شما در مرورگرهایی که 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 مانند حاشیه و اندازه صریح همچنان بر رندر تأثیر می‌گذارند.
به عنوان نمونه ای از این، نسخه آزمایشی زیر حاشیه، حاشیه و padding را به عنصری اضافه می کند که hidden=until-found اعمال شده است. در جایی که محتوای پنهان ظاهر می شود کادری با حاشیه خاکستری است که پس از آشکار شدن با محتوای پنهان پر می شود. این جعبه عنصر پنهان است.
برای جلوگیری از این مشکل، حاشیه را به عنصر تو در تو در داخل ظرف اضافه کنید که hidden=until-found است.
تصویر قهرمان توسط توماس بورمنز .