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

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

Una Kravets

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

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

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

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

min()

Browser Support

• 79
• 79
• 75
• 11.1

Source

max()

Browser Support

• 79
• 79
• 75
• 11.1

Source

clamp()

Browser Support

• 79
• 79
• 75
• 13.1

Source

کاربرد

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

توجه: هنگام استفاده از محاسبه در تابع min()، max()، یا clamp()، نیازی به فراخوانی calc()‎ ندارید. برای مثال، font-size: max(calc(0.5vw - 1em), 2rem) همانند font-size: max(0.5vw - 1em, 2rem) است.

در زیر چند نمونه از نحوه استفاده از این توابع آورده شده است.

عرض بی‌نقص

طبق کتاب The Elements of Typographic Style نوشته رابرت برینگهورست، «هر چیزی از ۴۵ تا ۷۵ نویسه به‌طور گسترده به‌عنوان طول خط رضایت‌بخش برای صفحه تک‌ستونی تنظیم‌شده در قلم سریف‌دار در اندازه نوشتار درنظر گرفته می‌شود.»

برای اطمینان از اینکه عرض بلوک‌های نوشتاری شما بین ۴۵ تا ۷۵ نویسه باقی می‌ماند، از clamp() و واحد ch (پیشروی نویسه با عرض صفر) استفاده کنید:

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

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

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

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

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

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

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

مدیریت حاشیه داخلی

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

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

بااستفاده از تابع()max، حداقل حاشیه داخلی را برای مؤلفه تنظیم کنید. نسخه نمایشی را در Codepen ببینید.

نویسه‌نگاری سیال

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

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

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

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

هشدار: محدود کردن حداکثر اندازه قلم بااستفاده از max() یا clamp() می‌تواند باعث عدم انطباق با WCAG تحت 1.4.4 تغییر اندازه نوشتار (AA) شود، زیرا ممکن است مانع از تغییر مقیاس نوشتار توسط کاربران به ۲۰۰٪ اندازه اصلی آن شود. حتماً نتایج را با بزرگ‌نمایی آزمایش کنید.

منابع بیشتر

• مقادیر و واحدهای CSS در MDN
• مشخصات سطح ۴ واحدها و مقادیر CSS
• مقاله ترفندهای CSS درباره عرض عنصر داخلی
• نمای کلی min()‎،‏ max()‎،‏ clamp()‎ از احمد شدید