CSS/display

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

بالإضافة إلى أنواع العرض الممكنة، ستسمح لنا القيمة 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;

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

أمثلة

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

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="display-none">Hello World!</span> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

شيفرة CSS:

.display-none {
  display: none;
}

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

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <p class="display-inline">Hello World!</p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

شيفرة CSS:

.display-none {
  display: inline;
}

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

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <b class="display-block">Hello World!</b> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

شيفرة CSS:

.display-block {
  display: block;
}

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

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <p class="display-inline-block">Hello World!</p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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>;

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

• مسودة 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.