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;
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)- تمثل المجموعة المرتبة ليستخدمه العنصر
الصيغة النحوية
مثال
هنا مثال اساسي ل 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 to | Flex items, grid items, and absolutely-positioned flex and grid container children |
Inherited (en-US) | no |
Computed value (en-US) | as specified |
Animation type | an integer |
ملائمة المتصفح
BCD tables only load in the browser
انظر ايضا
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Ordering flex items
- CSS Grid Guide: CSS Grid Layout and accessibility