প্রকাশিত: জুলাই 1, 2025
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() ব্যবহার করা আপনার শৈলীতে ইনলাইন মিডিয়া প্রশ্নগুলি অন্তর্ভুক্ত করার একটি দুর্দান্ত উপায়। উদাহরণস্বরূপ, আপনি একজন ব্যবহারকারীর থিমিং পছন্দ (হালকা বা অন্ধকার) পরীক্ষা করতে পারেন বা ভিউপোর্ট প্রস্থের জন্য ইনলাইন মিডিয়া প্রশ্ন করতে পারেন। নিম্নলিখিত উদাহরণ পয়েন্টার ডিভাইসের জন্য মিডিয়া ক্যোয়ারী দেখায়. একটি মাউসের মতো সূক্ষ্ম পয়েন্টার সহ একটি ডিভাইসে বোতামের ডিফল্ট আকার 30px হবে, কিন্তু টাচস্ক্রিন ডিভাইসগুলির জন্য, যেমন একটি মোটা পয়েন্টার সহ, সহজে অ্যাক্সেসের জন্য উপযুক্ত স্পর্শ ব্যবধানের জন্য বোতামের আকার সর্বনিম্ন-প্রস্তাবিত 44px হবে৷
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 রঙের স্থানকে সমর্থন করে, ব্যবহারকারী আরও প্রাণবন্ত রঙ দেখতে পাবে, এবং বার্তাটিও পাবে: "আপনার ব্রাউজার OKLCH সমর্থন করে" ::after ৷
if() ফাংশন ব্যবহার করে একটি সমর্থন ক্যোয়ারী।আরও জানতে এবং rgb এবং আরও উন্নত রঙের স্থানগুলির মধ্যে পার্থক্য দেখতে, oklch.com এ রঙ চয়নকারী এবং সংস্থানগুলি দেখুন।
ডেমো: UI অবস্থা ভিজ্যুয়ালাইজ করা
আপনি রাষ্ট্র-ভিত্তিক স্টাইলিং এর জন্য if() ব্যবহার করতে পারেন। উদাহরণস্বরূপ, স্টাইলিং অগ্রগতি কার্ডগুলি তাদের UI অবস্থার উপর ভিত্তি করে (মুলতুবি বা সম্পূর্ণ)। একটি ডেটা অ্যাট্রিবিউট বা একটি কাস্টম প্রপার্টিতে স্থিতিটি সরাসরি সংরক্ষণ করুন এবং তারপর if() ব্যবহার করে প্রপার্টিতে ইনলাইন স্টাইল প্রয়োগ করুন।
<div class="card" data-status=>"c<ompl>ete"
...
/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 স্টাইল কোয়েরির মতো প্যারেন্ট এলিমেন্টের প্রয়োজন নেই।
এই ডেমোটি একটি মৌলিক কেস দেখায় যে আপনি কিভাবে if() ব্যবহার করতে পারেন সিএসএস-এ একটি নতুন স্থাপত্য পদ্ধতি সমর্থন করতে। ক্লাসে CSS কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করার একটি সুবিধা হল CSS-এ সেগুলি আপডেট করা সহজ। উদাহরণস্বরূপ, মিডিয়া প্রশ্ন বা ছদ্ম অবস্থা যেমন :hover ব্যবহার করে আপডেট করা যেতে পারে।
এরপর কি
if() যোগ করা CSS ডেভেলপারদের জন্য একটি নতুন স্থাপত্যের সুযোগ প্রদান করে। স্টাইল কোয়েরির মতো প্রযুক্তিগুলি বিকশিত হওয়ার সাথে সাথে if() ফাংশনের মধ্যে পরিসরের অনুসন্ধান সম্ভব হবে এবং আসন্ন কাস্টম ফাংশন প্রস্তাব (CSS @function ) এর সাথে মিলিত হলে সেগুলিও কার্যকর হবে।
এই বৈশিষ্ট্যগুলি সম্পর্কে আরও জানতে, চেক আউট করুন: