CSS-এ ট্রানজিশন এবং ডেটা সুরক্ষা
CSS কাস্টম বৈশিষ্ট্য, CSS ভেরিয়েবল নামেও পরিচিত, আপনাকে CSS-এ আপনার নিজস্ব বৈশিষ্ট্য নির্ধারণ করতে এবং আপনার CSS জুড়ে তাদের মান ব্যবহার করতে দেয়। যদিও আজ অবিশ্বাস্যভাবে দরকারী, তাদের ত্রুটি রয়েছে যা তাদের সাথে কাজ করা কঠিন করে তুলতে পারে: তারা যে কোনও মান নিতে পারে যাতে তারা দুর্ঘটনাক্রমে অপ্রত্যাশিত কিছু দিয়ে ওভাররাইড হতে পারে, তারা সর্বদা তাদের পিতামাতার কাছ থেকে তাদের মান উত্তরাধিকার সূত্রে পায় এবং আপনি তাদের স্থানান্তর করতে পারবেন না। Houdini এর CSS বৈশিষ্ট্য এবং মান API স্তর 1 এর সাথে, এখন Chrome 78-এ উপলব্ধ, এই ত্রুটিগুলি অতিক্রম করা হয়েছে, যা CSS কাস্টম বৈশিষ্ট্যগুলিকে অবিশ্বাস্যভাবে শক্তিশালী করে তুলেছে!
Houdini কি?
নতুন API সম্পর্কে কথা বলার আগে, আসুন দ্রুত Houdini সম্পর্কে কথা বলি। CSS-TAG Houdini টাস্ক ফোর্স, CSS Houdini বা সহজভাবে Houdini নামে পরিচিত, "ওয়েবে স্টাইলিং এবং লেআউটের 'জাদু' ব্যাখ্যা করে এমন বৈশিষ্ট্যগুলি বিকাশ করতে" বিদ্যমান। Houdini স্পেসিফিকেশনের সংগ্রহটি ব্রাউজারের রেন্ডারিং ইঞ্জিনের শক্তি উন্মুক্ত করার জন্য ডিজাইন করা হয়েছে, যা আমাদের শৈলীর গভীর অন্তর্দৃষ্টি এবং আমাদের রেন্ডারিং ইঞ্জিনকে প্রসারিত করার ক্ষমতা উভয়কেই অনুমতি দেয়৷ এর সাহায্যে, জাভাস্ক্রিপ্টে CSS মান টাইপ করা এবং পারফরম্যান্স হিট ছাড়াই পলিফিলিং বা নতুন CSS আবিষ্কার করা শেষ পর্যন্ত সম্ভব। Houdini ওয়েবে সৃজনশীলতাকে সুপার পাওয়ার করার ক্ষমতা রাখে।
CSS বৈশিষ্ট্য এবং মান API স্তর 1
CSS প্রপার্টি এবং ভ্যালুস এপিআই লেভেল 1 (হাউডিনি প্রপস এবং ভ্যালস) আমাদের কাস্টম প্রপার্টিগুলিতে কাঠামো দিতে দেয়। কাস্টম বৈশিষ্ট্য ব্যবহার করার সময় এটি বর্তমান পরিস্থিতি:
.thing {
--my-color: green;
}
কারণ কাস্টম বৈশিষ্ট্যের ধরন নেই, সেগুলি অপ্রত্যাশিত উপায়ে ওভাররাইড করা যেতে পারে। উদাহরণস্বরূপ, আপনি যদি --my-color একটি URL দিয়ে সংজ্ঞায়িত করেন তাহলে কি হবে তা বিবেচনা করুন।
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}
এখানে, কারণ --my-color টাইপ করা হয় না, এটি জানে না যে একটি URL একটি বৈধ রঙের মান নয়! যখন আমরা এটি ব্যবহার করি, এটি ডিফল্ট মানগুলিতে ফিরে আসে ( color জন্য কালো, background জন্য স্বচ্ছ)। Houdini Props এবং Vals এর সাথে, কাস্টম বৈশিষ্ট্যগুলি নিবন্ধিত করা যেতে পারে যাতে ব্রাউজার জানে এটি কী হওয়া উচিত !
এখন, কাস্টম সম্পত্তি --my-color একটি রঙ হিসাবে নিবন্ধিত! এটি ব্রাউজারকে বলে যে কোন ধরণের মান অনুমোদিত এবং কীভাবে এটি সেই সম্পত্তি টাইপ এবং আচরণ করতে পারে!
নিবন্ধিত সম্পত্তির শারীরস্থান
একটি সম্পত্তি নিবন্ধন এই মত দেখায়:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
এটি নিম্নলিখিত বিকল্পগুলিকে সমর্থন করে:
name: string
কাস্টম সম্পত্তির নাম।
syntax: string
কাস্টম সম্পত্তি পার্স কিভাবে. আপনি CSS মান এবং ইউনিট স্পেসিফিকেশনে সম্ভাব্য মানগুলির একটি সম্পূর্ণ তালিকা খুঁজে পেতে পারেন। ডিফল্ট *
inherits: boolean
এটি তার পিতামাতার মূল্য উত্তরাধিকারসূত্রে পেয়েছে কিনা। ডিফল্ট থেকে true ।
initialValue: string
কাস্টম সম্পত্তির প্রাথমিক মান।
syntax ঘনিষ্ঠভাবে নজর দেওয়া। সংখ্যা থেকে রং থেকে <custom-ident> ধরন পর্যন্ত বেশ কিছু বৈধ বিকল্প রয়েছে। এই সিনট্যাক্সগুলি নিম্নলিখিত মানগুলি ব্যবহার করেও পরিবর্তন করা যেতে পারে
- সংযোজন
+বোঝায় যে এটি সিনট্যাক্সের মানগুলির একটি স্থান-বিচ্ছিন্ন তালিকা গ্রহণ করে। উদাহরণস্বরূপ,<length>+হবে দৈর্ঘ্যের একটি স্থান-বিচ্ছিন্ন তালিকা -
#যোগ করা বোঝায় যে এটি সেই সিনট্যাক্সের মানগুলির একটি কমা-বিচ্ছিন্ন তালিকা গ্রহণ করে। উদাহরণস্বরূপ,<color>#একটি কমা দ্বারা পৃথক করা রঙের তালিকা হবে - যোগ করা হচ্ছে
|সিনট্যাক্স বা শনাক্তকারীর মধ্যে বোঝায় যে প্রদত্ত বিকল্পগুলির যে কোনোটি বৈধ। উদাহরণস্বরূপ,<color># | <url> | magicহয় রঙের একটি কমা-বিভক্ত তালিকা, একটি URL, বাmagicশব্দের অনুমতি দেবে।
গোটচাস
Houdini Props এবং Vals সহ দুটি গোটচা রয়েছে। প্রথমটি হল, একবার সংজ্ঞায়িত হলে, একটি বিদ্যমান নিবন্ধিত সম্পত্তি আপডেট করার কোন উপায় নেই, এবং একটি সম্পত্তি পুনরায় নিবন্ধন করার চেষ্টা করা একটি ত্রুটি নিক্ষেপ করবে যা নির্দেশ করে যে এটি ইতিমধ্যে সংজ্ঞায়িত করা হয়েছে।
দ্বিতীয়ত, স্ট্যান্ডার্ড বৈশিষ্ট্যের বিপরীতে, নিবন্ধিত বৈশিষ্ট্যগুলিকে পার্স করার সময় যাচাই করা হয় না। বরং তারা গণনা করা হলে যাচাই করা হয়। এর মানে হল যে উপাদানটির বৈশিষ্ট্যগুলি পরিদর্শন করার সময় অবৈধ মানগুলি অবৈধ হিসাবে প্রদর্শিত হবে না এবং একটি বৈধের পরে একটি অবৈধ সম্পত্তি সহ বৈধ একটিতে ফিরে আসবে না; একটি অবৈধ সম্পত্তি, তবে, নিবন্ধিত সম্পত্তির ডিফল্টে ফিরে যাবে।
কাস্টম বৈশিষ্ট্য অ্যানিমেটিং
একটি নিবন্ধিত কাস্টম সম্পত্তি টাইপ চেকিংয়ের বাইরে একটি মজাদার বোনাস প্রদান করে: এটিকে অ্যানিমেট করার ক্ষমতা! একটি মৌলিক অ্যানিমেশন উদাহরণ এই মত দেখায়:
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
</style>
আপনি যখন বোতামের উপর ঘোরান, তখন এটি লাল থেকে সবুজ হয়ে উঠবে! সম্পত্তি নিবন্ধন না করেই, এটি এক রঙ থেকে অন্য রঙে লাফিয়ে যাবে কারণ, নিবন্ধিত না হয়ে, ব্রাউজার জানে না একটি মান এবং পরবর্তী মূল্যের মধ্যে কী আশা করা উচিত এবং তাই তাদের স্থানান্তর করার ক্ষমতার গ্যারান্টি দিতে পারে না। CSS গ্রেডিয়েন্ট অ্যানিমেট করার জন্য এই উদাহরণটিকে আরও এক ধাপ এগিয়ে নেওয়া যেতে পারে! নিম্নলিখিত CSS একই নিবন্ধিত সম্পত্তি দিয়ে লেখা যেতে পারে:
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
এটি আমাদের কাস্টম সম্পত্তিকে অ্যানিমেট করবে যা linear-gradient অংশ, এইভাবে আমাদের লিনিয়ার গ্রেডিয়েন্টকে অ্যানিমেট করবে। সম্পূর্ণ কোডটি কার্যকরীভাবে দেখতে নীচের ত্রুটিটি দেখুন এবং এটি নিজেই নিয়ে খেলুন।
উপসংহার
Houdini ব্রাউজারে যাচ্ছে , এবং এর সাথে, CSS এর সাথে কাজ করার এবং প্রসারিত করার সম্পূর্ণ নতুন উপায়। Paint API ইতিমধ্যেই পাঠানো হয়েছে এবং এখন কাস্টম প্রপস এবং Vals সহ, আমাদের সৃজনশীল টুলবক্স প্রসারিত হচ্ছে, যা আমাদের টাইপ করা CSS বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করতে এবং নতুন এবং উত্তেজনাপূর্ণ ডিজাইনগুলি তৈরি এবং অ্যানিমেট করতে তাদের ব্যবহার করার অনুমতি দেয়৷ হাউডিনি ইস্যু সারিতে আরও অনেক কিছু আছে যেখানে আপনি প্রতিক্রিয়া জানাতে পারেন এবং দেখতে পারেন হউডিনির পরবর্তী কী। Houdini ওয়েবে স্টাইলিং এবং লেআউটের "জাদু" ব্যাখ্যা করে এমন বৈশিষ্ট্যগুলি বিকাশ করতে বিদ্যমান, তাই সেখানে যান এবং সেই জাদু বৈশিষ্ট্যগুলিকে ভাল ব্যবহারে রাখুন৷