visibility

خاصية الرؤية visibility

خاصية visibility: hidden تخفي العنصر مع إبقاء مساحته محجوزة — ثالث أساليب الإخفاء الثلاثة ولكلٍ موضعه.

مثلث الإخفاء الذي يجب فهمه مرة واحدة: **display:none** يزيل العنصر كليًا (لا مساحة، لا وصولية، لا حركة CSS إليه)، و**visibility:hidden** يخفيه ويحجز فراغه الشاغر (لا يستقبل نقرات) — مثالي لإخفاءٍ لا يزلزل التخطيط، و**opacity:0** شبح كامل: خفي لكنه يستقبل النقرات وتعمل عليه الحركات — الأنسب للإخفاء المتحرك (مع تعطيل التفاعل يدويًا).

طرفة مفيدة: visibility قابلة للعكس بالأبناء — أب hidden يمكن لابن visible داخله أن يظهر وحده.

الصياغة

.placeholder { visibility: hidden; } /* خفي والمكان محجوز */

/* المثلث: */
/* display:none    → لا وجود ولا مساحة */
/* visibility:hidden → مساحة بلا ظهور ولا نقر */
/* opacity:0        → شبح ينقر وتحركه CSS */

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .row span { display: inline-block; background: #7c5cff; color: white; padding: 10px 16px; border-radius: 8px; margin: 3px; }
</style>
<div class="row">
  <span>ظاهر</span><span style="visibility:hidden">مخفي</span><span>ظاهر</span>
</div>
<div class="row">
  <span>ظاهر</span><span style="display:none">مخفي</span><span>ظاهر</span>
</div>
<p>الصف الأول ترك فجوة (مساحة محجوزة) — الثاني التأم كأن العنصر لم يكن.</p>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
hidden	إخفاء بمساحة محجوزة وبلا نقرات
visible	الافتراضي — ويعكس إخفاء الأب على ابن بعينه
collapse	لصفوف وأعمدة الجداول — إزالة بلا كسر التخطيط

💡 نصائح عملية

احفظ المثلث بسؤالين: أتريد حجز المساحة؟ أتريد حركة انتقالية؟ — الجواب يحدد الأداة
إخفاء بصري مع بقاء قارئ الشاشة يقرأ؟ لا أحد من الثلاثة — نمط sr-only المخصص

⚠️ أخطاء شائعة

opacity:0 لإخفاء زر فيبقى قابلًا للنقر الخفي — فخ مشهور
display:none مع توقع انتقال ناعم — لا حركة من العدم وإليه

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs