الخاصية display

من موسوعة حسوب
< CSS

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

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

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

القيمة الابتدائية 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.
مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/display&oldid=32394»