88. إخفاء وإظهار العناصر بشكل متجاوب

من الشائع في التصميم المتجاوب إخفاء العناصر المعقدة (مثل الأشرطة الجانبية أو القوائم الكبيرة) على الهاتف المحمول، وإظهارها فقط على الشاشات الأوسع، أو العكس.

1. استخدام display: none

display: none يزيل العنصر تماماً من تدفق المستند، مما يعني أنه لا يشغل مساحة ويتم تجاهله بواسطة قارئات الشاشة.

css /* الهاتف أولاً: إخفاء الشريط الجانبي في البداية */ .sidebar { display: none; }

/* إظهار الشريط الجانبي فقط على الحاسوب / @media (min-width: 1024px) { .sidebar { display: block; / أو flex أو grid */ } }

2. استخدام visibility: hidden

visibility: hidden يخفي العنصر، لكنه يظل يشغل مساحته في التخطيط. غالباً ما يتم تجاهله بواسطة قارئات الشاشة، لكنه لا يزال يؤثر على التخطيط.

3. استخدام opacity: 0

opacity: 0 يجعل العنصر شفافاً تماماً، لكنه يظل موجوداً بالكامل في تدفق المستند ولا يزال تفاعلياً (يمكن النقر عليه) ولا يزال يُقرأ بواسطة قارئات الشاشة.

اعتبار إمكانية الوصول: لإخفاء المحتوى الذي لا يجب قراءته أو التفاعل معه تماماً، فإن display: none هي الطريقة الأكثر فعالية، على الرغم من أن النمط الحديث هو تجنب إضافة محتوى معقد يتم إخفاؤه افتراضياً إلا إذا كانت ضرورة تنقل (مثل النافذة المنبثقة).