সিএসএস ম্যাথ ফাংশন এমন কিছু বিল্ট-ইন ফাংশন সরবরাহ করে, যা সিএসএসে গাণিতিক গণনা (mathematical calculations) সম্পাদন করতে ব্যবহৃত হয়। এই ফাংশনগুলো স্টাইল শীটে আরো ডাইনামিক এবং রেসপনসিভ ডিজাইন তৈরি করতে সাহায্য করে।
ম্যাথ ফাংশনের সুবিধা
- রেসপনসিভ ডিজাইন: বিভিন্ন ডিভাইসের স্ক্রিন সাইজ অনুযায়ী মান নির্ধারণ করা সহজ হয়।
- ডাইনামিক স্টাইলিং: গণিতের সাহায্যে ভেরিয়েবল বা মানের পরিবর্তন সহজে সম্ভব।
- স্টাইল পুনরায় ব্যবহারযোগ্য: একই গণনা একাধিক স্থানে প্রয়োগ করা যায়।
- সহজ গণনা: স্টাইলশিটে হাতের নাগালে গাণিতিক কাজ করার সুবিধা।
সিএসএস ম্যাথ ফাংশনের ধরন
calc()
ব্যবহার: গাণিতিক গণনার মাধ্যমে মান নির্ধারণ করতে ব্যবহৃত হয়। এটি বিভিন্ন ইউনিট (যেমন px, %, em) একসাথে মেশাতে পারে।
.element {
width: calc(100% - 50px);
margin: calc(10px + 5%);
}
min()
ব্যবহার: প্রদত্ত মানগুলোর মধ্যে সর্বনিম্নটি বেছে নেয়।
.element {
width: min(50%, 300px);
}
max()
ব্যবহার: প্রদত্ত মানগুলোর মধ্যে সর্বোচ্চটি বেছে নেয়।
.element {
width: max(200px, 10%);
}
clamp()
ব্যবহার: একটি মানের সর্বনিম্ন, পছন্দসই এবং সর্বাধিক মান নির্ধারণ করতে ব্যবহৃত হয়। এটি রেসপনসিভ ডিজাইনের জন্য অত্যন্ত কার্যকর।
.element {
font-size: clamp(1rem, 2vw, 3rem);
}
গুরুত্বপূর্ণ নিয়ম
- ইউনিটের সামঞ্জস্যতা:
calc()এ বিভিন্ন ইউনিট একসাথে ব্যবহার করা গেলেওmin(),max(), এবংclamp()-এ একই ইউনিট থাকা আবশ্যক। - স্পেস ব্যবহার:
calc()-এর মধ্যে অপারেটরের (+,-,*,/) আগে এবং পরে অবশ্যই স্পেস দিতে হবে, নতুবা এটি সিএসএস ত্রুটি তৈরি করবে। - কম্প্যাটিবিলিটি: নতুন ফাংশনগুলো (যেমন
clamp()) ব্যবহারের আগে ব্রাউজার সমর্থন যাচাই করা উচিত।
উদাহরণ: রেসপনসিভ লেআউট ডিজাইন
.container {
width: calc(100% - 20px);
padding: clamp(10px, 5%, 50px);
}
.card {
font-size: min(2vw, 16px);
margin: max(1rem, 2%);
}
এই কোডটি একটি লেআউটকে রেসপনসিভ এবং বিভিন্ন স্ক্রিন সাইজের জন্য উপযোগী করে তোলে।
ব্রাউজার সমর্থন
সিএসএস ম্যাথ ফাংশনের বেশিরভাগ আধুনিক ব্রাউজার দ্বারা সমর্থিত, তবে পুরোনো ব্রাউজারগুলোর জন্য পরীক্ষার পর প্রয়োগ করা উচিত।
| ফাংশন | সমর্থিত ব্রাউজার |
|---|---|
calc() | সকল আধুনিক ব্রাউজার |
min() এবং max() | Chrome 79+, Firefox 75+, Edge 79+ |
clamp() | Chrome 79+, Firefox 75+, Edge 79+ |
সিএসএস ম্যাথ ফাংশন সঠিকভাবে ব্যবহার করে আপনি আপনার ডিজাইনে নমনীয়তা এবং ডায়নামিজম আনতে পারেন। এটি বিশেষত রেসপনসিভ ডিজাইন এবং জটিল লেআউট তৈরির জন্য অত্যন্ত কার্যকর।
Read more
