توابع min، max و clamp در CSS
سه تابع جدید که در نگارش چهارم CSS اضافه شده‌اند که می‌توانند حجم کدهای CSS را کاهش دهند و همچنین انجام برخی محاسبات را پیش از این ممکن نبود یا مشکل بود، به آسانی در اختیار طراحان سایت قرار می‌دهند.
این سه تابع min و max و clamp هستند.
تابع min
همان طور که از نام این تابع مشخص است، مقدار خروجی این تابع، کوچکترین مقدار بین پارامترهای ارسال شده است. برای مثال:
|
1 |
width: min( 100px, 10em ); |
عرض عنصر مورد نظر، کمترین عدد بین ۱۰۰ پیکسل و ۱۰em خواهد بود. امکان درج پارامترهای بیشتر نیز وجود دارد.
تابع max
تابع max برای انتخاب بزرگترین عدد کاربرد دارد.
|
1 |
height: max( 100%, 500px ); |
کد بالا ارتفاع عنصر را معادل ۱۰۰درصد فضای موجود قرار می‌دهد و حداقل ارتفاع از ۵۰۰ پیکسل کمتر نخواهد شد.
تابع clamp
این تابع ترکیبی از دو تابع قبل است و سه پارامتر دریافت می‌کند. حداقل، اندازه‌ی استاندارد و حداکثر مقدار مجاز
|
1 |
width: clamp( 100px, 50%, 500px ); |
عرض عنصر مورد نظر بین ۱۰۰ تا ۵۰۰ پیکسل خواهد بود و به طور معمول اگر به محدودیت‌ها برخورد نکند، ۵۰ درصد محاسبه خواهد شد.
نکات دیگر
- انواع مختلف مقدارهای عددی مثل طول، زاویه و زمان می‌توانند در توابع بالا مورد استفاده باشند.
- امکان ترکیب توابع بالا به صورت تو در تو و همچنین در ترکیب با سایر توابع ریاضی مثل calc وجود دارد.
- استفاده از این تابع‌ها هنگامی که در ترکیب با محاسبات دیگر ایجاد حلقه‌های محاسباتی کنند، ممکن است نتیجه‌ی مورد انتظار را نداشته باشد.
پشتیبانی در مرورگرهای مختلف
هرچند این سه تابع اکنون هنوز در مرحله‌ی پیش‌نویس قرار دارند ولی در غالب مرورگرهای مدرن قابل استفاده هستند و می‌توان در طراحی سایت از آن‌ها استفاده نمود.
minmax رو چرا نگفتید پس ؟ سپاس
با سلام
تابع minmax فقط برای گریدها کاربرد دارد و با چند تابع بالا به صورت عمومی برای ویژگی‌های مختلف استفاده می‌شود فرق می‌کند