order

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

النحو

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

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

القيم

<integer>

تمثل المجموعة المرتبة ليستخدمه العنصر

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

<integer>

مثال

هنا مثال اساسي ل 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) المرئي مهم, اذاً لن يكون لمستخدمي قارئ الشاشة وصصول لقراءة الترتيب الصحيح.

• Flexbox & the keyboard navigation disconnect — Tink
• Source Order Matters | Adrian Roselli
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0

مواصفات

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

انظر ايضا

• CSS Flexbox Guide: Basic Concepts of Flexbox
• CSS Flexbox Guide: Ordering flex items
• CSS Grid Guide: CSS Grid Layout and accessibility