الدرس 7 من 8
هياكل التحميل
- 14 دقيقة
- 6 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
مكان المحتوى قبل وصوله
الشرح
الشاشة الفارغة أثناء التحميل تبدو عطلًا، والدوّامة وحدها لا تقول ما القادم. الهيكل كتل رمادية بشكل المحتوى المنتظر ومقاساته: يعرف المستخدم ما سيظهر وأين، ولا تقفز الصفحة حين يصل.
ووميض خفيف يعبر الكتل يقول «ما زال يعمل». يُرسم على ::after: طبقة بتدرّج تتحرّك بـ transform من خارج الكتلة إلى خارجها من الجهة الأخرى، والكتلة بـ position: relative وoverflow: hidden تحصره داخلها. وحركة لا تتوقّف هي أول ما يُطفأ لمن طلب تقليل الحركة.
الفخّ الشائع تحريك background-position بدل ذلك: يعمل، لكنه يعيد رسم الكتل في كل إطار، وtransform لا يعيده.
المطلوب
أعطِ .skeleton خلفية رمادية وposition: relative وoverflow: hidden، وارسم على .skeleton::after تدرّجًا تحرّكه @keyframes على transform بلا توقّف، وأطفئ الحركة داخل @media (prefers-reduced-motion: reduce).
معايير التصحيح
6 معايير- الكتل الثلاث ظاهرة بلون محايد
- كل كتلة تحصر ما يتحرّك داخلها
- على كل كتلة وميض متحرّك في ::after
- الوميض يتحرّك بـ transform لا بما يعيد الرسم
- الوميض يتكرّر بلا توقّف
- ويتوقّف لمن طلب تقليل الحركة