CSS-এ ট্রানজিশন ও ডেটা সুরক্ষা
CSS কাস্টম প্রপার্টি, যা CSS ভেরিয়েবল নামেও পরিচিত, আপনাকে CSS-এ নিজের প্রপার্টি সংজ্ঞায়িত করতে এবং আপনার CSS জুড়ে তাদের ভ্যালু ব্যবহার করতে দেয়। আজকের দিনে অবিশ্বাস্যভাবে উপযোগী হলেও, এগুলির কিছু ত্রুটি আছে যার জন্য এগুলি নিয়ে কাজ করা কঠিন হতে পারে: এগুলি যেকোনও ভ্যালু নিতে পারে, তাই এগুলি হয়ত অপ্রত্যাশিত কিছুর দ্বারা দুর্ঘটনাবশত ওভাররাইড হয়ে যেতে পারে, এগুলি সবসময় তাদের পেরেন্ট থেকে তাদের ভ্যালু ইনহেরিট করে এবং আপনি এগুলিকে ট্রানজিশন করতে পারবেন না। Houdini-র CSS প্রপার্টি ও ভ্যালু API লেভেল ১, এখন Chrome 78-এ উপলভ্য, এই ত্রুটিগুলি অতিক্রম করা হয়েছে, যা CSS কাস্টম প্রপার্টিকে অবিশ্বাস্যভাবে শক্তিশালী করে তুলেছে!
Houdini কী?
নতুন API সম্পর্কে কথা বলার আগে, Houdini সম্পর্কে চটপট জেনে নেওয়া যাক। CSS-TAG Houdini টাস্ক ফোর্স, যা CSS Houdini বা শুধু Houdini নামে পরিচিত, "ওয়েবে স্টাইলিং ও লেআউটের 'ম্যাজিক' ব্যাখ্যা করার জন্য ফিচার ডেভেলপ করে"। Houdini স্পেসিফিকেশন-এর কালেকশন ব্রাউজারের রেন্ডারিং ইঞ্জিনের ক্ষমতাকে উন্মুক্ত করার জন্য ডিজাইন করা হয়েছে, যা আমাদের স্টাইল সম্পর্কে গভীর অন্তর্দৃষ্টি এবং আমাদের রেন্ডারিং ইঞ্জিনকে প্রসারিত করার ক্ষমতা উভয়ই প্রদান করে। এর ফলে, জাভাস্ক্রিপ্টে টাইপ করা CSS ভ্যালু এবং পারফর্ম্যান্সের উপর প্রভাব না ফেলে পলিফিলিং বা নতুন CSS তৈরি করা অবশেষে সম্ভব হয়েছে। Houdini-র কাছে ওয়েবে ক্রিয়েটিভিটিকে সুপারপাওয়ার করার ক্ষমতা আছে।
CSS প্রপার্টি ও ভ্যালু API লেভেল ১
CSS প্রপার্টি ও ভ্যালু API লেভেল ১ (Houdini Props ও Vals) আমাদের কাস্টম প্রপার্টিকে স্ট্রাকচার দেওয়ার সুবিধা দেয়। কাস্টম প্রপার্টি ব্যবহার করার সময় বর্তমান পরিস্থিতি এটি:
.thing {
--my-color: green;
}
কাস্টম প্রপার্টির কোনও ধরন না থাকার কারণে, অপ্রত্যাশিতভাবে সেগুলি ওভাররাইড করা হতে পারে। যেমন, আপনি কোনও URL-এর সাথে --my-color নির্ধারণ করলে কী হবে তা বিবেচনা করুন।
.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শব্দটি ব্যবহার করা যাবে।
Gotchas
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-এর অংশ, এইভাবে
আমাদের লিনিয়ার গ্রেডিয়েন্ট অ্যানিমেট করবে। সম্পূর্ণ কোড অ্যাকশনে দেখতে এবং নিজে এটি নিয়ে
পরীক্ষা করতে নিচে Codepen দেখুন।
উপসংহার
Houdini ব্রাউজারে আসছে এবং এর সাথে, CSS-এর সাথে কাজ করা এবং এটিকে প্রসারিত করার সম্পূর্ণ নতুন উপায়। Paint API আগে থেকেই শিপ করা হয়েছে এবং এখন কাস্টম প্রপস ও ভ্যালস, আমাদের ক্রিয়েটিভ টুলবক্স আরও বড় হচ্ছে, যা আমাদের টাইপ করা CSS প্রপার্টি সংজ্ঞায়িত করতে এবং নতুন ও আকর্ষণীয় ডিজাইন তৈরি ও অ্যানিমেট করতে সেগুলি ব্যবহার করার অনুমতি দেয়। এছাড়াও, Houdini সমস্যা কিউ-তে আরও অনেক কিছু আছে, যেখানে আপনি মতামত দিতে এবং Houdini-র জন্য পরবর্তী পদক্ষেপ কী তা দেখতে পারবেন। Houdini-র উদ্দেশ্য হল এমন ফিচার ডেভেলপ করা যা ওয়েবে স্টাইলিং ও লেআউটের "ম্যাজিক" ব্যাখ্যা করে, তাই আর দেরি না করে এইসব ম্যাজিক্যাল ফিচার ব্যবহার করা শুরু করে দিন।