بخشهای محتوای جمعشده، که گاهی به عنوان آکاردئون توصیف میشوند، یک الگوی رابط کاربری مشترک هستند. با این حال، جستجوی محتوای پنهان در بخشهای جمعشده با استفاده از جستجوی یافتن در صفحه غیرممکن میشود. همچنین، امکان پیوند دادن به قطعات متن در مناطق جمع شده وجود ندارد.
ویژگی 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
است.
تصویر قهرمان توسط توماس بورمنز .