في هذا الدرس 6تصفّح المواضيع
تعني الأنماط الديناميكية الخالصة في لغة CSS بناء قواعد تنسيق تعيد حساب الأبعاد والألوان والظلال والحركة تلقائياً في اللحظة نفسها دون الاعتماد على أي كود برمجي خارجي. فبدلاً من كتابة قيم ثابتة جامدة لكل شاشة ولكل تفاعل، تربط المتغيرات المخصصة المستدعاة عبر var(--token) بالدوال الرياضية والحالات التفاعلية واستعلامات البيئة لتتكيف الواجهة ذاتياً.
ترتكز هذه المنظومة على ثلاث دعائم متكاملة تعمل معاً بانسجام: تعريف رموز التصميم المركزية داخل :root أو أصناف المكونات، وإجراء الحسابات الحية عبر calc() وclamp()، وتحديث القيم لحظياً عند تفاعل المستخدم بحالات :hover و:focus و:active واستعلامات @media و@supports.
يحول دمج دالة calc() مع المتغيرات المخصصة الأرقام المنفصلة إلى مقياس تصميم مترابط النسب. فعند تخزين وحدة أساسية مثل --unit: 8px ومعامل ضرب مجرد من الوحدة مثل --scale: 1، يمكنك اشتقاق الحشوات والفجوات وانحناءات الزوايا تلقائياً عبر صيغة مثل padding: calc(var(--unit) * 2.5 * var(--scale)).
انتبه لقاعدة جوهرية عند الضرب أو القسمة داخل calc(): اجعل معاملات التكبير أرقاماً مجردة بلا وحدة مثل 1.25 واترك وحدة القياس مثل px أو rem في المتغير الأساسي، أو اضرب الرقم المجرد في 1px لتحويله إلى طول صالح، كما يمكنك توليد لوحة ألوان متناسقة عبر hsl() بتغيير متغير درجة لون واحد --hue.
:root {
--unit: 8px;
--hue: 262;
}
.metric-card {
padding: calc(var(--unit) * 2.5);
border-radius: calc(var(--unit) * 1.75);
background-color: hsl(var(--hue), 70%, 97%);
border: 2px solid hsl(var(--hue), 55%, 52%);
}بدلاً من القفز المفاجئ في الأحجام عبر عدة نقاط توقف في @media، يتيح دمج المتغيرات المخصصة مع دوال min() وmax() ودالة الحصر clamp(min, preferred, max) بناء خطوط وحشوات انسيابية تتدرج بنعومة تامة. فعند تخزين الحد الأدنى والأقصى في متغيرات مثل --title-min: 1.35rem و--title-max: 2.25rem، تتدرج القيمة تلقائياً بين الهاتف والشاشات العريضة.
احرص دائماً على مزج وحدة خط نسبية مثل rem مع وحدة عرض المنفذ vw في المعادلة الوسطى مثل 1rem + 2.2vw بدلاً من الاعتماد على vw وحدها، وذلك لضمان استجابة النص لتكبير المتصفح لدى المستخدمين.
:root {
--pad-fluid: clamp(14px, 3vw, 32px);
--heading-fluid: clamp(1.25rem, 1rem + 2vw, 2.1rem);
}
.hero-panel {
width: min(100%, 640px);
padding: var(--pad-fluid);
}
.hero-heading {
font-size: var(--heading-fluid);
}Interactive Pure CSS Dynamic Tokens Labمختبر الأنماط الديناميكية والمتغيرات الحية
تصبح الأزرار والروابط التفاعلية أسهل بكثير في الصيانة عندما تقتصر الحالات التفاعلية على تحديث المتغيرات بدلاً من إعادة كتابة الخصائص الطويلة. ففي الصنف الأساسي .action-btn تربط transform: translateY(var(--btn-y)) ولون الخلفية var(--btn-bg) والظل ومؤشر اليد cursor: pointer مع انتقال سلس عبر transition.
وبعد ذلك تكتفي حالات :link و:visited و:hover و:focus و:active بتغيير قيمة المتغير فقط؛ فيرتفع الزر بمقدار -2px عند التمرير، ويظهر إطار تركيز واضح عبر outline للوحة المفاتيح، ويهبط إلى 1px لحظة الضغط الفعلي لإعطاء إحساس ملموس بالاستجابة.
.action-btn {
--btn-bg: #6d44a8;
--btn-y: 0px;
background-color: var(--btn-bg);
transform: translateY(var(--btn-y));
transition: transform 0.2s ease, background-color 0.2s ease;
}
.action-btn:hover { --btn-bg: #58338f; --btn-y: -2px; }
.action-btn:active { --btn-y: 1px; }تجمع أنماط CSS الدفاعية بين شبكتي أمان أساسيتين: تمرير قيمة احتياطية مباشرة داخل var(--surface, #ffffff) تحسباً لعدم تعريف المتغير، واستخدام قاعدة فحص الميزات @supports للتأكد من دعم المتصفح للصيغ المتقدمة. اكتب دائماً لون خلفية واضحاً ومسافات مقروءة أولاً، ثم أضف التحسينات الديناميكية داخل كتلة @supports (padding: clamp(12px, 3vw, 24px)).
وبنفس الأهمية في الواجهات الحركية، احترم تفضيلات تقليل الحركة لدى المستخدمين عبر استعلام @media (prefers-reduced-motion: reduce) بتصفير متغير الإزاحة --lift: 0px وتقليص زمن الانتقالات لضمان تجربة قراءة مريحة للجميع.
يلخص الجدول المرجعي التالي أهم أنماط دمج المتغيرات المخصصة مع الدوال الرياضية والحالات التفاعلية واستعلامات البيئة لبناء واجهات مرنة وسهلة الصيانة:
| النمط الديناميكي | الصيغة الأساسية | الفائدة العملية |
|---|---|---|
| المقياس التناسبي | 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 لاستهداف العناصر بدقة عبر علاقات الأب والابن والأشقاء في شجرة المستند.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 State-Driven Custom Tokens رموز الحالة الديناميكية
- متغيرات CSS مخصصة تتحدث قيمتها داخل حالات التفاعل مثل التمرير أو الضغط لتتحدث معها الخصائص المرتبطة تلقائياً.
- للمراجعة
- 02 Fluid Clamping Expression تعبير الحصر الانسيابي
- توظيف دالة الحصر بين حد أدنى وقيمة مرنة وحد أقصى لتدرج الأحجام بنعومة بين الشاشات دون قفزات مفاجئة.
- للمراجعة
- 03 Computed Value Evaluation التقييم وقت القيمة المحسوبة
- مرحلة المعالجة في المتصفح التي تُستبدل فيها المتغيرات وتُحسَب المعادلات الرياضية لإنتاج أطوال وألوان نهائية.
- للمراجعة
- 04 Feature Query Progressive Enhancement التحسين التدريجي بفحص الميزات
- كتابة تنسيق أساسي واضح ومقروء أولاً ثم تغليف الميزات الحديثة داخل قاعدة @supports للمتصفحات الداعمة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- لغة الأنماط المتعاقبة القادرة على إدارة التخطيطات المرنة والمعادلات الرياضية والانتقالات التفاعلية.
- للمراجعة
- 02 HSL HSL
- Hue, Saturation, Lightness
- نموذج لوني مثالي للسمات الديناميكية لأن تغيير متغير درجة اللون وحده يولّد درجات متناسقة.
- للمراجعة
- 03 VW VW
- Viewport Width Unit
- وحدة طول نسبية تعادل 1 بالمئة من عرض منفذ العرض وتُدمج مع rem لبناء مقاييس انسيابية قابلة للتكبير.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
عرّف المتغير --unit بقيمة 10px في :root واحسب الحشوة وتدوير الزوايا في الصنف .metric-card عبر معاملات دالة calc.
-
اربط المتغيرين --btn-y و --btn-bg بالصنف .action-btn مع خاصية transition ثم حدّث قيمتهما عند التمرير والضغط.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.