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

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

Una Kravets

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

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

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

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

min()

max()

clamp()

استفاده

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

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

برای استفاده از clamp() سه مقدار وارد کنید: یک مقدار حداقل، یک مقدار ایده آل برای محاسبه و یک مقدار حداکثر.

می‌توانید از این توابع در هر جایی که <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 استفاده می کند.

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

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

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

همچنین می توانید از 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);
}

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

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

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

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

منابع بیشتر

• مقادیر و واحدهای CSS در MDN
• مقادیر و واحدهای CSS سطح 4 مشخصات
• مقاله ترفندهای CSS در مورد عرض عنصر داخلی
• min(), max(), clamp() بررسی اجمالی توسط احمد شادید

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