CSS/visibility

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

بطاقة الخاصية

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

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

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

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

أمثلة

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

<p class="visible">الفقرة اللأولى مرئية.</p>
<p class="not-visible">الفقرة الثانية غير مرئية.</p>
<p class="visible">الفقرة الثالثة مرئية. لاحظ أن الفقرة الثانية لا تزال تحتل مساحة.</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;

انظر أيضًا

• صفحة الخاصية position التي تصف كيفية تموضع العنصر في المستند.
• صفحة الخاصية float  التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.
• صفحة الخاصية display التي  تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر.

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

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