ইন্টারপোলেটিং নিউমেরিক 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()একটি বাস্তব জিনিস হয়ে ওঠে.