@প্রপার্টি: CSS ভেরিয়েবলকে সুপার পাওয়ার দেওয়া

Una Kravets

CSS Houdini হল একটি ছাতা শব্দ যা নিম্ন-স্তরের API-এর একটি সেট কভার করে যা CSS রেন্ডারিং ইঞ্জিনের অংশগুলিকে প্রকাশ করে এবং বিকাশকারীদের CSS অবজেক্ট মডেলে অ্যাক্সেস দেয়। এটি সিএসএস ইকোসিস্টেমের জন্য একটি বিশাল পরিবর্তন, কারণ এটি বিকাশকারীদের ব্রাউজারকে বলতে সক্ষম করে কিভাবে কাস্টম সিএসএস পড়তে এবং পার্স করতে হয় ব্রাউজার বিক্রেতাদের এই বৈশিষ্ট্যগুলির জন্য অন্তর্নির্মিত সমর্থন প্রদানের জন্য অপেক্ষা না করে। তাই উত্তেজনাপূর্ণ!

Houdini ছাতার মধ্যে CSS-তে সবচেয়ে উত্তেজনাপূর্ণ সংযোজনগুলির মধ্যে একটি হল বৈশিষ্ট্য এবং মান API ।

এই API আপনার CSS কাস্টম বৈশিষ্ট্যগুলিকে সুপারচার্জ করে (সাধারণত CSS ভেরিয়েবল হিসাবেও উল্লেখ করা হয়) তাদের শব্দার্থিক অর্থ (একটি সিনট্যাক্স দ্বারা সংজ্ঞায়িত) এবং এমনকি ফলব্যাক মান দিয়ে, CSS পরীক্ষা সক্ষম করে।

Houdini কাস্টম বৈশিষ্ট্য লেখা

এখানে একটি কাস্টম প্রপার্টি সেট করার একটি উদাহরণ রয়েছে (মনে করুন: CSS ভেরিয়েবল), কিন্তু এখন একটি সিনট্যাক্স (টাইপ), প্রাথমিক মান (ফলব্যাক), এবং ইনহেরিটেন্স বুলিয়ান (এটি কি এর প্যারেন্ট থেকে মানটি উত্তরাধিকার সূত্রে পায় নাকি না?)। এটি করার বর্তমান উপায় হল জাভাস্ক্রিপ্টে CSS.registerProperty() এর মাধ্যমে, কিন্তু সমর্থনকারী ব্রাউজারগুলিতে, আপনি @property ব্যবহার করতে পারেন:

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

এখন আপনি var(--colorPrimary) এর মাধ্যমে অন্য CSS কাস্টম প্রপার্টির মত --colorPrimary অ্যাক্সেস করতে পারবেন। যাইহোক, এখানে পার্থক্য হল --colorPrimary শুধুমাত্র একটি স্ট্রিং হিসাবে পড়া হয় না। এটা ডাটা আছে!

ফলব্যাক মান

অন্য যেকোনো কাস্টম প্রপার্টির মতো, আপনি ( var ব্যবহার করে) বা সেট (লিখতে/পুনরায় লিখতে) মান পেতে পারেন, কিন্তু Houdini কাস্টম বৈশিষ্ট্যগুলির সাথে, যদি আপনি এটিকে ওভাররাইড করার সময় একটি মিথ্যা মান সেট করেন, CSS রেন্ডারিং ইঞ্জিন প্রাথমিক মান পাঠাবে (এর ফলব্যাক মান) লাইনটি উপেক্ষা করার পরিবর্তে।

নীচের উদাহরণ বিবেচনা করুন. --colorPrimary ভেরিয়েবলে magenta একটি initial-value রয়েছে। কিন্তু বিকাশকারী এটিকে অবৈধ মান "23" দিয়েছে। @property ছাড়া, CSS পার্সার অবৈধ কোড উপেক্ষা করবে। এখন, পার্সার magenta ফিরে আসে। এটি সত্য ফলব্যাক এবং CSS-এর মধ্যে পরীক্ষার জন্য অনুমতি দেয়। ঝরঝরে !

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

সিনট্যাক্স

সিনট্যাক্স বৈশিষ্ট্য সহ, আপনি এখন একটি প্রকার নির্দিষ্ট করে শব্দার্থিক CSS লিখতে পারেন। অনুমোদিত বর্তমান প্রকারগুলির মধ্যে রয়েছে:

• length
• number
• percentage
• length-percentage
• color
• image
• url
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (একটি কাস্টম শনাক্তকারী স্ট্রিং)

একটি সিনট্যাক্স সেট করা ব্রাউজারকে কাস্টম বৈশিষ্ট্য টাইপ-চেক করতে সক্ষম করে। এই অনেক সুবিধা আছে.

এই পয়েন্টটি ব্যাখ্যা করার জন্য, আমি আপনাকে দেখাব কিভাবে একটি গ্রেডিয়েন্ট অ্যানিমেট করতে হয়। বর্তমানে, গ্রেডিয়েন্ট মানগুলির মধ্যে মসৃণভাবে অ্যানিমেট (বা ইন্টারপোলেট) করার কোন উপায় নেই, কারণ প্রতিটি গ্রেডিয়েন্ট ঘোষণা একটি স্ট্রিং হিসাবে পার্স করা হয়।

এই উদাহরণে, গ্রেডিয়েন্ট স্টপ শতাংশ একটি হোভার ইন্টারঅ্যাকশনের মাধ্যমে 40% এর প্রারম্ভিক মান থেকে 100% এর শেষ মান পর্যন্ত অ্যানিমেট করা হচ্ছে। আপনি নীচের দিকে উপরের গ্রেডিয়েন্ট রঙের একটি মসৃণ রূপান্তর দেখতে পাবেন।

বাম দিকের ব্রাউজারটি Houdini প্রোপার্টি এবং ভ্যালুস API সমর্থন করে, একটি মসৃণ গ্রেডিয়েন্ট স্টপ ট্রানজিশন সক্ষম করে। ডানদিকের ব্রাউজারটি তা করে না। অ-সমর্থনকারী ব্রাউজারটি শুধুমাত্র বিন্দু A থেকে বি পয়েন্টে যাওয়া একটি স্ট্রিং হিসাবে এই পরিবর্তনটি বুঝতে সক্ষম। মানগুলিকে ইন্টারপোলেট করার কোন সুযোগ নেই এবং এইভাবে আপনি সেই মসৃণ রূপান্তরটি দেখতে পাচ্ছেন না।

যাইহোক, যদি আপনি কাস্টম বৈশিষ্ট্যগুলি লেখার সময় সিনট্যাক্সের ধরণ ঘোষণা করেন এবং তারপর অ্যানিমেশন সক্ষম করতে সেই কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করেন, আপনি রূপান্তর দেখতে পাবেন। আপনি কাস্টম প্রপার্টি --gradPoint মত ইনস্ট্যান্টিয়েট করতে পারেন:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

এবং তারপর যখন এটি অ্যানিমেট করার সময় আসে, আপনি প্রাথমিক 40% থেকে 100% পর্যন্ত মান আপডেট করতে পারেন:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

এটি এখন সেই মসৃণ গ্রেডিয়েন্ট ট্রানজিশনকে সক্ষম করবে।

উপসংহার

@property নিয়ম আপনাকে CSS-এর মধ্যেই অর্থপূর্ণ অর্থপূর্ণ CSS লেখার অনুমতি দিয়ে একটি উত্তেজনাপূর্ণ প্রযুক্তিকে আরও বেশি অ্যাক্সেসযোগ্য করে তোলে। CSS Houdini এবং Properties and Values ​​API সম্পর্কে আরও জানতে, এই সম্পদগুলি দেখুন:

• Houdini এখনও প্রস্তুত?
• MDN Houdini রেফারেন্স
• Houdini এর নতুন API সহ আরও স্মার্ট কাস্টম বৈশিষ্ট্য
• Houdini CSSWG ইস্যু সারি

আনস্প্ল্যাশে ক্রিশ্চিয়ান এসকোবারের ছবি।