اختبار الوحدة: متجاوب ومتين · إتقان CSS الحديثة

خمسة أسئلة عن هذه الوحدة. أجب عنها كلها، ثم شاهد نتيجتك وسبب صحة كل إجابة أو خطئها.

يسأل مصمّم لماذا يستخدم عنوان الواجهة الرئيسية clamp(2rem, 1.2rem + 3vw, 3.5rem) لا clamp(32px, 3vw + 19px, 56px). ما أفضل جواب؟

نسخة الـ rem تتدرّج مع حجم الخط الافتراضي لدى المستخدم ومع التكبير؛ أما نسخة الـ px فتقفل المدى على إعدادات المصمّم.
نسخة الـ px لا تعمل في Safari.
الـ rem تُرسم أسرع من الـ px.
لا يمكنك جمع px وvw داخل clamp().

زر إغلاق موضوع بـ inset-inline-end: 8px. والصفحة dir="rtl". إلى أيّ خاصية فيزيائية تُترجَم؟

left: 8px
right: 8px
top: 8px
لا أثر لها في RTL.

أيّ تصريح يعطي الزر المعطّل لونًا رماديًا بالإضاءة المُدرَكة نفسها التي للون العلامة التجارية؟

background: hsl(from var(--brand) h 0% l);
background: oklch(from var(--brand) l 0 h);
background: color-mix(in srgb, var(--brand), grey);
filter: grayscale(1);

الصفحة في الوضع الداكن، لكن لوحة «معاينة الطباعة» داخلها يجب أن تُرسم بالقيم الفاتحة لكل tokens light-dark(). ماذا تضبط على اللوحة؟

@media (prefers-color-scheme: light) حول قواعد اللوحة.
data-theme="light" على اللوحة.
color-scheme: light;
filter: invert(1);

تضيف Waypoint شريط «إعدادات ملفات تعريف الارتباط» ثابتًا ارتفاعه 56px أسفل الـ viewport. يبلّغ مستخدمو لوحة المفاتيح أن الرابط الذي عليه الـ focus يختبئ أحيانًا خلفه. أيّ إصلاح يعالج معيار Focus Not Obscured في WCAG؟

:focus-visible { outline-offset: 56px; }
.cookie-bar { opacity: 0.9; }
body { padding-top: 56px; }
html { scroll-padding-bottom: 56px; }

5 أسئلة بلا إجابة