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

المراجعة الحالية بتاريخ 16:44، 8 يوليو 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">الفقرة اللأولى مرئية.</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)‎.

@@ سطر 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>.
 == أمثلة ==
 مثال عن استخدام الخاصية <code>visibility</code> لإخفاء عنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> بين عنصرين آخرين، ويوضِّح المثال كيف أنَّ المساحة التي كان يشغلها العنصر ما تزال محجوزةً:<syntaxhighlight lang="html">
-<p class="visible">The first paragraph is visible.</p>
+<p class="visible">الفقرة اللأولى مرئية.</p>
-<p class="not-visible">The second paragraph is NOT visible.</p>
+<p class="not-visible">الفقرة الثانية غير مرئية.</p>
-<p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p>
+<p class="visible">الفقرة الثالثة مرئية. لاحظ أن الفقرة الثانية لا تزال تحتل مساحة.</p>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 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>.
 === البنية الرسمية ===
@@ سطر 112: / سطر 114: @@
 visibility: visible | hidden | collapse;
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيفية تموضع العنصر في المستند.
+* صفحة الخاصية <code>[[CSS/float|float]]</code>  التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.
+* صفحة الخاصية <code>[[CSS/display|display]]</code> التي  تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر.
 == مصادر ومواصفات ==
 * مسودة  [https://drafts.csswg.org/css-box-3/#visibility-prop CSS Basic Box Model].