اختبار الوحدة: الحركة والمعمارية

السؤال 1 من 5

• translate وopacity
• width وheight
• top وleft
• background-color وbox-shadow

السؤال 2 من 5

• اضبط position: fixed على الرأس.
• اضبط z-index: 1000 على الرأس.
• أعطِ الرأس view-transition-name: header واضبط animation: none على ::view-transition-group(header).
• أضف will-change: transform إلى الرأس.

السؤال 3 من 5

• scroll(root) تقيس الـ viewport لا المستند.
• نمط التعبئة both يجعل الشريط يقفز إلى الأمام.
• خطوط زمن التمرير تعمل دائمًا بسرعة مضاعفة في المنتصف.
• منحنى التوقيت ease يربط تقدّم التمرير بشكل غير خطي؛ استخدم linear ليتتبّع الشريط مسافة التمرير بدقّة.

السؤال 4 من 5

• استخدم margin-top بدلًا منها، من أجل المتصفّحات الأقدم.
• أضف !important لتصمد الـ margin في التخطيطات الأخرى.
• انقل الـ margin إلى layer الـ utilities.
• أعطِ تخطيط الشريط الجانبي display: grid (أو flex) مع gap، وأبقِ البطاقة خالية من الـ margins الخارجية.

السؤال 5 من 5

• يقفز شريط التمرير كلما رُسمت الأقسام، لأن الأقسام المتخطّاة لا ارتفاع لها حتى يُحسب تخطيطها.
• تختفي الأقسام الواقعة خارج الشاشة من نتائج البحث داخل الصفحة.
• لا يتغيّر شيء، لأن content-visibility لا تعمل إلا مع JavaScript.
• يُرسم كل قسم مرتين، فتبطؤ الصفحة.