التحكم في رؤية العناصر
الخاصية Visibility في لغة CSS
يمكننا استخدام الخاصية visibility للتحكم في ما إذا كان العنصر مرئيًا أم لا. يمكن أن تأخذ هذه الخاصية إحدى القيم التالية المدرجة في الجدول أدناه:
تغير القيمة الإفتراضية للخاصية Display
يؤدي تجاوز القيمة الافتراضية للخاصية display للعنصر إلى تغير طريقة عرض العنصر في صفحة الويب . على سبيل المثال ، تغيير عنصر على مستوى مضمّن inline-level ليتم عرضه كعنصر على مستوى الكتلة block-level أو تغيير عنصر مستوى الكتلة ليتم عرضه كعنصر على مستوى مضمّن.
| القيمة | الوصف |
|---|---|
| visible | القيمة الافتراضية. الصندوق ومحتوياته مرئيان. |
| hidden | الصندوق ومحتوياته غير مرئيين ، لكنهما لا يزالان يؤثران على تنسيق الصفحة. |
| collapse | تؤدي هذه القيمة إلى إزالة الصف أو العمود بالكامل من العرض. تُستخدم هذه القيمة لعناصر الصفوف ومجموعة الصفوف والأعمدة ومجموعة الأعمدة. |
| inherit | تحدد أن قيمة الخاصية visibility يجب أن يتم اكتسابها من العنصر الأب ، أي تأخذ نفس قيمة الخاصية visibility كما هي محددة للعنصر الأب. |
visibility: collapse; تزيل العناصر الداخلية من الجدول ، لكنها لا تؤثر على تخطيط الجدول نهائياً. سيتم ملء المساحة التي كانت تشغلها هذه العناصر من قبل العناصر المجاورة لها.
اما اذا تم استخدام القيمة collapse لعناصر أخرى غير عناصر الجدول ، فسيكون تأثيرها نفس تأثير القيمة hidden .
الفرق بين الخاصية Visibility و الخاصية Display
يبدو للوهلة الأولى أن الخصائص display و visibility لها نفس التأثير ، لكنها في الواقع مختلفة تمامًا وغالبًا ما يتم الخلط بينها من قبل مطورين الويب الجدد.
-
visibility: hidden;تعمل على إخفاء العنصر ، لكنه لا يزال يشغل مساحة داخل مخطط صفحة الويب. وستكون العناصر الأبناء للصندوق المخفي مرئية إذا تم ضبط إمكانية الرؤية على أن تكون مرئية. -
display: none;بهذه الطريقة نقوم بإيقاف عرض العنصر تماما مما يؤدي إلى إزالته من شجرة المستند ولن يشغل أي مساحة ، على الرغم من أن كود HTML الخاص به لا يزال موجودا في الكود المصدري. أيضًا يتم إيقاف عرض جميع العناصر الموجودة بداخله (العناصر الابناء لهذا العنصر) ، حتى إذا تم تحديد قيمة الخاصيةdisplayالخاصة بها على شيء آخر غيرnone.
العرض التالي يوضح تأثير الخصائص display و visibility على مخطط صفحة الويب.