CSS min(), max() এবং clamp()

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

Una Kravets

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

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

CSS ভ্যালু ও ইউনিট লেভেল ৪

ব্রাউজার সহায়তা

min()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

max()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

ব্যবহার

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

min() ফাংশন এই Codepen ডেমো-তে বিকল্পের তালিকা থেকে ন্যূনতম ভ্যালু বেছে নেয়।

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

এই Codepen ডেমো-তে max() ফাংশন বিকল্পের তালিকা থেকে একটি ভ্যালু বেছে নেয়।

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

clamp() ফাংশনটি এই Codepen ডেমো-তে নির্দিষ্ট করা ন্যূনতম এবং সর্বাধিকের মধ্যে এর মান রাখে।

আপনি এইসব ফাংশন যেকোনও জায়গায় ব্যবহার করতে পারবেন যেখানে <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)-এ) ব্যবহার করতে পারবেন।

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

পারফেক্ট প্রস্থ

রবার্ট ব্রিংহার্স্টের লেখা The Elements of Typographic Style বই অনুযায়ী, "৪৫ থেকে ৭৫টি অক্ষরের মধ্যে যেকোনও সংখ্যাকে সেরিফ টেক্সট ফেসের টেক্সট সাইজে সেট করা সিঙ্গল-কলাম পেজের জন্য লাইনের সন্তোষজনক দৈর্ঘ্য হিসেবে ব্যাপকভাবে বিবেচনা করা হয়।"

আপনার টেক্সট ব্লক যাতে ৪৫ থেকে ৭৫টি অক্ষরের মধ্যে থাকে তা নিশ্চিত করতে, clamp() এবং ch (০-প্রস্থ অক্ষর অ্যাডভান্স) ইউনিট ব্যবহার করুন:

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

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

সর্বনিম্ন ও সর্বাধিক প্রস্থ সেট করতে clamp() ফাংশন ব্যবহার করুন। Codepen-এ ডেমো দেখুন।

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

সর্বাধিক প্রস্থ সেট করতে min() ফাংশন ব্যবহার করুন।

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

সর্বনিম্ন প্রস্থ সেট করতে max() ফাংশন ব্যবহার করুন।

প্যাডিং ম্যানেজ করুন

এছাড়াও, আপনি 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);
}
max() ফাংশন ব্যবহার করে কোনও কম্পোনেন্টের জন্য ন্যূনতম প্যাডিং সেট করুন। Codepen-এ ডেমো দেখুন।

ফ্লুইড টাইপোগ্রাফি

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

ফ্লুইড টাইপোগ্রাফি তৈরি করতে clamp() ব্যবহার করুন। Codepen-এ ডেমো দেখুন।

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

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

আরও রিসোর্স