CSS মিন(), সর্বোচ্চ(), এবং ক্ল্যাম্প()

এই ভাল-সমর্থিত CSS ফাংশনগুলি ব্যবহার করে কীভাবে উপাদানের আকার নিয়ন্ত্রণ করতে হয়, সঠিক ব্যবধান বজায় রাখতে হয় এবং তরল টাইপোগ্রাফি প্রয়োগ করতে হয় তা শিখুন।

Una Kravets

প্রতিক্রিয়াশীল নকশা আরও সূক্ষ্ম হয়ে উঠলে, লেখকদের নিয়ন্ত্রণ বৃদ্ধি করতে CSS ক্রমাগত বিকশিত হচ্ছে। min() , max() , এবং clamp() ফাংশনগুলি, যা এখন সমস্ত আধুনিক ব্রাউজারে সমর্থিত, অথরিং ওয়েবসাইট এবং অ্যাপগুলিকে আরও গতিশীল এবং প্রতিক্রিয়াশীল করে তোলার সাম্প্রতিক সরঞ্জামগুলির মধ্যে রয়েছে৷ আপনি এই ফাংশনগুলিকে উপাদানের আকার এবং আকার পরিবর্তন করতে, উপাদানগুলির মধ্যে ব্যবধান বজায় রাখতে এবং নমনীয় এবং তরল টাইপোগ্রাফি তৈরি করতে ব্যবহার করতে পারেন।

গণিত ফাংশন, calc() , min() , max() , এবং clamp() যোগ (+), বিয়োগ (-), গুণ (*), এবং ভাগ (/) সহ গাণিতিক রাশিগুলিকে উপাদান মান হিসাবে ব্যবহার করার অনুমতি দেয়

CSS মান এবং ইউনিট লেভেল 4

ব্রাউজার সমর্থন

min()

max()

clamp()

ব্যবহার

আপনি যেকোনো CSS এক্সপ্রেশনের ডানদিকে min() , max() , এবং clamp() ব্যবহার করতে পারেন যেখানে এটি অর্থবহ হবে। min() এবং max() এর জন্য, আপনি মানগুলির একটি আর্গুমেন্ট তালিকা প্রদান করেন এবং ব্রাউজার নির্ধারণ করে কোনটি সবচেয়ে ছোট বা বড়। উদাহরণস্বরূপ, width: min(1rem, 50%, 10vw) , ব্রাউজার এই আপেক্ষিক ইউনিটগুলির মধ্যে কোনটি সবচেয়ে ছোট তা গণনা করে এবং উপাদানটির প্রস্থের জন্য সেই মানটি ব্যবহার করে।

max() ফাংশন সর্বোচ্চ মানের জন্য একই কাজ করে।

clamp() ব্যবহার করতে, তিনটি মান লিখুন: একটি সর্বনিম্ন মান, একটি আদর্শ মান যা থেকে গণনা করা যায় এবং একটি সর্বাধিক মান।

আপনি <length> , <frequency> , <angle> , <time> , <percentage> , <number> > , বা <integer> > অনুমোদিত যে কোনও জায়গায় এই ফাংশনগুলি ব্যবহার করতে পারেন। আপনি তাদের নিজস্ব ব্যবহার করতে পারেন ( font-size: max(0.5vw, 50%, 2rem) ), calc() সহ ( font-size: max(calc(0.5vw - 1em), 2rem) ) , বা রচিত ( font-size: max(min(0.5vw, 1em), 2rem) )।

এই ফাংশনগুলি কীভাবে ব্যবহার করবেন তার কয়েকটি উদাহরণ নীচে দেওয়া হল।

নিখুঁত প্রস্থ

রবার্ট ব্রিংহার্স্টের দ্য এলিমেন্টস অফ টাইপোগ্রাফিক স্টাইল অনুসারে, "45 থেকে 75 অক্ষরের যেকোন কিছুকে টেক্সট আকারে একটি সারিফড টেক্সট ফেসে সেট করা একক-কলাম পৃষ্ঠার জন্য লাইনের একটি সন্তোষজনক দৈর্ঘ্য হিসাবে ব্যাপকভাবে বিবেচনা করা হয়।"

আপনার পাঠ্য ব্লকগুলি 45 থেকে 75 অক্ষরের মধ্যে থাকে তা নিশ্চিত করতে, clamp() এবং ch (0-প্রস্থ অক্ষর অগ্রিম ) ইউনিট ব্যবহার করুন:

p {
  width: clamp(45ch, 50%, 75ch);
}

এটি ব্রাউজারটিকে অনুচ্ছেদের প্রস্থ নির্ধারণ করতে দেয়। এটি ডিফল্টরূপে প্রস্থ 50% সেট করে। যদি 50% 45ch চেয়ে ছোট হয়, তবে এটি পরিবর্তে প্রস্থ হিসাবে 45ch ব্যবহার করে, এবং যদি 50% 75ch চেয়ে বড় হয়, তাহলে এটি 75ch ব্যবহার করে।

আপনি শুধু min() বা max() ব্যবহার করে এটিকে ভাঙতে পারেন। আপনি যদি চান যে উপাদানটি সর্বদা 50% প্রস্থে থাকে এবং বড় পর্দায় প্রস্থ 75ch বেশি না হয়, width: min(75ch, 50%); সর্বোচ্চ আকার সেট করতে।

একইভাবে, আপনি max() ফাংশন ব্যবহার করে সুপাঠ্য পাঠ্যের জন্য একটি সর্বনিম্ন আকার নির্ধারণ করতে পারেন, যেমন width: max(45ch, 50%); . এখানে, ব্রাউজার যেটি বড় মান নির্বাচন করে, যার অর্থ উপাদানটি 45ch বা আরও চওড়া হতে হবে।

প্যাডিং পরিচালনা করুন

আপনি ন্যূনতম প্যাডিং আকার সেট করতে max() ব্যবহার করতে পারেন। এই উদাহরণটি এসেছে CSS Tricks থেকে, যেখানে পাঠক Caluã de Lacerda Pataca এই ধারণাটি ভাগ করেছেন: একটি উপাদানকে বড় পর্দার আকারে অতিরিক্ত প্যাডিং থাকতে দিন, কিন্তু ছোট পর্দার আকারে একটি ন্যূনতম প্যাডিং রাখুন৷ এটি করার জন্য, calc() বা max() ব্যবহার করুন এবং উপাদানটির উভয় দিক থেকে ন্যূনতম প্যাডিং বিয়োগ করুন: calc((100vw - var(--contentWidth)) / 2) , অথবা max(2rem, 50vw - var(--contentWidth) / 2) । আপনার স্টাইল শীটে, এটি এইরকম হওয়া উচিত:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

তরল টাইপোগ্রাফি

ফ্লুইড টাইপোগ্রাফি সক্ষম করার জন্য, মাইক রিথমেউলার একটি কৌশলকে জনপ্রিয় করেছেন যা clamp() ফাংশন ব্যবহার করে একটি ন্যূনতম ফন্টের আকার, সর্বাধিক ফন্টের আকার সেট করতে এবং এই আকারগুলির মধ্যে স্কেলিং করার অনুমতি দেয়।

clamp(), ফন্ট স্কেলিং ডিজাইন করার আগে জটিল শৈলী স্ট্রিং প্রয়োজন। এখন, আপনি ব্রাউজারটিকে আপনার জন্য কাজ করতে দিতে পারেন। ন্যূনতম গ্রহণযোগ্য ফন্টের আকার (উদাহরণস্বরূপ, একটি শিরোনামের জন্য 1.5rem ), সর্বাধিক আকার (যেমন 3rem ) এবং আদর্শ আকার (যেমন 5vw ) সেট করুন। এখন আপনার কাছে টাইপোগ্রাফি রয়েছে যা পৃষ্ঠার ভিউপোর্ট প্রস্থের সাথে স্কেল করে যতক্ষণ না এটি সীমিত সর্বনিম্ন এবং সর্বাধিক মানগুলিতে পৌঁছায়, খুব কম কোড ব্যবহার করে:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

আরও সম্পদ

• MDN-এ CSS মান এবং ইউনিট
• CSS মান এবং ইউনিট লেভেল 4 স্পেক
• অভ্যন্তরীণ-উপাদান প্রস্থের উপর সিএসএস ট্রিক্স নিবন্ধ
• min(), max(), clamp() ওভারভিউ আহমদ শাদেদ

আনস্প্ল্যাশে @yer_a_wizard থেকে কভার চিত্র।