استيفاء متغيرات CSS الرقمية

يمكننا إنشاء متغيرات في CSS بسهولة تامة:

:root {
  --scale: 1;
}

ويمكننا أن نعلنها على أي عنصر:

.thing {
  transform: scale(--scale);
}

والأفضل لمثال كهذا هو تطبيق المتغير على تفاعل المستخدم ، على سبيل المثال :hover:

:root {
  --scale: 1;
}

.thing {
  height: 100px;
  transform: scale(--scale);
  width: 100px;
}

.thing:hover {
  --scale: 3;
}

ولكن إذا أردنا استخدام هذا المتغير في الرسوم المتحركة… ندى.

:root {
  --scale: 1;
}

@keyframes scale {
  from { --scale: 0; }
  to { --scale: 3; }
}

/* Nope! */
.thing {
  animation: scale .25s ease-in;
  height: 100px;
  width: 100px;
}

ذلك لأنه يتم التعرف على المتغير كسلسلة وما نحتاجه هو رقم يمكن إقحامه بين قيمتين رقميتين. هذا هو المكان الذي يمكننا الاتصال به @property ليس فقط لتسجيل المتغير كخاصية مخصصة ، ولكن لتحديد تركيبته كرقم:

@property --scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

الآن نحصل على الرسوم المتحركة!

أنت تريد أن تحقق من دعم المتصفح منذ @property فقط في Chrome (بدءًا من إصدار 85) حتى كتابة هذه السطور. وإذا كنت تأمل في شمها @supports، نحن حاليًا غير محظوظين لأنه لا يقبل القواعد كقيم… حتى الآن. سوف يتغير ذلك مرة واحدة at-rule()يصبح شيئًا حقيقيًا.