প্রকাশিত: ১ জুলাই, ২০২৫
Chrome 137 থেকে আপনি if() ফাংশনের মাধ্যমে CSS ইনলাইন কন্ডিশনাল ব্যবহার করে দেখতে পারবেন। if() স্টাইল কোয়েরি ও মিডিয়া কোয়েরির মতো ডাইনামিক স্টাইলের জন্য আরও পরিষ্কার ডেভেলপার ইন্টারফেস চালু করে, এর সাথে কিছু মূল পার্থক্যও রয়েছে, যা আপনি এই পোস্ট থেকে জানতে পারবেন।
CSS if() ফাংশনটি কন্ডিশন-ভ্যালু পেয়ারের একটি সিরিজ ব্যবহার করে কাজ করে, যা নিম্নলিখিতভাবে স্ট্রাকচার করা হয়:
property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);
আপনি একটি else বিবৃতি প্রদান করতে পারেন, যা অন্য কোনও শর্ত পূরণ না হলে ব্যবহার করা হয়:
property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);
এই মুহূর্তে, if() তিনটি আলাদা আলাদা ধরনের কোয়েরির সাথে কাজ করে:
style(): স্টাইল কোয়েরিmedia(): মিডিয়া কোয়েরিsupports(): সহায়তা সংক্রান্ত কোয়েরি
কিছু উদাহরণ দিয়ে বিষয়টি আরও স্পষ্ট করা যাক:
ডেমো: ইনলাইন মিডিয়া কোয়েরি
আপনার স্টাইলে ইনলাইন মিডিয়া কোয়েরি যোগ করার জন্য if() ব্যবহার করা একটি দুর্দান্ত উপায়। যেমন, আপনি কোনও ব্যবহারকারীর থিমিং সংক্রান্ত পছন্দ (লাইট বা ডার্ক) চেক করতে পারেন অথবা ভিউপোর্ট উইথের জন্য ইনলাইন মিডিয়া কোয়েরি করতে পারেন। নিচের উদাহরণে পয়েন্টার ডিভাইসের জন্য মিডিয়া কোয়েরি দেখানো হয়েছে। মাউসের মতো ফাইন পয়েন্টার সহ ডিভাইসে বোতামের ডিফল্ট সাইজ ৩০ পিক্সেল হবে, কিন্তু মোটা পয়েন্টার সহ টাচস্ক্রিন ডিভাইসের ক্ষেত্রে, সহজ অ্যাক্সেসের জন্য উপযুক্ত টাচ স্পেসিংয়ের জন্য বোতামের সাইজ ন্যূনতম সাজেস্ট করা ৪৪ পিক্সেল হবে।
button {
aspect-ratio: 1;
width: if(media(any-pointer: fine): 30px; else: 44px);
}
উপরের কোডটি নিম্নলিখিত মিডিয়া কোয়েরির মতো একই ফলাফল দেয়:
button {
aspect-ratio: 1;
width: 44px;
}
@media (any-pointer: fine) {
button {
width: 30px;
}
}
if() ফর্ম্যাট ব্যবহার করলে, স্টাইলিং লজিককে দুটি আলাদা আলাদা জায়গায় রাখার প্রয়োজন হয় না, লজিককে ইনলাইন রাখা যায়।
if() ব্যবহার করলে বোতামের ফন্ট-সাইজ বেড়ে যায়, তার ডেমো।ডেমো: ইনলাইন সহায়তা সংক্রান্ত কোয়েরি
if() ব্যবহার করার আরেকটি উপায় হল ইনলাইন সহায়তা কোয়েরি তৈরি করা। যেমন, OKLCH-এর মতো ওয়াইড-গ্যামাট কালার সাপোর্ট চেক করতে, আপনি এগুলি ব্যবহার করতে পারেন:
body {
background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00adf3;
);
&::after {
content: if(
supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
else: "Your browser does not support OKLCH";
);
}
}
এই কোডের মাধ্যমে, ব্রাউজার oklch কালার স্পেস সাপোর্ট করলে, ব্যবহারকারী আরও উজ্জ্বল রঙ দেখতে পাবেন এবং ::after ছদ্ম কন্টেন্টে "আপনার ব্রাউজার OKLCH সাপোর্ট করে" মেসেজও পাবেন।
if() ফাংশন ব্যবহার করে সহায়তা সংক্রান্ত কোয়েরি।আরও জানতে এবং rgb ও আরও উন্নত কালার স্পেসের মধ্যে পার্থক্য দেখতে, oklch.com-এ কালার পিকার ও রিসোর্স দেখুন।
ডেমো: UI স্টেট ভিজ্যুয়ালাইজ করা
এছাড়াও, আপনি স্টেট-ভিত্তিক স্টাইলিংয়ের জন্য if() ব্যবহার করতে পারবেন। যেমন, UI স্টেটের (পেন্ডিং বা সম্পূর্ণ) উপর ভিত্তি করে প্রগ্রেস কার্ডের স্টাইলিং। সরাসরি ডেটা অ্যাট্রিবিউট বা কাস্টম প্রপার্টিতে স্ট্যাটাস স্টোর করুন এবং তারপরে if() ব্যবহার করে প্রপার্টিতে ইনলাইন স্টাইল প্রয়োগ করুন।
<div class="card" data-status="complete">
...
</div>
.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray);
background-color: if(
style(--status: pending): #eff7fa;
style(--status: complete): #f6fff6;
else: #f7f7f7);
}
if() ফাংশন ব্যবহার করে প্রপার্টির সাথে ইনলাইন স্টেটফুল লেবেলের স্টাইলিং।if() ফাংশনের মধ্যে style() ব্যবহার করে, আপনি যে এলিমেন্টকে টার্গেট করছেন সেটিকে সরাসরি স্টাইল করতে পারবেন, CSS স্টাইল কোয়েরির মতো প্যারেন্ট এলিমেন্টের প্রয়োজন হবে না।
এই ডেমোতে দেখানো হয়েছে যে কীভাবে আপনি CSS-এর নতুন আর্কিটেকচারাল অ্যাপ্রোচকে সহায়তা করার জন্য if() ব্যবহার করতে পারেন। ক্লাসের পরিবর্তে CSS কাস্টম প্রপার্টি ব্যবহার করার একটি সুবিধা হল, CSS-এ সেগুলি সহজে আপডেট করা যায়। যেমন, মিডিয়া কোয়েরি বা :hover-এর মতো ছদ্ম স্টেট ব্যবহার করে সেগুলি আপডেট করা যেতে পারে।
এর পরে কী করতে হবে
if() যোগ করার ফলে CSS ডেভেলপারদের জন্য নতুন আর্কিটেকচারাল সুযোগ তৈরি হয়েছে। স্টাইল কোয়েরির মতো প্রযুক্তি উন্নত হওয়ার সাথে সাথে, if() ফাংশনের মধ্যে রেঞ্জ কোয়েরি করা সম্ভবত সম্ভব হবে এবং আসন্ন কাস্টম ফাংশন প্রপোজালের (CSS @function) সাথে একত্রিত হলে সেগুলিও কার্যকর হবে।
এইসব ফিচার সম্পর্কে আরও জানতে, এগুলি দেখুন: