আপনি কি জানেন যে আপনি CSS-এ একবার রঙের বৈশিষ্ট্য নির্দিষ্ট করতে পারেন এবং বর্তমান রঙের কীওয়ার্ড ব্যবহার করে এটি আবার উল্লেখ না করে সেই মানটি ব্যবহার করতে পারেন?
সংজ্ঞা দিয়ে শুরু করা যাক
দ
currentColorকীওয়ার্ড বর্তমান মান বোঝায়colorএকটি উপাদানের বৈশিষ্ট্য (সমস্ত বৈশিষ্ট্য গণনা করার পরে) এবং স্পষ্টভাবে রঙ কোড নির্দিষ্ট না করেই এটি সরাসরি ব্যবহার করার অনুমতি দেয়।
উদাহরণ
এই মত একাধিকবার রঙ কোড নির্দিষ্ট করার পরিবর্তে:
.my-class {
color: red;
background-color: red;
box-shadow: 2px 2px 4px 0 red;
}আমরা এটি একবার নির্দিষ্ট করে আবার ব্যবহার করতে পারি। এটি সর্বত্র রঙের মান পরিবর্তনের মাথাব্যথাও হ্রাস করে।
.my-class {
color: red;
background-color: currentColor;
box-shadow: 2px 2px 4px 0 currentColor;
}এর আরও অন্বেষণ করা যাক
আমরা যদি রঙের সম্পত্তি নির্দিষ্ট না করি তবে কী হবে?
এই ক্ষেত্রে, আপনি যদি শীর্ষে সংজ্ঞাটি পুনরায় দেখেন তবে এটি রঙের সম্পত্তির বর্তমান মান নেয় সমস্ত CSS বৈশিষ্ট্য গণনা করার পরে যে উপাদান. এর মানে এটি তার মূল উপাদান থেকে এই মান নিতে চাই. সুতরাং, যদি কোনও অভিভাবক উপাদানগুলিতে নির্দিষ্ট কোনও রঙের বৈশিষ্ট্য না থাকে তবে এটি ব্রাউজার দ্বারা সেট করা ডিফল্ট রঙ গ্রহণ করবে।
FYI: যেহেতু আপনি আপনার OS থিম কনফিগার করতে পারেন, ব্রাউজারগুলিও সেগুলি গ্রহণ করার চেষ্টা করে৷ তাই, কোন গ্লোবাল ডিফল্ট ফন্ট কালার নেই।
কিন্তু… আমরা কি একাধিক রঙের মান উল্লেখ করে বর্তমান রঙকে বোকা বানাতে পারি?
আপনি কি অনুমান করতে পারেন যদি আপনি এইরকম কিছু করেন তবে বর্তমান রঙের মান কী হবে?
.my-class {
color: red;
background-color: currentColor;
color: blue;
}এখন, আপনি যদি সংজ্ঞাটি সঠিকভাবে বুঝে থাকেন, তাহলে আপনি জানতেন বর্তমান রঙের মান অবশ্যই হবে blue এবং লাল নয়। কারণ এটি রঙের সম্পত্তির বর্তমান মান নেয় সমস্ত CSS বৈশিষ্ট্য গণনা করার পরে.
কারেন্ট কালার ক্যামেলকেসে কেন?
আপনারা কেউ কেউ নিশ্চয়ই লক্ষ্য করেছেন যে আমরা এখানে CamelCase ব্যবহার করছি। কিন্তু CSS হল case-insensitive! তাই হ্যাঁ, আপনি যা খুশি লিখতে পারেন।
currentColor,currentcolor,CurrentColor,CURRENTCOLOR,cUrReNtCoLoRইত্যাদি সবকিছু বৈধ!
চলুন কিছু ব্যবহার-কেস তাকান
আপনার SVG আইকনে একই ফন্টের রঙ ব্যবহার করুন
আপনার ফন্টের রঙ অনুযায়ী বক্সের ছায়া পরিবর্তন করুন
অথবা আমরা জাভাস্ক্রিপ্ট ব্যবহার না করে কিছু অ্যানিমেশন দেখাতে পারি এবং ফন্টের রঙ এবং বক্স-শ্যাডো উভয়ই পরিবর্তন করতে পারি!
যদিও আমি শুধুমাত্র 3টি উদাহরণ দেখিয়েছি, এটি আপনার কল্পনার উপর নির্ভর করে। আপনি কিভাবে এটি ব্যবহার করতে পারেন আমাদের জানান.
আপনি যদি এই বিষয় এবং নিবন্ধটি পছন্দ করেন তবে আমাকে জানান টুইটার এবং সবার সাথে জ্ঞান ভাগ করুন. হয়তো আমি ব্যবহারের ক্ষেত্রে একটি পৃথক নিবন্ধ তৈরি করব। আপনি যদি এই নিবন্ধটি পছন্দ না করেন, তবুও আপনি কি পছন্দ করেননি তা আমাকে জানান। আমি অবশ্যই এটি উন্নত করার চেষ্টা করব। আমাকে অনুসরণ করুন টুইটার সম্ভব হলে এটা আমার অনেক মানে হবে!
