الخاصية display
الخاصية display في CSS تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر. تؤخذ قيمة الخاصية display في HTML من مواصفة HTML أو من صفحة الأنماط الافتراضية في المتصفح أو التابعة للمستخدم، أما القيمة الافتراضية لها في XML هي inline.
بطاقة الخاصية
| القيمة الابتدائية | 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-none {
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-table
|
القيمة inline-table ليس لها مكافئ مباشر في HTML، فهي تسلك سلوك الجداول <table> في HTML لكن في صناديق سطرية، بدلًا من استخدام صناديق كتلية.
هذه القيمة مكافئة لاستخدام |
inline-flex
|
سيسلك العنصر سلوك عنصر سطري لكنه يُنسِّق محتوياته وفق نموذج flexbox.
هذه القيمة مكافئة لاستخدام |
inline-grid
|
سيسلك العنصر سلوك عنصر سطري لكنه يُنسِّق محتوياته وفق نموذج grid. |
البنية الرسمية
display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>;
انظر أيضًا
صفحة الخاصية position التي تصف كيفية تموضع العنصر في المستند.
صفحة الخاصية float التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.
مصادر ومواصفات
- مسودة 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.