إتقان CSS الحديثة
اكتب CSS تستطيع توقّع نتيجتها: الـ cascade والتخطيط الحديث والألوان والحركة، مشروحة من جهة المتصفّح.
- 4.7 (1,052 تقييمًا)
- 9,300 متعلّم
- متوسط
- 5 س 50 د إجمالًا
- حُدّثت في يونيو 2026
ما ستتعلّمه
- توقّع أيّ تصريح سيفوز، والتحكّم في ذلك باستخدام @layer
- بناء components باستخدام الـ custom properties والـ nesting و:has()
- تخطيط الصفحات باستخدام flexbox وgrid والـ subgrid والتحجيم الذاتي
- جعل الـ components تستجيب لحاويتها لا للـ viewport
- إطلاق ثيمات مرنة تدعم RTL وسهلة الوصول باستخدام oklch() وlight-dark()
- التحريك باستخدام الـ view transitions وخطوط زمن التمرير، بتكلفة قليلة وبلطف مع المستخدم
لمن هذه الدورة
معظم الإحباط من CSS سببه التخمين. هذه الدورة تستبدل التخمين بالقواعد التي يتّبعها المتصفّح فعلًا: كيف يختار الـ cascade القاعدة الفائزة، ولماذا يرفض عنصر flex أن يتقلّص، وما الذي يقيسه الـ container query، وأيّ الحركات تكلّف إطارًا كاملًا. ستتعلّم أدوات 2026 (الـ layers والـ nesting و:has() والـ subgrid والـ container queries وoklch() والـ view transitions)، ومتى تستحق كل أداة مكانها.
ستحسّن صفحة حقيقية واحدة على طول الدورة: جدول مؤتمر Waypoint Conf 2026، ببطاقات الجلسات وشبكة المتحدّثين وفلاتر المسارات ودعم الكتابة من اليمين إلى اليسار والوضع الداكن. تنتهي أغلب الدروس بتمرين عملي يُفحص في متصفّح حقيقي، وكل ادّعاء عن دعم المتصفّحات مُطابَق مع Baseline حتى تعرف ما يمكنك إطلاقه اليوم.
- لمن هذه الدورة
- المطوّرون الذين يكتبون CSS كل أسبوع ويريدون التوقّف عن مصارعتها، من المتحوّلين إلى البرمجة إلى المطوّرين المبتدئين الذين يسدّون الثغرات.
- قبل أن تبدأ
- الارتياح مع HTML وأساسيات CSS (الـ selectors ونموذج الصندوق وأساسيات flexbox)، والقدرة على قراءة قليل من JavaScript.
تدريب عملي
- عدّل HTML وCSS وJavaScript وشاهد النتيجة فورًا.
محتوى الدورة
4 وحدات · 20 درسًا · 5 س 50 د إجمالًا
- كيف يختار المتصفّح القاعدة الفائزة14 دقيقة
- الـ Specificity و:is() و:where()17 دقيقة
- طبقات الـ Cascade باستخدام @layer18 دقيقة
- الـ Custom Properties و@property18 دقيقة
- الـ Nesting الأصلي و:has()18 دقيقة
- اختبار الوحدة5 أسئلة
- Flexbox بالتفصيل18 دقيقة
- Grid: المناطق وauto-fit وminmax()18 دقيقة
- الـ Subgrid لبطاقات متحاذية17 دقيقة
- التحجيم الذاتي: min() وmax() وclamp()17 دقيقة
- الـ Container Queries20 دقيقة
- اختبار الوحدة5 أسئلة
- خطوط ومسافات مرنة17 دقيقة
- الخصائص المنطقية والكتابة من اليمين إلى اليسار17 دقيقة
- الألوان الحديثة: oklch() وcolor-mix()19 دقيقة
- الفاتح والداكن باستخدام light-dark()17 دقيقة
- أنماط focus تؤدي عملها15 دقيقة
- اختبار الوحدة5 أسئلة
- الـ Transitions والـ Keyframes وتقليل الحركة18 دقيقة
- الـ View Transitions18 دقيقة
- الحركات المرتبطة بالتمرير17 دقيقة
- معمارية CSS على نطاق واسع19 دقيقة
- أداء الرسم في المتصفّح18 دقيقة
- اختبار الوحدة5 أسئلة
مدرّبك
صوفيا رييس
مصمّمة منتجات رئيسية · Northwind
- تقييم المدرّب 4.8
- 25,900 متعلّم
- 3 دورات
درست صوفيا التصميم الجرافيكي، ثم علّمت نفسها CSS لتتوقف عن الجدال مع المهندسين حول البكسلات، ومنذ ذلك الحين تعمل على طرفَي التسليم معًا. في Northwind تقود نظام التصميم الذي تقوم عليه 11 منتجًا، من مكتبة Figma حتى الـ tokens التي تصل إلى الكود في CSS.
ماذا يقول المتعلّمون
4.7
1,052 تقييم
Lucas Moreau
قبل 8 أشهر
كانت الـ cascade layers هي القطعة الناقصة عندي. نقلت ملف الـ reset وأنماط المكتبات الخارجية والـ components إلى @layer، وتوقفت عن كتابة !important تقريبًا بين ليلة وضحاها.
Nour Hamdan
قبل 4 أشهر
درس الخصائص المنطقية (logical properties) أول محتوى CSS أراه يتعامل مع الكتابة من اليمين إلى اليسار كأمر طبيعي لا كفكرة لاحقة. صار تخطيط موقعنا العربي ينقلب بخاصية dir واحدة.
Ana Ribeiro
قبل 3 أسابيع
صارت الـ container queries والـ subgrid مفهومة أخيرًا، وصفحة جدول المؤتمر مشروع مناسب تواصل تحسينه طوال الدورة. كنت أريد وقتًا أطول للـ scroll-driven animations؛ ذلك الدرس بدا مستعجلًا.