القيمة الاحتياطية في var: لماذا لا تصلح متغير CSS غير المناسب؟

الخلاصة السريعة

ابدأ بمتغير غائب

في المثال المعزول، يستخدم المتغير الغائب وغير المسجل اللون الاحتياطي داخل var. [1]

ضع HTML داخل body وCSS داخل style في صفحة جديدة، دون تسجيل المتغيرين أو تعريفات أخرى لهما. يظهر السطر الأول بالأحمر. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

<div class="frame">
  <p class="sample missing">متغير غائب</p>
  <p class="sample bad">متغير يحمل طولًا</p>
  <p class="sample literal">طول مكتوب مباشرة</p>
  <p class="sample valid">متغير يحمل لونًا</p>
</div>

مرّر الشيفرة أفقيًا عند الحاجة.

.frame { color: #165747; }
.sample { color: #2449ad; }
.missing { color: var(--absent-tone, #a11212); }

أدخل طولًا بدل اللون

يمكن للمتغير غير المسجل أن يحمل طولًا، لكن ذلك الطول لا يصلح قيمة لخاصية color. [2]

أضف قاعدة bad. تقبل الخاصية المخصصة الرمز 24px، فيدخل مكان var، ثم تفشل قيمة color. لا تقفز الدالة إلى الأحمر لمجرد أن الطول غير مناسب للون؛ الفشل يقع بعد اختيار قيمة المتغير. [2]

مرّر الشيفرة أفقيًا عند الحاجة.

.bad {
  --tone: 24px;
  color: var(--tone, #a11212);
}

فسّر ظهور لون الأب

عند بطلان color بعد التعويض، يرث العنصر لون الأب ولا يستعيد تصريح اللون السابق. [3]

لذلك يظهر السطر الثاني بالأخضر المحدد على frame، مع أن sample أعطاه أزرق أولًا. فشل التصريح عند حساب القيمة متأخر؛ القيم الأخرى في التتالي أُبعدت بالفعل، فلا يرجع المتصفح إلى الأزرق. [3]

اخترنا color الموروثة وأبًا ذا لون صريح كي تكون النتيجة واضحة. لا تعمم الأخضر على كل خاصية أو صفحة؛ الخاصية غير الموروثة ترجع إلى قيمتها الابتدائية عند هذا النوع من الفشل. [3]

قارن الفشل المبكر

القيمة غير الصالحة المكتوبة مباشرة تُرفض مبكرًا، فيبقى تصريح اللون الصالح السابق. [2]

يبقى literal أزرق بسبب رفض الطول المباشر. ويظهر valid بنفسجيًا لأن المتغير يحمل لونًا مناسبًا. [1] [2]

مرّر الشيفرة أفقيًا عند الحاجة.

.literal { color: 24px; }
.valid {
  --tone: #6a2aa6;
  color: var(--tone, #a11212);
}