شرح المفهوم
اختبار CSS لا يعني كتابة أدوات معقدة على الفور. في هذه المرحلة، يعني تعلم كيفية التحقق من الأنماط بشكل متعمد بدلاً من التخمين. ستتدرب على التحقق من التخطيط في حالة طبيعية، ثم البحث عن الحالات الهامشية مثل النصوص الأطول، أو العروض الأضيق، أو الفئات المفقودة. يساعدك هذا الدرس على بناء عادة التحقق من السلوك المتوقع بعد كل تغيير في النمط، وهو أمر مهم بشكل خاص عندما يمكن للتتالي أو الوراثة أن يؤثر على أكثر من جزء واحد من الصفحة.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع قواعد الأنماط في محددات الفئات القابلة لإعادة الاستخدام.
- أضف منطق المعالجة في القسم الأوسط.
- اختتم بالمخرجات والتحقق السريع.
مرجع الأوامر
- اذكر النتائج المرئية الدقيقة التي تتوقعها قبل تغيير أي قاعدة.
- اختبر نفس المكون بنص قصير، ونص طويل، وعرض حاوية ضيق.
- بعد كل تغيير، تأكد مما إذا كان المكون لا يزال يحافظ على التباعد والتباين والتسلسل الهرمي المقروء.
- سجل نمطًا واحدًا تغير بشكل غير متوقع واشرح أي محدد أو قاعدة تتالي تسببت في ذلك.
دليل خطوة بخطوة
- طبّق الأنماط الأولية على كتلة HTML بسيطة وتأكد من المظهر الافتراضي أولاً.
- تحقق من حالة طبيعية واحدة، مثل رسالة قصيرة ذات عنوان واضح.
- أنشئ حالة هامشية واحدة، مثل جملة طويلة أو حاوية أصغر، وافحص النتيجة.
- غيّر قاعدة واحدة فقط، ثم قارن كلا الإصدارين جنبًا إلى جنب إن أمكن.
- اختتم بمراجعة سريعة لما بقي صحيحًا وما تعطل أثناء الاختبار.
تمارين تطبيقية
- اختبر مكون شارة (badge) بعلامات قصيرة جدًا وطويلة جدًا، ثم اضبط التباعد إذا لزم الأمر.
- أنشئ نمط تنبيه (alert) ثانيًا وتحقق من أن كل متغير يحافظ على تباين مقروء وتباعد واضح.
- أنشئ قائمة تحقق بسيطة للاختبار اليدوي للطباعة والتباعد والمحاذاة في مكون صغير.
تحديات برمجية
- صمم إعداد اختبار يكشف متى يؤثر محدد واسع النطاق عن طريق الخطأ على مكونات متعددة.
- ابحث عن خطأ في التخطيط ناتج عن الوراثة أو التتالي، ثم أصلحه دون إدخال خطأ جديد.
مهام تمرين صغيرة
- اكتب نتيجة متوقعة واحدة للحالة الطبيعية.
- أنشئ حالة هامشية واحدة بمحتوى أطول.
- لاحظ قاعدة تصميم واحدة كانت الأسهل للتحقق منها بصريًا.
خطأ شائع
Skipping input validation or mixing logic/output in one unstructured block.
تحدٍ مصغّر من الواقع
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.