توابع min، max و clamp در CSS
CSS همیشه در حال تکامل بوده و ویژگیهای جدیدی را به خود اضافه میکند تا کار طراحان و توسعهدهندگان را آسانتر کند. سه تابع بسیار کاربردی به نامهای min()، max() و clamp() از جمله این پیشرفتهای مدرن هستند که در سالهای اخیر به استانداردهای CSS اضافه شدهاند و اکنون به طور گسترده در پروژههای حرفهای استفاده میشوند.
این توابع به طراحان اجازه میدهند تا اندازهها، فواصل و ابعاد عناصر صفحه را به شکلی هوشمندانه و انعطافپذیر کنترل کنند. پیش از وجود آنها، ایجاد طرحهایی که به خوبی با اندازههای مختلف صفحهنمایش (از موبایل تا دسکتاپ) سازگار باشند، بسیار دشوار و پرزحمت بود و اغلب نیاز به کدهای پیچیده جاوااسکریپت یا تنظیمات دستی متعدد داشت.
اما با min()، max() و clamp()، این کارها حالا به سادگی و فقط با چند خط کد CSS امکانپذیر شده است.
تابع min
همان طور که از نام این تابع مشخص است، مقدار خروجی این تابع، کوچکترین مقدار بین پارامترهای ارسال شده است. برای مثال:
|
1 |
width: min( 100px, 10em ); |
عرض عنصر مورد نظر، کمترین عدد بین ۱۰۰ پیکسل و ۱۰em خواهد بود. امکان درج پارامترهای بیشتر نیز وجود دارد.
تابع max
تابع max برای انتخاب بزرگترین عدد کاربرد دارد.
|
1 |
height: max( 100%, 500px ); |
کد بالا ارتفاع عنصر را معادل ۱۰۰درصد فضای موجود قرار میدهد و حداقل ارتفاع از ۵۰۰ پیکسل کمتر نخواهد شد.
تابع clamp
این تابع ترکیبی از دو تابع قبل است و سه پارامتر دریافت میکند. حداقل، اندازهی استاندارد و حداکثر مقدار مجاز
|
1 |
width: clamp( 100px, 50%, 500px ); |
عرض عنصر مورد نظر بین ۱۰۰ تا ۵۰۰ پیکسل خواهد بود و به طور معمول اگر به محدودیتها برخورد نکند، ۵۰ درصد محاسبه خواهد شد.
جایگزین clamp
تابع clamp میتواند با دو min و max تو در تو نیز شبیهسازی شود. به مثال زیر دقت کنید:
|
1 2 3 4 5 6 7 8 9 |
/* حالت اول */ h1 { font-size: clamp( 18px, 5vw, 48px ); } /* حالت دوم */ h1 { font-size: min( 48px, max( 18px, 5vw ) ); } |
هر دو کد بالا یک نتیجه را به دست میدهند. اولی سادهتر است و درک آن آسانتر است. یکی از اصول برنامهنویسی این است که همیشه کدها را به شکلی بنویسید که فهم و تغییر دادن آن در آینده آسانتر باشد.
نکات دیگر
- انواع مختلف مقدارهای عددی مثل طول، زاویه و زمان میتوانند در توابع بالا مورد استفاده باشند.
- امکان ترکیب توابع بالا به صورت تو در تو و همچنین در ترکیب با سایر توابع ریاضی مثل calc وجود دارد.
- استفاده از این تابعها هنگامی که در ترکیب با محاسبات دیگر ایجاد حلقههای محاسباتی کنند، ممکن است نتیجهی مورد انتظار را نداشته باشد.
پشتیبانی در مرورگرهای مختلف
هرچند این سه تابع اکنون هنوز در مرحلهی پیشنویس قرار دارند ولی در غالب مرورگرهای مدرن قابل استفاده هستند و میتوان در طراحی سایت از آنها استفاده نمود.
minmax رو چرا نگفتید پس ؟ سپاس
با سلام
تابع minmax فقط برای گریدها کاربرد دارد و با چند تابع بالا به صورت عمومی برای ویژگیهای مختلف استفاده میشود فرق میکند