خاصية Visibility
آخر تحديث: 2026-09-13
visibility خاصية Visibility
تتحكم خاصية visibility فيما إذا كان العنصر مرئيًا. الفرق الجوهري عن display:none هو أن hidden لا يزال يشغل مساحة في التخطيط؛ العنصر ببساطة لا يُصيَّر بصريًا. القيمة الافتراضية visible تُظهر العنصر بشكل طبيعي. هذه الخاصية موروثة وتُستخدم غالبًا لإخفاء العناصر مع إبقاء مساحتها.
| الفئة | |
|---|---|
| القيمة الأولية | visible |
| موروث | نعم |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
visibility: visible | hidden | collapse;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
visible | hidden | collapse | كلمة مفتاحية | تتحكم فيما إذا كان العنصر مرئيًا (hidden لا يزال يشغل مساحة). |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| visibility | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： لا يزال عنصر visibility:hidden يشغل مساحة؛ بينما يزيله display:none من التخطيط تمامًا.
❓ الأسئلة الشائعة
Qما الفرق بين visibility:hidden و display:none؟
Aيُخفي visibility:hidden العنصر مع إبقاء مساحته الأصلية في التخطيط؛ يبقى في تدفق المستند ولا يزال يقرأه قارئات الشاشة. و يزيل display:none العنصر من التدفق تمامًا، دون أن يشغل مساحة ومخفيًا عن قارئات الشاشة. استخدم visibility:hidden للإخفاء مع الحفاظ على المساحة، مثلًا أثناء قياس تخطيط أو انتظار محتوى، واستخدم display:none لإزالة عنصر بالكامل.
Qما الفرق بين visibility:hidden و opacity:0؟
Aكلاهما يخفي العنصر بصريًا مع إبقاء مساحته، لكن opacity:0 لا يزال يسمح بالنقر والأحداث ويدعم الانتقالات السلسة، في حين يتوقف visibility:hidden عن الاستجابة لأحداث الماوس، فتمر النقرات عبره، ولديه دعم انتقالي محدود. كما يُنشئ opacity سياق تكديس جديد، بينما لا يؤثر visibility على تخطيط الأبناء، ويمكن استعادة الأبناء بشكل فردي عبر visibility:visible. اختر opacity للتلاشي، و visibility لإزالة التفاعل الحقيقية.
Qهل تُورَّث visibility؟
Aنعم. تُعد visibility واحدة من قلائل خصائص CSS الموروثة: عندما يُضبط الأصل على hidden، يُخفى أبناؤه افتراضيًا، لكن يمكن للابن إجبار نفسه على الظهور عبر visibility:visible. هذا مفيد للقوائم الفرعية واللوحات القابلة للتوسيع، حيث تخفي الحاوية الأصل ثم تكشف الأبناء عند التمرير دون المساس بنمط الأصل نفسه، مما يحافظ على تنفيذ بسيط ومكتفٍ ذاتيًا.
Qهل يمكن إجراء انتقال لـ visibility؟
Aإن visibility خاصية منفصلة، لذا تكون الانتقالات عادةً قفزًا بدلًا من تلاشٍ. والحيلة الشائعة هي إجراء انتقال لها مع opacity: تُضعِف opacity من 0 إلى 1 مع تبديل visibility في نهاية الأنميشن. ينتج عن ذلك تأثيرات تلاشٍ ظهورًا واختفاءً نظيفة، ويُستخدم كثيرًا للنوافذ المنبثقة والتلميحات وأنميشن الإظهار/الإخفاء المماثلة، مما يمنح نفس اللمعان الذي تمنحه انتقالات opacity وحدها مع إبقاء العنصر غير تفاعلي أثناء إخفائه.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
