الاختبار النهائي

السؤال 1 من 12

<p style="color: red">Doors open at 08:30</p>

p { color: blue !important; }

• red، لأن الأنماط المضمّنة تفوز دائمًا.
• red، لأنها أدقّ تحديدًا.
• blue، لأن قواعد ملف الأنماط تُحمَّل بعد الأنماط المضمّنة.
• blue، لأن التصريح المهمّ يتغلّب على النمط المضمّن العادي.

السؤال 2 من 12

@layer reset, components;
@layer reset { [hidden] { display: none !important; } }
@layer components { .card { display: grid !important; } }

• none، لأن التصريحات المهمّة في الـ layers الأسبق تفوز.
• grid، لأن components هي الـ layer اللاحقة.
• grid، لأن الـ class يتغلّب على selector السمة.
• القيمة الافتراضية للعنصر في المتصفّح.

السؤال 3 من 12

• اللون الموروث، لأن التصريح غير صالح.
• black، القيمة الابتدائية لـ color.
• teal
• سلسلة فارغة، فيصبح النص شفافًا.

السؤال 4 من 12

• grid-template-columns: repeat(2, auto)
• grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) مع overflow-x: auto على كتلة الكود.
• white-space: nowrap على كتلة الكود.
• grid-auto-flow: column

السؤال 5 من 12

• 4% من الحجم الأفقي للـ viewport الصغير، وهو البديل الاحتياطي لوحدات الحاوية.
• صفر، فيستقرّ حجم الخط عند الحدّ الأدنى 1rem.
• عرض العنصر الأب.
• التصريح غير صالح ويُتجاهل.

السؤال 6 من 12

• margin-inline-start: auto;
• text-align: center;
• inset-inline: 0;
• margin-inline: auto;

السؤال 7 من 12

• لون العلامة التجارية بعتامة 20%.
• لون العلامة التجارية بعتامة 80%.
• رمادي، لأن المزج مع transparent يزيل التشبّع.
• قيمة غير صالحة، لأن transparent لا يمكن مزجه.

السؤال 8 من 12

• tokens داكنة لـ --select-bg و--scrollbar-bg.
• media query prefers-color-scheme حول الـ tokens.
• appearance: none على كل عنصر تحكّم.
• تصريح color-scheme يتضمّن dark، ليرسم المتصفّح واجهته الخاصة بالوضع الداكن.

السؤال 9 من 12

• نعم. يجب أن تظهر الحلقة لكل مستخدم مع كل focus.
• لا. :focus-visible تستخدم قواعد المتصفّح التقديرية لتُظهر المؤشّر مع focus لوحة المفاتيح لا بعد نقرة فأرة على زر.
• نعم. الـ focus البرمجي مطلوب لمستخدمي الفأرة.
• لا، لكن فقط لأن الزر بلا outline في ملف إعادة الضبط.

السؤال 10 من 12

• زِد مدة الـ transition.
• أضف @starting-style { dialog[open] { opacity: 0; } } ليكون لأول نمط قيمة بداية.
• استخدم animation-delay بدل الـ transition.
• اضبط will-change: opacity على نافذة الحوار.

السؤال 11 من 12

• البطاقات ظاهرة بالكامل، بلا حركة ظهور تدريجي.
• بطاقات غير مرئية، لأن الظهور التدريجي يبدأ من opacity صفر.
• ظهورًا تدريجيًا زمنيًا عند تحميل الصفحة.
• طبقة خطأ يعرضها المتصفّح.

السؤال 12 من 12

• أضف will-change: box-shadow إلى كل بطاقة.
• قلّل مدة الـ transition إلى 50ms.
• ضع الظلّ الأكبر على pseudo-element ::after وحرّك الـ opacity الخاصة به بدلًا من ذلك.
• استخدم filter: drop-shadow() بدلًا منها.