خاصية order وإعادة الترتيب المرئي
غيّر الترتيب المرئي لعناصر Flex من دون تغيير DOM باستخدام الخاصية order
خاصية order وإعادة الترتيب المرئي درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
خاصية order
تغيّر خاصية order الترتيب المرئي لعناصر flex وGrid من دون تعديل بنية DOM. القيمة الافتراضية هي 0؛ وتظهر القيم الأعلى لاحقًا، بينما تظهر القيم السالبة في وقت مبكر.
أساسيات order
تُعرض العناصر من أقل قيمة order إلى أعلاها. وتظهر العناصر ذات قيمة order نفسها وفق ترتيبها في DOM.
<div class="nav">
<span class="nav-button">Button</span>
<span class="nav-logo">Logo</span>
<span class="nav-links">Links</span>
</div>
القيم السالبة لـ order
استخدم القيم السالبة لنقل عنصر قبل جميع العناصر ذات القيمة الافتراضية (order:0):
<div class="list">
<div>Item 1</div>
<div class="sticky-first">Sticky</div>
<div>Item 2</div>
</div>
إعادة الترتيب المتجاوب
غيّر الترتيب المرئي عند نقاط توقف مختلفة من دون تغيير HTML:
<div class="layout">
<main class="main-content">Main</main>
<aside class="sidebar">Sidebar</aside>
</div>
مهم: تحذير بشأن إمكانية الوصول
تغيّر order الترتيب المرئي فقط. وتتبع برامج قراءة الشاشة والتنقل باستخدام لوحة المفاتيح ترتيب DOM، لا الترتيب المرئي. لذلك من الضروري إعادة الترتيب مرئيًا مع إبقاء DOM بترتيب قراءة منطقي لضمان إمكانية الوصول.
عدم اتساق ترتيب التنقل بعلامة Tab
إذا أعدت ترتيب العناصر مرئيًا باستخدام order، فسيتبع التركيز باستخدام مفتاح Tab ترتيب DOM، وقد يختلف ذلك عن الترتيب المرئي. وينشئ هذا تنقلًا مربكًا لمستخدمي لوحة المفاتيح. استخدم إعادة الترتيب المرئي فقط عندما لا يؤدي إلى كسر التسلسل المنطقي.
حالات الاستخدام المشروعة الشائعة
تكون إعادة الترتيب المرئي مقبولة عندما:
- لا تكون العناصر جزءًا من تسلسل قابل للتنقل (ترتيب زخرفي)
- يتوافق الترتيب المرئي مع تدفق قراءة طبيعي يختلف عن ترتيب المصدر لأسباب تتعلق بتنظيم التعليمات البرمجية
order في Flexbox مقابل Grid
تعمل خاصية order بالطريقة نفسها في كل من Flexbox وCSS Grid. فهي تتحكم في الترتيب ضمن خوارزمية التخطيط، لا في DOM.
order مع Flex-wrap
عندما تلتف العناصر إلى أسطر جديدة، تحدّد order العناصر التي تظهر في كل سطر وتسلسلها ضمن ذلك السطر.
عكس ترتيب جميع العناصر
لعكس ترتيب جميع العناصر، استخدم flex-direction: row-reverse أو column-reverse بدلًا من تعيين قيم ترتيب سالبة لكل عنصر. فهذا أكثر دلالة وأبسط.
<div class="reversed-list">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
التحريك باستخدام order
لا يمكن تحريك تغييرات order في CSS. إذا احتجتم إلى إعادة ترتيب متحركة، فاستخدموا التحويلات أو التحريكات التي يتحكم فيها JavaScript، مثل Flip.js أو إضافة Flip في GSAP.
اختبار سريع
لماذا ينبغي استخدام الخاصية order لإعادة ترتيب روابط التنقل بحذر؟
مراجعة
تغيّر الخاصية order الموضع المرئي لعناصر Flexbox أو Grid دون تعديل HTML. القيمة الافتراضية هي 0؛ وتظهر القيم الأقل أولًا، والقيم الأعلى أخيرًا. استخدموها لإعادة الترتيب استجابةً لحجم الشاشة دون تغيير بنية DOM. واحرصوا دائمًا على التحقق من بقاء ترتيب التنقل باستخدام لوحة المفاتيح وترتيب قارئ الشاشة منطقيين عند استخدام إعادة الترتيب بواسطة order.
الأسئلة الشائعة
هل درس «خاصية order وإعادة الترتيب المرئي» مجاني؟
نعم — نص درس «خاصية order وإعادة الترتيب المرئي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «خاصية order وإعادة الترتيب المرئي»؟
غيّر الترتيب المرئي لعناصر Flex من دون تغيير DOM باستخدام الخاصية order تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «خاصية order وإعادة الترتيب المرئي»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تجاوز محاذاة عنصر Flex باستخدام align-self
- خاصية order وإعادة الترتيب المرئي
- أنماط الصيغة المختصرة لـ Flex
- تخطيطات Flexbox الشائعة: شريط التنقل والبطاقات والكائن الإعلامي