CSS/display

الخاصية display في CSS تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر. تؤخذ قيمة الخاصية display في لغة HTML من مواصفة HTML أو من صفحة الأنماط الافتراضية في المتصفح أو التابعة للمستخدم، أما القيمة الافتراضية لها في XML هي inline.

دورة تطوير واجهات المستخدم

• 66 ساعة فيديو تدريبية
• من الصفر دون الحاجة لخبرة مسبقة
• شهادة معتمدة من أكاديمية حسوب
• متابعة أثناء الدورة من فريق مختص

اشترك الآن

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

القيمة الابتدائية	inline
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت، ما عدا العناصر التي يمكن أن يتغير مكانها (positioned elements) والعناصر العائمة (floating elements) والعنصر الجذر (root element) فقد تكون القيمة المحسوبة تساوي كلمة محجوزة تختلف عن القيمة المُحدَّدة.

بالإضافة إلى أنواع العرض الممكنة، ستسمح لنا القيمة none بعدم عرض العنصر تمامًا، بما في ذلك جميع العناصر الأبناء له، وستُعرَض الصفحة كما لو أنَّ العنصر ليس موجودًا في شجرة المستند.

/* <display-outside> */
display: block;
display: inline;
display: run-in;

/* <display-inside> */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;

/* <display-outside> + <display-inside> */
display: block flow;
display: inline table;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;

/* <display-box> */
display: contents;
display: none;

/* <display-legacy> */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

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

أمثلة

مثال عن استخدام الكلمة المحجوزة none لإزالة العنصر <span> من الصفحة المعروضة:

<div>موسوعة حسوب التعليمية, <span class="display-none">ترحب بكم!</span> في أكبر محتوى تعليمي عربي على الشبكة.</div>

شيفرة CSS:

.display-none {
  display: none;
}

مثال عن استخدام القيمة inline على العنصر <p> (وهو عنصرٌ كتلي block element):

<div>موسوعة حسوب التعليمية, <span class="display-inline">ترحب بكم!</span> في أكبر محتوى تعليمي عربي على الشبكة.</div>

شيفرة CSS:

.display-inline {
  display: inline;
}

لاحظ كيف لا يكون للخاصيتين width و height (وغيرهما) أي تأثير على العنصر <p> السابق. هذا مثالٌ عن استخدام القيمة block على عنصر سطري مثل العنصر <b>:

<div>موسوعة حسوب التعليمية, <span class="display-block">ترحب بكم!</span> في أكبر محتوى تعليمي عربي على الشبكة.</div>

شيفرة CSS:

.display-block {
  display: block;
}

المثال الآتي يستعمل القيمة inline-block، وسنُطبِّقه على العنصر <p> مع تحديد قيم للخاصيات width و height و padding:

<div>موسوعة حسوب التعليمية, <span class="display-inline-block">ترحب بكم!</span> في أكبر محتوى تعليمي عربي على الشبكة.</div>

شيفرة CSS:

.display-block {
  display: inline-block;
  width: 100px;
  height: 2em;
  padding: 0 1em 0;
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	8.0	7.0	1.0
flex و inline-flex	29.0	20.0	11	12.5	9.0
grid و inline-grid	57	45.0	10.0 مع السابقة -ms-	44	TP
flow-root	58	53.0	؟	45	؟

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

تُحدَّد الخاصية display باستخدام كلمات محجوزة، وهذه الكلمات المحجوزة مُقسَّمة إلى ستة تصنيفات.

• <display-outside>
• <display-inside>
• <display-listitem>
• <display-internal>
• <display-box>
• <display-legacy>

من المستحسن في الفترة الحالية تحديد الخاصية display باستخدام كلمة محجوزة واحدة، مع أنَّ المواصفات الحديثة تسمح لنا باستخدام أكثر من كلمة محجوزة معًا، لكن ذلك ليس مدعومًا دعمًا جيدًا في المتصفحات.

<display-outside>

تُحدِّد هذه الكلمات المحجوزة نوع عرض العنصر الخارجي (outer display type)، وهي يعني أنَّ للعنصر دورٌ تنظيمي (flow element):

القيمة	الشرح
block	سيولِّد العنصر صندوقًا لعنصر كتلي (block element box).
inline	سيولِّد العنصر صندوقًا أو أكثر من صناديق العناصر السطرية (inline element boxes).

<display-inside>

تُحدِّد هذه الكلمات المحجوزة نوع عرض العنصر الداخلي، الذي يعني تعريف نوع التنسيق الذي سيُطبَّق على محتويات العنصر:

القيمة	الشرح
flow	سيُنسِّق العنصر محتوياته باستخدام تخطيط flow (أي تخطيط block-and-inline).
flow-root	سيولِّد العنصر صندوقًا لعنصر كتلي ويُنشِئ سياق تنسيق كتلي جديد (block formatting context).
table	سيسلك هذا العنصر سلوك عناصر <table> في HTML. ويُعرِّف صندوقًا كتليًا (block box).
flex	سيسلك هذا العنصر سلوك العناصر الكتلية، وسينسق محتوياته باستخدام نموذج flexbox.
grid	سيسلك هذا العنصر سلوك العناصر الكتلية، وسينسق محتوياته باستخدام نموذج grid.

<display-listitem>

سيولِّد العنصر صندوقًا كتليًا لمحتوياته، وصندوقًا سطريًا لكل عنصر من عناصر القائمة.

إذا لم تُحدِّد <display-inside> فسيكون نوع عرض المحتويات الداخلية للعنصر هو flow، وإن لم تُحدَّد <display-outside> فسيكون نوع عرض الصندوق الخارجي للعنصر هو block.

<display-internal>

نمط التخطيط table له بنية داخلية معقدة مع عدِّة أدوار يمكن أن يلعبها أبناء العنصر. وهذه القيم تُعرِّف تلك القيم الداخلية، التي لها معنى في نمط التخطيط table فقط.

سيتم ضبط نمط العرض الخارجي والداخلي للعناصر إلى قيمة الكلمة المحجوزة المُحدَّدة ما لم يُضبَط غير ذلك:

القيمة	الشرح
table-row-group	ستسلك هذه العناصر نفس سلوك عناصر <tbody> في HTML.
table-header-group	ستسلك هذه العناصر نفس سلوك عناصر <thead> في HTML.
table-footer-group	ستسلك هذه العناصر نفس سلوك عناصر <tfoot> في HTML.
table-row	ستسلك هذه العناصر نفس سلوك عناصر <tr> في HTML.
table-cell	ستسلك هذه العناصر نفس سلوك عناصر <td> في HTML.
table-column-group	ستسلك هذه العناصر نفس سلوك عناصر <colgroup> في HTML.
table-column	ستسلك هذه العناصر نفس سلوك عناصر <col> في HTML.
table-caption	ستسلك هذه العناصر نفس سلوك عناصر <caption> في HTML.

<display-box>

تُحدِّد هذه القيمة إذا كان العنصر سيولِّد صندوقًا أم لا.

الكلمة المحجوزة none تؤدي إلى عدم عرض العنصر تمامًا، بما في ذلك جميع العناصر الأبناء له، وستُعرَض الصفحة كما لو أنَّ العنصر ليس موجودًا في شجرة المستند.

إذا أردت أن يأخذ العنصر المساحة التي يحتلها عادةً لكن دون عرض أيّ شيء، فاستخدم الخاصية visibility بدلًا من الخاصية display.

<display-legacy>

كانت CSS 2 تستعمل كلمةً محجوزةً واحدةً لوصف الخاصية display، مما يعني الحاجة إلى وجود كلمات محجوزة منفصلة لدمج أكثر من نوع من أنواع عرض العنصر في نفس نموذج التخطيط:

القيمة	الشرح
inline-block	سيولِّد هذا العنصر صندوق عنصر كتلي التي سينسجم مع المحتوى المحيط به كما لو أنَّه صندوقٌ سطري. هذه القيمة مكافئة لاستخدام inline flow-root.
inline-table	القيمة inline-table ليس لها مكافئ مباشر في HTML، فهي تسلك سلوك الجداول <table> في HTML لكن في صناديق سطرية، بدلًا من استخدام صناديق كتلية. هذه القيمة مكافئة لاستخدام inline table.
inline-flex	سيسلك العنصر سلوك عنصر سطري لكنه يُنسِّق محتوياته وفق نموذج flexbox. هذه القيمة مكافئة لاستخدام inline flex.
inline-grid	سيسلك العنصر سلوك عنصر سطري لكنه يُنسِّق محتوياته وفق نموذج grid.

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

display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>;

انظر أيضًا

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

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

• مسودة CSS Flexible Box Layout Module. أضافت هذه المسودة القيم flow و flow-root والقدرة على تحديد أكثر من كلمة محجوزة.
• مواصفة CSS Grid Layout. أضافت هذه المواصفة نموذج grid.
• مواصفة CSS Flexible Box Layout Module. أضافت هذه المواصفة نموذج flexbox.
• مواصفة ‎CSS Level 2 (Revision 1)‎. أضافت المواصفة قيم أنواع العرض التابعة للجداول والقيمة inline-block.
• مواصفة CSS Level 1. عرّفت هذه المواصفة القيم الأساسية: none و block و inline و list-item.