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