🎯 التحكم في ظهور العناصر: دليل شامل لخاصية visibility في CSS

اليوم سنتعلم كيفية التحكم في ظهور العناصر على صفحة الويب باستخدام خاصية CSS الرائعة visibility. هذه الخاصية تمنحك القدرة على إظهار أو إخفاء العناصر بسهولة مع الحفاظ على تخطيط الصفحة.

📖 ما هي خاصية visibility؟

خاصية visibility في CSS تتحكم في رؤية العنصر على الصفحة. بمعنى آخر، تحدد ما إذا كان العنصر مرئياً للمستخدم أم مخفياً عنه.

.element {
    visibility: visible; /* العنصر ظاهر */
}

الخاصية تأخذ عدة قيم أساسية سنتعرف عليها الآن خطوة بخطوة.

🔍 القيم الأساسية لخاصية visibility

1. visible (الافتراضي)

هذه القيمة تجعل العنصر ظاهراً تماماً كما هو متوقع. إذا لم تحدد قيمة للخاصية، فهذه هي القيمة الافتراضية.

.box {
    visibility: visible; /* العنصر مرئي */
}

2. hidden

هذه القيمة تجعل العنصر مخفياً، لكن مع فارق مهم جداً: العنصر لا يزال يشغل مساحته في الصفحة!

.hidden-box {
    visibility: hidden; /* العنصر مخفي لكن مساحته محجوزة */
}

🆚 الفرق بين visibility: hidden و display: none

هذا تمييز مهم جداً للمبتدئين:

  • visibility: hidden: يخفي العنصر لكن يحتفظ بمساحته في التخطيط
  • display: none: يخفي العنصر ويزيله تماماً من التخطيط
/* مثال عملي للتوضيح */
.box1 {
    visibility: hidden; /* مخفي لكن مساحته موجودة */
}

.box2 {
    display: none; /* مخفي ومساحته محذوفة */
}

💡 تخيل الأمر كالتالي: مع visibility: hidden يكون العنصر مثل شبح - غير مرئي لكنه لا يزال موجوداً. مع display: none يكون العنصر كما لو لم يكن موجوداً أصلاً!

🎭 قيمة collapse الخاصة بالجداول

هناك قيمة ثالثة خاصة بالجداول وهي collapse:

table tr {
    visibility: collapse; /* يخفي صف الجدول ويحذف مساحته */
}

هذه القيمة تعمل فقط على عناصر الجداول (table, tr, td, th). عندما تخفي صفاً في جدول باستخدام collapse، فإن الصف يختفي وتحذف مساحته (مشابه لـ display: none ولكن للجداول فقط).

🛠️ أمثلة عملية مبسطة

لنطبق ما تعلمناه بمثال عملي بسيط:

<!DOCTYPE html>
<html>
<head>
<style>
.visible-box {
    visibility: visible;
    background: lightblue;
    padding: 20px;
    margin: 10px;
}

.hidden-box {
    visibility: hidden;
    background: lightcoral;
    padding: 20px;
    margin: 10px;
}

.normal-box {
    background: lightgreen;
    padding: 20px;
    margin: 10px;
}
</style>
</head>
<body>
    <div class="visible-box">هذا العنصر ظاهر</div>
    <div class="hidden-box">هذا العنصر مخفي لكن مساحته محجوزة</div>
    <div class="normal-box">لاحظ المسافة فوقي بسبب العنصر المخفي</div>
</body>
</html>

في هذا المثال، سترى أن الصندوق الأزرق ظاهر، والأحمر مخفي لكنه يترك مسافة فارغة، والأخضر يظهر بشكل طبيعي مع وجود فراغ فوقه.

⚠️ نصائح مهمة للمبتدئين

  1. استخدم visibility عندما تريد إخفاء عنصر مع الحفاظ على تخطيط الصفحة
  2. استخدم display: none عندما تريد إزالة العنصر تماماً من التخطيط
  3. تذكر أن العناصر المخفية بـ visibility: hidden لا تزال قابلة للتفاعل عبر JavaScript
  4. اختر الأداة المناسبة للمهمة المناسبة

🎯 متى نستخدم كل خاصية؟

الموقف الخاصية المناسبة
إخفاء عنصر مع الحفاظ على مساحته visibility: hidden
إزالة عنصر تماماً من التخطيط display: none
إخفاء صف في جدول visibility: collapse
جعل عنصر شفافاً تدريجياً opacity (سنتعلمها لاحقاً)