الفرق بين المراجعتين لصفحة: «CSS/visibility»

مراجعة 19:06، 6 يوليو 2018

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

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

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

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

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

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

أمثلة

مثال عن استخدام الخاصية 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)‎.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>visibility</code>}}</noinclude>
-الخاصية <code>visibility</code> في CSS تسمح بإظهار أو إخفاء عنصر دون التأثير بتخطيط المستند، أي أنَّ المساحة ستُحجَز للعناصر سواءً كانت مرئيةً أو لا، ويمكن استخدام هذه الخاصية أيضًا لإخفاء أو إظهار الأعمدة في جدول <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.<syntaxhighlight lang="css">
+الخاصية <code>visibility</code> في CSS تسمح بإظهار أو إخفاء عنصر دون التأثير بتخطيط المستند، أي أنَّ المساحة ستُحجَز للعناصر سواءً كانت مرئيةً أو لا، ويمكن استخدام هذه الخاصية أيضًا لإخفاء أو إظهار الأعمدة في جدول <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.
-/* الكلمات المحجوزة */
-visibility: visible;
-visibility: hidden;
-visibility: collapse;
-/* القيم العامة */
+== بطاقة الخاصية ==
-visibility: inherit;
-visibility: initial;
-visibility: unset;
-</syntaxhighlight>ملاحظة: إذا أردتَ إخفاء العنصر وإزالته من تخطيط المستند معًا، فاضبط الخاصية <code>[[CSS/display|display]]</code> إلى القيمة <code>none</code> بدلًا من استخدام الخاصية <code>visibility</code>.
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 28: / سطر 20: @@
 |كما حُدِّدَت.
-|}
+|}<syntaxhighlight lang="css">
+/* الكلمات المحجوزة */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+/* القيم العامة */
+visibility: inherit;
+visibility: initial;
+visibility: unset;
+</syntaxhighlight>ملاحظة: إذا أردتَ إخفاء العنصر وإزالته من تخطيط المستند معًا، فاضبط الخاصية <code>[[CSS/display|display]]</code> إلى القيمة <code>none</code> بدلًا من استخدام الخاصية <code>visibility</code>.
 == أمثلة ==
@@ سطر 99: / سطر 101: @@
 الخاصية <code>visibility</code> تقبل قيمةً واحدة من الكلمات المفتاحية المذكورة أدناه.
-=== القيمة <code>visible</code> ===
+===  <code>visible</code> ===
 صندوق العنصر مرئي.
-=== القيمة <code>hidden</code> ===
+===  <code>hidden</code> ===
 صندوق العنصر غير مرئي، لكنه سيؤثر على تخطيط الصفحة كالمعتاد. ويمكن أن يكون أبناء العنصر ظاهرة إن ضُبِطَت الخاصية <code>visibility</code> إلى <code>visible</code>.
-=== القيمة <code>collapse</code> ===
+===  <code>collapse</code> ===
 تُستخدَم هذه الخاصية مع عناصر الجداول فقط، وتسمح بإزالة سطر أو عمود إزالةً تامةً (كما لو استخدمنا القاعدة <code>[[CSS/display|display]]: none</code>)، والمسافة المأخوذة من السطر أو العمود ستكون متاحةً لبقية المحتوى.
-اذا استخدمت هذه القيمة على العناصر الأخرى فسيكون لها نفس تأثير القيمة <code>hidden</code>.
+اذا استخدمت هذه القيمة على العناصر الأخرى فسيكون لها نفس تأثير  <code>hidden</code>.
 === البنية الرسمية ===