شرح صفوف ومحتوى الفقرة
يلخص الجدول المرجعي التالي أهم أنماط دمج المتغيرات المخصصة مع الدوال الرياضية والحالات التفاعلية واستعلامات البيئة لبناء واجهات مرنة وسهلة الصيانة:
| النمط الديناميكي | الصيغة الأساسية | الفائدة العملية |
|---|---|---|
| المقياس التناسبي | calc(var(--unit) * 2) | تحديث المسافات والزوايا معاً انطلاقاً من متغير أساسي واحد |
| التحجيم الانسيابي | clamp(var(--min), 1rem + 2vw, var(--max)) | تدرج ناعم للأحجام بين الشاشات مع احترام تكبير المتصفح |
| تحديث رموز الحالة | .btn:hover { --lift: -2px; } | انتقالات تفاعلية نظيفة دون تكرار كتابة خصائص المكون |
| فحص دعم الميزات | @supports (padding: clamp(8px, 2vw, 20px)) | تحسين تدريجي آمن يحفظ وضوح التصميم الأساسي في كل متصفح |
| مراعاة تقليل الحركة | @media (prefers-reduced-motion: reduce) | تهدئة متغيرات الحركة تلقائياً لراحة القارئ |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس تعلمت كيف تدمج المتغيرات المخصصة مع الدوال الرياضية الانسيابية والحالات التفاعلية وبدائل التوافق لبناء واجهات ذكية بصفر كود برمجي. وفي الخطوة التالية سنفتتح فصل المحددات المتقدمة بدرس تحديد العناصر بالعلاقات في لغة CSS لاستهداف العناصر بدقة عبر علاقات الأب والابن والأشقاء في شجرة المستند.