CSS min()، max() و clamp()

با استفاده از این توابع CSS که به خوبی پشتیبانی می شوند، یاد بگیرید که چگونه اندازه عناصر را کنترل کنید، فاصله مناسب را حفظ کنید و تایپوگرافی سیال را پیاده سازی کنید.

از آنجایی که طراحی پاسخگو ظریف تر می شود، CSS به طور مداوم در حال تکامل است تا به نویسندگان کنترل بیشتری بدهد. توابع min() ، max() و clamp() که اکنون در تمام مرورگرهای مدرن پشتیبانی می شوند، از جدیدترین ابزارها برای ایجاد پویایی و پاسخگویی بیشتر وب سایت ها و برنامه های نویسندگی هستند. شما می توانید از این توابع برای کنترل اندازه و تغییر اندازه عناصر، حفظ فاصله بین عناصر و ایجاد تایپوگرافی انعطاف پذیر و روان استفاده کنید.

توابع ریاضی، calc() , min() , max() و clamp() اجازه می دهند عبارات ریاضی با جمع (+)، تفریق (-)، ضرب (*) و تقسیم (/) به عنوان مقادیر مؤلفه استفاده شوند.

مقادیر و واحدهای CSS سطح 4

min()

پشتیبانی مرورگر

  • کروم: 79.
  • لبه: 79.
  • فایرفاکس: 75.
  • سافاری: 11.1.

منبع

max()

پشتیبانی مرورگر

  • کروم: 79.
  • لبه: 79.
  • فایرفاکس: 75.
  • سافاری: 11.1.

منبع

clamp()

پشتیبانی مرورگر

  • کروم: 79.
  • لبه: 79.
  • فایرفاکس: 75.
  • سافاری: 13.1.

منبع

استفاده

شما می توانید از min() ، max() و clamp() در سمت راست هر عبارت CSS که منطقی است استفاده کنید. برای min() و max() یک لیست آرگومان از مقادیر ارائه می کنید و مرورگر تعیین می کند که کدام یک کوچکترین یا بزرگترین است. به عنوان مثال، در مورد width: min(1rem, 50%, 10vw) ، مرورگر محاسبه می کند که کدام یک از این واحدهای نسبی کوچکتر است و از آن مقدار برای عرض عنصر استفاده می کند.

تابع min() حداقل مقدار را از لیستی از گزینه های این نسخه ی نمایشی Codepen انتخاب می کند.

تابع max() همین کار را برای حداکثر مقدار انجام می دهد.

تابع max() یک مقدار را از لیستی از گزینه های این نسخه ی نمایشی Codepen انتخاب می کند.

برای استفاده از 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 اثر رابرت برینگهرست، "هر چیزی از 45 تا 75 کاراکتر به طور گسترده ای به عنوان طول خط رضایت بخش برای یک صفحه تک ستونی در یک صورت متن ردیف شده در اندازه متن در نظر گرفته می شود."

برای اطمینان از اینکه بلاک‌های متنی شما بین 45 تا 75 کاراکتر عرض دارند، از clamp() و واحد ch (0-width character advance ) استفاده کنید:

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

این به مرورگر اجازه می دهد تا عرض پاراگراف را تعیین کند. به طور پیش فرض عرض را روی 50% تنظیم می کند. اگر 50% کوچکتر از 45ch باشد، به جای آن از 45ch به عنوان عرض استفاده می کند و اگر 50% عریض تر از 75ch باشد، از 75ch استفاده می کند.

از تابع clamp() برای تنظیم حداقل و حداکثر عرض استفاده کنید. به نسخه ی نمایشی در Codepen مراجعه کنید.

شما همچنین می توانید این را با استفاده از min() یا max() تقسیم کنید. اگر می خواهید عرض عنصر همیشه 50% باشد و عرض آن در صفحات بزرگتر از 75ch تجاوز نکند، width: min(75ch, 50%); برای تنظیم حداکثر اندازه

از تابع min() برای تنظیم حداکثر عرض استفاده کنید.

به همین ترتیب، می توانید با استفاده از تابع max() حداقل اندازه را برای متن خوانا تنظیم کنید، مانند width: max(45ch, 50%); . در اینجا، مرورگر هر مقداری را که بزرگتر باشد انتخاب می کند، به این معنی که عنصر باید 45ch یا بیشتر باشد.

از تابع max() برای تنظیم حداقل عرض استفاده کنید.

بالشتک را مدیریت کنید

همچنین می توانید از max() برای تنظیم حداقل اندازه padding استفاده کنید. این مثال از CSS Tricks آمده است، جایی که خواننده Caluã de Lacerda Pataca این ایده را به اشتراک گذاشته است: اجازه دهید یک عنصر در اندازه‌های صفحه نمایش بزرگ‌تر دارای بالشتک اضافی باشد، اما در اندازه‌های صفحه نمایش کوچک‌تر، حداقل padding را حفظ کنید. برای انجام این کار، از calc() یا max() استفاده کنید و حداقل padding را از هر دو طرف عنصر کم کنید: calc((100vw - var(--contentWidth)) / 2) یا max(2rem, 50vw - var(--contentWidth) / 2) . در شیوه نامه شما، باید به شکل زیر باشد:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
با استفاده از تابع max() حداقل padding را برای یک جزء تنظیم کنید. به نسخه ی نمایشی در Codepen مراجعه کنید.

تایپوگرافی سیال

برای فعال کردن تایپوگرافی سیال ، Mike Riethmeuller تکنیکی را رایج کرد که از تابع clamp() برای تنظیم حداقل اندازه فونت، حداکثر اندازه فونت و اجازه مقیاس بندی بین آن اندازه ها استفاده می کند.

از clamp() برای ایجاد تایپوگرافی سیال استفاده کنید. به نسخه ی نمایشی در Codepen مراجعه کنید.

قبل از clamp(), طراحی مقیاس فونت به رشته‌های سبک پیچیده نیاز داشت. اکنون می توانید به مرورگر اجازه دهید کار را برای شما انجام دهد. حداقل اندازه قلم قابل قبول (مثلاً 1.5rem برای عنوان)، حداکثر اندازه (مانند 3rem ) و اندازه ایده آل (مانند 5vw ) را تنظیم کنید. اکنون تایپوگرافی دارید که با استفاده از کد بسیار کمی، با عرض نمای صفحه تا زمانی که به مقادیر محدود کننده حداقل و حداکثر برسد، مقیاس می شود:

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

منابع بیشتر

تصویر جلد از @yer_a_wizard در Unsplash.