أقسام المحتوى القابلة للتصغير، التي توصف أحيانًا باسم أكورديون، هي نمط شائع في واجهة المستخدم. ومع ذلك، يصبح من المستحيل البحث عن المحتوى المخفي في الأقسام المصغّرة باستخدام ميزة "البحث في الصفحة". ولا يمكن أيضًا الربط بأجزاء نصية داخل المناطق المصغّرة.
يمكن أن تحلّ سمة HTML hidden=until-found والحدث beforematch هذه المشاكل. من خلال إضافة hidden=until-found إلى حاوية المحتوى المخفي، يمكنك السماح للمتصفّح بالبحث عن نص في تلك المنطقة المخفية، وعرض القسم إذا تم العثور على مطابقة.
تتوفّر هذه الميزات في الإصدار 102 من Chrome، لذا لنلقِ نظرة على آلية عملها.
كيفية استخدام فئة التدقيق الجديدة
إذا كان موقعك الإلكتروني يتضمّن أقسامًا قابلة للطي تريد جعلها قابلة للبحث، استبدِل الأنماط التي تجعل القسم مخفيًا باستخدام السمة 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 التي تطبّق السمة المخفية العادية. وهذا الإجراء ضروري للبحث في المحتوى عندما يكون مغلقًا، ولكن له الآثار الجانبية التالية أيضًا:
- ستُبلغ بعض واجهات برمجة التطبيقات للتخطيط، مثل
getBoundingClientRect، أنّ المحتوى المخفي داخل عنصرhidden=until-foundيشغل مساحة ويشغل موضعًا في الصفحة. - لن يتم عرض العقد الفرعية للعنصر
hidden=until-found، ولكن سيظل العنصرhidden=until-foundنفسه يحتوي على مربّع. وهذا يعني أنّ خصائص CSS، مثل الحدود والحجم الصريح، ستظل تؤثر في العرض.
كمثال على ذلك، يضيف العرض التوضيحي التالي هامشًا وحدودًا ومساحة متروكة إلى العنصر الذي تم تطبيق hidden=until-found عليه. في المكان الذي سيظهر فيه المحتوى المخفي، سيظهر مربّع بحدود رمادية، ثمّ سيظهر المحتوى المخفي عند كشفه. هذا هو مربّع العنصر المخفي.
لتجنُّب هذه المشكلة، أضِف الحد إلى عنصر مُدمَج داخل الحاوية التي تحتوي على hidden=until-found.