توابع min، max و clamp در CSS

سه تابع جدید که در نگارش چهارم CSS اضافه شده‌اند که می‌توانند حجم کدهای CSS را کاهش دهند و همچنین انجام برخی محاسبات را پیش از این ممکن نبود یا مشکل بود، به آسانی در اختیار طراحان سایت قرار می‌دهند.

این سه تابع min و max و clamp هستند.

تابع min

همان طور که از نام این تابع مشخص است، مقدار خروجی این تابع، کوچکترین مقدار بین پارامترهای ارسال شده است. برای مثال:

عرض عنصر مورد نظر، کمترین عدد بین ۱۰۰ پیکسل و ۱۰em خواهد بود. امکان درج پارامترهای بیشتر نیز وجود دارد.

تابع max

تابع max برای انتخاب بزرگترین عدد کاربرد دارد.

کد بالا ارتفاع عنصر را معادل ۱۰۰درصد فضای موجود قرار می‌دهد و حداقل ارتفاع از ۵۰۰ پیکسل کمتر نخواهد شد.

تابع clamp

این تابع ترکیبی از دو تابع قبل است و سه پارامتر دریافت می‌کند. حداقل، اندازه‌ی استاندارد و حداکثر مقدار مجاز

عرض عنصر مورد نظر بین ۱۰۰ تا ۵۰۰ پیکسل خواهد بود و به طور معمول اگر به محدودیت‌ها برخورد نکند، ۵۰ درصد محاسبه خواهد شد.

نکات دیگر

  • انواع مختلف مقدارهای عددی مثل طول،‌ زاویه و زمان می‌توانند در توابع بالا مورد استفاده باشند.
  • امکان ترکیب توابع بالا به صورت تو در تو و همچنین در ترکیب با سایر توابع ریاضی مثل calc وجود دارد.
  • استفاده از این تابع‌ها هنگامی که در ترکیب با محاسبات دیگر ایجاد حلقه‌های محاسباتی کنند، ممکن است نتیجه‌ی مورد انتظار را نداشته باشد.

پشتیبانی در مرورگرهای مختلف

هرچند این سه تابع اکنون هنوز در مرحله‌ی پیش‌نویس قرار دارند ولی در غالب مرورگرهای مدرن قابل استفاده هستند و می‌توان در طراحی سایت از آن‌ها استفاده نمود.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱