الدرس 7 من 8
صنف واحد
- 13 دقيقة
- 5 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
كتابة واحدة بدل مئة وخمسين
01
الشرح
تغيير شكل خمسين بطاقة بـ card.style في حلقة يعني مئة وخمسين كتابة في كل ضغطة، ونمطًا مضمّنًا على كل بطاقة لا تتجاوزه قواعد الـ CSS إلا بـ !important.
صنف واحد على الحاوية يفعل الشيء نفسه بكتابة واحدة: يعيد المتصفح حساب أنماط الشجرة مرّة، ويبقى الشكل في الـ CSS حيث تصل إليه الانتقالات والاستعلامات والوضع الداكن.
الفخّ: خلط القراءة بالكتابة في حلقة. قراءة offsetHeight بعد كل كتابة تُجبر المتصفح على حساب التخطيط فورًا في كل دورة. اقرأ كل شيء أولًا ثم اكتب كل شيء — أو اكتب مرّة واحدة كما هنا.
02
المطلوب
انقل الأنماط إلى قاعدة #list.compact .card، واجعل الزرّ #compact يبدّل الصنف compact على #list وحدها بلا لمس البطاقات، ويحدّث aria-pressed.
معايير التصحيح
5 معايير- الضغطة تكتب في القائمة وحدها لا في البطاقات
- كل ضغطة تبدّل الصنف compact على القائمة
- الصنف يصغّر حشوة البطاقات من الـ CSS
- لا أنماط مضمّنة على البطاقات
- aria-pressed يتبع الحالة