عددی 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;
}

لیکن اگر ہم اس متغیر کو حرکت پذیری میں استعمال کرنا چاہتے ہیں… nada.

: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 صرف کروم میں اترا ہے (شروع میں ورژن 85) اس تحریر کے مطابق۔ اور اگر آپ اسے سونگھنے کی امید کر رہے ہیں۔ @supports، ہم فی الحال قسمت سے باہر ہیں کیونکہ یہ اصولوں کو اقدار کے طور پر قبول نہیں کرتا ہے… ابھی تک۔ یہ ایک بار بدل جائے گا۔ at-rule()ایک حقیقی چیز بن جاتی ہے.