CSS Academy · درس

القيم الاحتياطية وvar()

وفّر قيمًا احتياطية في var() عند كون الخاصية المخصّصة غير معرّفة أو غير صالحة

القيم الاحتياطية وvar() درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

صيغة القيمة الاحتياطية في var()

تقبل الدالة var() وسيطًا ثانيًا اختياريًا يمثل قيمة احتياطية، ويُستخدم عندما لا تكون الخاصية المخصصة معرّفة.

<button class="button">Fallback: royalblue</button>

متى تُطبَّق القيم الاحتياطية

تُستخدم القيمة الاحتياطية عندما:

لا تكون الخاصية معرّفة في النطاق
تكون قيمة الخاصية initial
تكون الخاصية قد عُرّفت بقيمة غير صالحة في سياقها

مستويات متعددة من القيم الاحتياطية

ضمّنوا استدعاءات var() داخل بعضها لربط عدة مستويات من القيم الاحتياطية:

<p class="text">Falls through two levels to #3b82f6</p>

يمكن أن تكون القيمة الاحتياطية أي قيمة

يمكن أن تكون القيم الاحتياطية أي قيمة صالحة للخاصية، بما في ذلك متغيرات أخرى أو قيم محسوبة أو قيم حرفية:

<div class="card">16px / 50%</div>

الكلمة المفتاحية initial

يؤدي ضبط خاصية مخصصة على initial إلى معاملتها كما لو لم يسبق ضبطها. وبدمج ذلك مع قيمة احتياطية، يمكن للمكوّنات إلغاء الاستفادة من خاصية مخصصة موروثة.

<div class="no-theme">
  <button class="button">Falls back to gray</button>
</div>

قيمة غير صالحة مضمونة

يُعد استخدام initial كقيمة لخاصية مخصصة أسلوبًا يضمن تشغيل القيمة الاحتياطية. ويمكن أن يؤدي ذلك إلى إنشاء أعلام ميزات اختيارية في CSS.

الخاصية المخصصة + @property

تسجّل قاعدة @property (Houdini) خاصية مخصصة ذات نوع محدد وقيمة ابتدائية مضمونة. وهذا أكثر موثوقية من الاعتماد على القيم الاحتياطية.

<div class="track">
  <div class="bar"></div>
</div>

قيمة احتياطية لقيم آمنة للتحريك

احرصوا على عمل الانتقالات حتى عندما لا تكون الخاصية المخصصة مضبوطة، وذلك بتوفير قيمة احتياطية آمنة يمكن الانتقال منها:

<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>

تصحيح أخطاء المتغيرات المفقودة

إذا كانت خاصية مخصصة مفقودة ولم تُوفَّر قيمة احتياطية، فستُقيَّم الخاصية إلى قيمتها الابتدائية (وغالبًا إلى الكلمة المفتاحية initial). وبالنسبة إلى الألوان، قد ينتج عن ذلك قيم شفافة أو سوداء غير متوقعة. أضيفوا دائمًا قيمًا احتياطية إلى الخصائص المهمة.

استخدام var() في الخصائص المخصصة

يمكن لقيم الخصائص المخصصة أن تشير هي نفسها إلى خصائص مخصصة أخرى، مما ينشئ سلسلة من الرموز:

<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>

القيم الاحتياطية وSpecificity

لا علاقة للقيم الاحتياطية بـ specificity؛ فهي تُطبَّق فقط عندما تكون الخاصية المخصصة المشار إليها غير معرّفة أو غير صالحة. تحدد specificity القاعدة التي تعيّن الخاصية المخصصة، وليس القيمة الاحتياطية التي تفوز.

تحقق سريع

ماذا يفعل color: var(--theme-text, #111) عندما لا تكون --theme-text معرّفة؟

مراجعة

توفر var(--name, fallback) قيمة احتياطية عندما لا تكون الخاصية المخصصة معرّفة. يمكن تداخل القيم الاحتياطية لتوفير مستويات متعددة. استخدم @property للخصائص المخصصة ذات النوع والقيم الابتدائية المضمونة. احرص دائمًا على توفير قيم احتياطية للخصائص المرئية المهمة.

الأسئلة الشائعة

هل درس «القيم الاحتياطية وvar()» مجاني؟

نعم — نص درس «القيم الاحتياطية وvar()» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «القيم الاحتياطية وvar()»؟

وفّر قيمًا احتياطية في var() عند كون الخاصية المخصّصة غير معرّفة أو غير صالحة تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «القيم الاحتياطية وvar()»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy