CSS/visibility

الخاصية visibility في CSS تسمح بإظهار أو إخفاء عنصر دون التأثير بتخطيط المستند، أي أنَّ المساحة ستُحجَز للعناصر سواءً كانت مرئيةً أو لا، ويمكن استخدام هذه الخاصية أيضًا لإخفاء أو إظهار الأعمدة في جدول <table>.

/* الكلمات المحجوزة */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* القيم العامة */
visibility: inherit;
visibility: initial;
visibility: unset;

ملاحظة: إذا أردتَ إخفاء العنصر وإزالته من تخطيط المستند معًا، فاضبط الخاصية display إلى القيمة none بدلًا من استخدام الخاصية visibility.

القيمة الابتدائية	visible
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للحركة	نعم
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

مثال عن استخدام الخاصية visibility لإخفاء عنصر <p> بين عنصرين آخرين، ويوضِّح المثال كيف أنَّ المساحة التي كان يشغلها العنصر ما تزال محجوزةً:

<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p>

شيفرة CSS:

.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

استخدام القيمة collapse على عناصر الجدول، التي ستؤدي إلى نفس أثر القاعدة display: none لكن دون إعادة إجراء الحسابات المتعلقة بأبعاد الجدول:

<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

شيفرة CSS:

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

لاحظ أنَّ هذا المثال قد لا يعمل على متصفحات Chrome و Safari كما ينبغي، راجع قسم «دعم المتصفحات» لمزيدٍ من المعلومات.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	4.0	1.0

دعم الكلمة المحجوزة collapse ليس تامًا أو فيه أخطاء في بعض المتصفحات الحديثة (مثل Chrome و Safari)، وقد تعامل تلك المتصفحات هذه القيمة كما تعامل القيمة hidden.

البنية العامة

الخاصية visibility تقبل قيمةً واحدة من الكلمات المفتاحية المذكورة أدناه.

القيمة visible

صندوق العنصر مرئي.

القيمة hidden

صندوق العنصر غير مرئي، لكنه سيؤثر على تخطيط الصفحة كالمعتاد. ويمكن أن يكون أبناء العنصر ظاهرة إن ضُبِطَت الخاصية visibility إلى visible.

القيمة collapse

تُستخدَم هذه الخاصية مع عناصر الجداول فقط، وتسمح بإزالة سطر أو عمود إزالةً تامةً (كما لو استخدمنا القاعدة display: none)، والمسافة المأخوذة من السطر أو العمود ستكون متاحةً لبقية المحتوى.

اذا استخدمت هذه القيمة على العناصر الأخرى فسيكون لها نفس تأثير القيمة hidden.

البنية الرسمية

visibility: visible | hidden | collapse;

مصادر ومواصفات

• مسودة CSS Basic Box Model.
• مسودة CSS Transitions.
• مواصفة ‎CSS Level 2 (Revision 1)‎.