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