إنّ طي أقسام المحتوى، والتي تُعرف أحيانًا باسم الأكورديون، هو أحد أنماط واجهة المستخدم الشائعة. ومع ذلك، يصبح من المستحيل البحث عن المحتوى المخفي في الأقسام المصغّرة باستخدام ميزة "البحث في الصفحة". ولا يمكن أيضًا الربط بأجزاء نصية داخل المناطق المصغّرة.
يمكن أن تحلّ سمة 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.