في هذا الدرس 5تصفّح المواضيع
جميع خصائص التخطيط المرن التي درسناها سابقاً كانت تُكتب على الحاوية الأب، أما خاصية order فهي أول خاصية نطبقها مباشرةً على العنصر المرن الابن نفسه. افتراضياً تظهر العناصر على المحور الرئيسي بنفس تسلسل كتابتها في مستند HTML لأن القيمة الابتدائية لكل عنصر هي order: 0.
عند إسناد أرقام صحيحة مخصصة لخاصية order، يرتب المتصفح العناصر تصاعدياً من الرقم الأصغر إلى الأكبر بدءاً من القيم السالبة، مروراً بالصفر، وصولاً إلى القيم الموجبة. وإذا اشترك عنصران في نفس الرقم فيُحسم التعادل بينهما وفق ترتيبهما الأصلي في الكود المصدري.
يؤدي منح أحد الأبناء عدداً صحيحاً موجباً مثل order: 1 أو order: 2 إلى دفعه نحو نهاية المحور الرئيسي. قد يتساءل المبتدئ لماذا نقلت القيمة 1 العنصر إلى المؤخرة بدلاً من المقدمة؟ الجواب البسيط أن بقية أقرانه لم تُعدَّل فاحتفظت بقيمتها الافتراضية 0، والصفر يسبق الواحد حسابياً.
تأمل المخطط البصري والمثال القابل للتشغيل أدناه، حيث انتقل العنصر الأول في الكود إلى آخر الصف فور إعطائه order: 1:
افترض أنك تريد إبراز باقة اشتراك مميزة أو بطاقة تنبيه لتظهر في مقدمة السطر قبل جميع أقرانها دون أن تضطر لترقيم بقية البطاقات يدوياً. يكفي إعطاء تلك البطاقة وحدها قيمة سالبة مثل order: -1 لتسبق جميع العناصر الافتراضية ذات القيمة 0 فوراً.
جرّب التقديم بالسالب والتأخير بالموجب عملياً في المختبر التفاعلي والمثال القابل للتشغيل أدناه:
قاعدة وصول جوهرية: تغيّر خاصية order الرسم البصري على الشاشة فقط ولا تعيد ترتيب شجرة DOM نهائياً؛ لذلك يظل تنقل لوحة المفاتيح عبر زر Tab ونطق قارئات الشاشة مرتبطين بترتيب كتابة الوسوم داخل HTML الأصلي.
إذا بعثرت ترتيب الأزرار التفاعلية أو حقول النماذج بصرياً عبر order، فسيقفر مؤشر التركيز عشوائياً ذهاباً وإياباً أمام مستخدمي لوحة المفاتيح. عندما تحتاج لتغيير التسلسل المنطقي الفعلي، عدّل ترتيب العناصر في HTML نفسه. جرّب فتح المثال التالي واضغط مفتاح Tab لتعاين بنفسك بقاء التركيز على ترتيب المصدر:
.step-early {
order: -1;
}
.step-late {
order: 2;
}
.nav-step:focus {
background-color: #dc143c;
}داخل أدوات المطور DevTools افتح تبويب Layout وفعّل خيار إظهار أرقام الترتيب مع شارة flex ليرسم المتصفح أرقاماً إرشادية مباشرة فوق كل عنصر مرن تسهّل عليك مراجعة الترتيب. لخّص القواعد الأساسية من الجدول التالي:
القيمة المسندة في order | الموضع البصري على المحور | قاعدة كسر التعادل | تأثيرها على مفتاح Tab |
|---|---|---|---|
سالبة مثل -2 و -1 | تتقدم قبل جميع العناصر الافتراضية | تتبع تسلسل HTML الأصلي | لا يتغير بل يتبع شجرة DOM |
افتراضية 0 | الموضع الابتدائي لكل عنصر غير معدّل | تتبع تسلسل HTML الأصلي | يطابق الترتيب البصري بانسجام تام |
موجبة مثل 1 و 2 | تتأخر بعد جميع العناصر الصفرية | تتبع تسلسل HTML الأصلي | لا يتغير بل يتبع شجرة DOM |
عشرية مثل 1.5 | قيمة خاطئة نحوياً يتجاهلها المتصفح | يبقى العنصر على قيمته الصحيحة السابقة | لا يتغير |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس كيفية فرز الأبناء بصرياً عبر خاصية order من الأعداد السالبة مروراً بالقيمة الابتدائية 0 وحتى الأعداد الموجبة، مع الحفاظ على سلامة وصول لوحة المفاتيح Tab وقارئات الشاشة. في الخطوة التالية ننتقل إلى درس خاصية flex-basis مع Flexbox في لغة CSS لتحديد الحجم الابتدائي المثالي للعنصر المرن قبل التمدد أو الانكماش.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Visual Painting Order ترتيب الرسم البصري
- التسلسل المرئي لظهور العناصر المرنة على الشاشة بعد فرزها تصاعدياً حسب قيم خاصية order.
- للمراجعة
- 02 Source Order Tie-Breaking حسم التعادل بترتيب المصدر
- اعتماد المتصفح على أسبقية كتابة الوسوم داخل ملف HTML عند اشتراك عنصرين مرنين في نفس رقم order.
- للمراجعة
- 03 Focus Order Mismatch تعارض مسار التركيز البصري
- مشكلة وصول تنشأ حين تبعثر خاصية order مواقع الأزرار بصرياً فتخالف مسار التنقل المنطقي لمفتاح Tab.
- للمراجعة
- 04 Negative Order Promotion التقديم بالقيمة السالبة
- إعطاء عنصر مرن قيمة سالبة مثل order: -1 ليتصدر العرض البصري قبل جميع أقرانه المحتفظين بالقيمة الافتراضية 0.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DOM DOM
- Document Object Model
- شجرة عناصر المستند التي تحكم مسار مفتاح Tab ونطق قارئات الشاشة دون أن تتأثر بخاصية order البصرية.
- للمراجعة
- 02 WCAG WCAG
- Web Content Accessibility Guidelines
- إرشادات الوصول العالمية لمحتوى الويب التي تشترط انسجام مسار التركيز مع الترتيب المنطقي المفهوم.
- للمراجعة
- 03 CSS CSS
- Cascading Style Sheets
- لغة الأنماط التي تتيح تعديل الترتيب البصري للعناصر المرنة دون المساس ببنية HTML.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح محرر الباقة المميزة وغيّر قيمة order في الصنف .plan-featured من -1 إلى 0 ثم إلى 1 لملاحظة انتقال البطاقة من البداية إلى النهاية.
-
شغّل مثال اختبار لوحة المفاتيح، انقر داخل نافذة المعاينة واضغط مفتاح Tab ثلاث مرات للتأكد من أن التركيز يتبع تسلسل HTML الأصلي وليس الموضع البصري.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.