order

order عبارة عن خاصية CSS تضع الترتيب كقالب مرن او شبكة. العناصر في القالب تخزن بشكل تصاعدي القيمة و من ثم حسب ترتيب الكود المصدري.

النحو

/* <integer> values */
order: 5;
order: -5;

/* Global values */
order: inherit;
order: initial;
order: unset;

Note: order is only meant to affect the visual order of elements and not their logical or tab order. order must not be used on non-visual media such as speech.

القيم

<integer> (en-US)
تمثل المجموعة المرتبة ليستخدمه العنصر

الصيغة النحوية

<integer> (en-US)

مثال

هنا مثال اساسي ل html chunk:

<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>...</footer>

كود الcss التالي ينشأ زوجي sidebar كلاسيكي  الشكل  محيط بمحتوى الblock.نموذج تصميم الصندوق المرن يشكل blocks متساوي الحجم بشكل عمودي و يستخدم مساحة افقية حسب الامكانية.

main { display: flex;  text-align:center; }
main > article { flex:1;        order: 2; }
main > nav     { width: 200px;  order: 1; }
main > aside   { width: 200px;  order: 3; }

النتيجة

هواجز الوصول

استخدام خاصية الorder سينشأ فصل اتصال بين العرض المرئي للمحتوى  و ترتيب ال DOM. هذا سيؤثر عكسيا على تجربة المستخدمين ذي الرؤية المنخفضة للتصفح مع مساعدة التقنيات المساعدة مثل قارئ الشاشة. اذا كان ترتيب ال(CSS) المرئي مهم, اذاً لن يكون لمستخدمي قارئ الشاشة وصصول لقراءة الترتيب الصحيح.

مواصفات

المواصفة الحالة التعليق
CSS Flexible Box Layout Module
The definition of 'order' in that specification.		 Candidate Recommendation Initial definition

Initial value (en-US)0
Applies toFlex items, grid items, and absolutely-positioned flex and grid container children
Inherited (en-US)no
Computed value (en-US)as specified
Animation typean integer

ملائمة المتصفح

BCD tables only load in the browser

انظر ايضا