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