توابع کاربردی CSS؛ calc()، min()، max() و clamp() | درس 46 + پروژه درس

در این درس یک صفحه می سازیم که عرض محتوا، فاصله کارت ها و اندازه تیتر آن با عرض نمایشگر تغییر می کند. هر اندازه یک قاعده روشن دارد: عرض محتوا سقف دارد، فاصله داخلی کارت ها کف دارد و تیتر بین دو کران حرکت می کند. چهار تابع calc()، min()، max() و clamp() این تصمیم ها را مستقیم در CSS بیان می کنند.

چه زمانی از هر تابع استفاده کنیم؟

• calc(): وقتی باید مقداری را محاسبه کنیم، مثلا کم کردن دو حاشیه از عرض موجود.
• min(): وقتی مقدار کوچک تر را می خواهیم، مثلا سقف عرض محتوا.
• max(): وقتی مقدار بزرگ تر را می خواهیم، مثلا کف فاصله داخلی.
• clamp(): وقتی یک مقدار ترجیحی باید میان حداقل و حداکثر بماند.

قبل از انتخاب تابع، مشخص کنید درصد از چه چیزی به دست می آید. در مثال عرض پروژه، درصد به عرض ظرف دربرگیرنده مربوط است؛ اما vw به عرض ناحیه دید مرورگر وابسته است. برای مرور این تفاوت، درس واحدهای px، درصد، em و rem را ببینید.

calc: عرض موجود منهای دو حاشیه

اگر پوسته صفحه در موبایل به اندازه کل ظرف باشد، محتوا به لبه ها می چسبد. با کسر دو برابر حاشیه از عرض ظرف، فضای هر دو طرف باقی می ماند. سپس margin-inline: auto پوسته را وسط قرار می دهد. از متغیرهایی که در درس 45 درباره سیستم رنگ و اندازه یاد گرفتیم، برای نام گذاری حاشیه و سقف عرض استفاده می کنیم.

:root {
  --gutter: 1rem;
  --content-max: 68rem;
}
.shell {
  width: min(var(--content-max), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

در عبارت بالا، 2 یک عدد بدون واحد است که در طول حاشیه ضرب می شود. سپس حاصل از عرض نسبی ظرف کم می شود. دور علامت های جمع و تفریق فاصله بگذارید؛ برای نمونه calc(100% - 2rem) معتبر است. نتیجه محاسبه باید برای ویژگی مقصد معتبر باشد؛ مثلا جمع زمان و طول در ویژگی عرض معنی ندارد.

فرض کنید عرض ظرف 320px و اندازه ریشه 16px است. عرض قابل استفاده پس از کسر دو حاشیه 288px خواهد بود. اگر عنصر padding یا border داشته باشد، شیوه محاسبه عرض نهایی به box-sizing بستگی دارد؛ در پروژه برای همه عناصر border-box گذاشته ایم. جزئیات این رفتار در درس مدل جعبه CSS آمده است.

min: سقف عرض بدون از دست دادن حاشیه

تابع min() در کد بالا بین 68rem و عرض باقی مانده انتخاب می کند. در پنجره کوچک، عرض باقی مانده کمتر است؛ در پنجره بزرگ، 68rem کمتر است و جلوی کشیده شدن پوسته را می گیرد. اگر اندازه ریشه 16px باشد، سقف عرض 1088px است. در ظرفی با عرض 1440px، حاصل تفریق 1408px است و تابع همان 1088px را انتخاب می کند.

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

max: کف فاصله داخلی کارت

.cards article {
  padding: max(1rem, 2vw);
}

با اندازه ریشه 16px، در عرض 320px مقدار 2vw برابر 6.4px است. تابع مقدار بزرگ تر یعنی 16px را برمی گرداند. در عرض 1440px، مقدار 2vw برابر 28.8px است و فاصله داخلی به همان اندازه رشد می کند. اسم max گاهی گمراه کننده است: تابع مقدار بزرگ تر را انتخاب می کند، پس در این مثال 1rem نقش حداقل را دارد.

این فرمول سقف ندارد. اگر می خواهید فاصله در نمایشگرهای خیلی بزرگ از 2rem بیشتر نشود، clamp(1rem, 2vw, 2rem) جایگزین مناسبی است. از خودتان بپرسید آیا رشد اندازه در کل بازه مفید است یا پس از یک نقطه فقط فضای محتوا را مصرف می کند.

clamp: رشد تیتر بین دو حد

h1 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  line-height: 1.35;
}

در این مثال حداقل 1.75rem و حداکثر 3rem است. مرورگر ابتدا اندازه ترجیحی را محاسبه می کند. با ریشه 16px و عرض 320px، مقدار ترجیحی 26.4px است و تیتر روی حداقل 28px می ماند. در عرض 768px، مقدار ترجیحی 35.36px است و همان اعمال می شود. در عرض 1440px، مقدار ترجیحی 48.8px است و تیتر روی حداکثر 48px می ایستد.

جمع داخل مقدار ترجیحی به calc() جداگانه نیاز ندارد. حداقل را بزرگ تر از حداکثر نگذارید؛ اگر کران ها برعکس تعریف شوند، clamp آن ها را جابه جا نمی کند و کران حداقل غالب می شود. برای متن، مقدار ترجیحی را تنها به vw وابسته نکنید. ترکیب rem و vw نقطه شروع بهتری است، ولی تضمین دسترس پذیری نیست: با بزرگ نمایی 200 درصد و عنوان بلند، بررسی کنید تیتر بریده نشود و محتوا قابل استفاده بماند. برای جزئیات بیشتر درس فونت و رسانه واکنش گرا را مرور کنید.

min داخل Grid: کارت در ظرف باریک جا شود

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

در درس شبکه کارت ها با CSS Grid یاد گرفتیم که minmax() بازه اندازه ستون را مشخص می کند. اینجا min(100%, 16rem) اجازه می دهد حداقل ستون در ظرف باریک از 16rem پایین تر بیاید. وقتی برای چند ستون و فاصله بین آن ها جا وجود دارد، Grid کارت ها را کنار هم می گذارد. متن های بلند و بدون فاصله را هم جداگانه آزمایش کنید؛ اندازه ستون به تنهایی تضمین نمی کند که محتوای داخل آن بیرون نزند.

این توابع برای تغییر تدریجی اندازه مفیدند. اگر نوع چیدمان، ترتیب اجزا یا رفتار منو باید در یک عرض مشخص عوض شود، هنوز ممکن است به مدیا کوئری نیاز داشته باشید. نمونه تصمیم گیری را در درس طراحی واکنش گرا و Mobile First دنبال کنید.

آزمایش پروژه: مقدار محاسبه شده را ببینید

1. فایل ZIP را استخراج کنید و index.html را باز کنید. پروژه بدون اینترنت اجرا می شود.
2. در عرض های 320، 768 و 1440 پیکسل، در بخش Computed ابزار توسعه عرض پوسته، اندازه تیتر و padding کارت را ببینید. اعداد نمونه این درس اندازه ریشه 16px را فرض می کنند.
3. در style.css مقدار --gutter را از 1rem به 1.5rem تغییر دهید. در عرض کم، عرض پوسته 1rem کمتر می شود؛ در عرضی که سقف 68rem هنوز محدود کننده است، عرض پوسته تغییر نمی کند.
4. برای دیدن نقش کران، مقدار ترجیحی تیتر را موقتا زیاد کنید. اگر اندازه تیتر از 3rem عبور نکرد، حداکثر درست عمل کرده است. بعد مقدار اولیه را برگردانید.
5. عنوان را بلندتر کنید و صفحه را در بزرگ نمایی 200 درصد و عرض کم بررسی کنید. با Tab به لینک تمرین بروید و دیده شدن نشانگر فوکوس را امتحان کنید.

تمرین: فاصله داخلی کادر با دو کران

فاصله داخلی کادر تمرین اکنون 1rem است. آن را طوری تغییر دهید که حداقل 1rem، مقدار ترجیحی 4vw و حداکثر 2rem باشد. فقط قاعده .practice را تغییر دهید. با ریشه 16px، نتیجه در عرض 320px برابر 16px، در عرض 600px برابر 24px و در عرض 1000px برابر 32px است. فاصله کارت ها باید همچنان از قاعده مستقل خودشان پیروی کند.

پاسخ در solution.css آماده است و از ابتدا فعال نیست. بعد از تلاش خودتان، خط زیر را بعد از لینک style.css بگذارید و عرض های نمونه را دوباره بررسی کنید.

<link rel="stylesheet" href="solution.css">

پرسش های متداول

فرق min و max با min-width و max-width چیست؟

دو مورد اول تابع انتخاب مقدار هستند و در ویژگی هایی مثل width یا padding به کار می روند. دو مورد دوم ویژگی های مستقل CSS برای محدود کردن عرض هستند.

چرا عدد محاسبه شده با مثال فرق دارد؟

اندازه قلم ریشه، عرض واقعی ظرف یا عرض ناحیه دید را بررسی کنید. در مثال های این درس فرض کردیم اندازه ریشه 16px است و عرض ظرف با مقدار اعلام شده برابر است.

آیا clamp همیشه به اندازه متوسط می رسد؟

خیر. ورودی وسط مقدار ترجیحی است و میانگین کران ها محسوب نمی شود. اگر از بازه خارج شود، کران مربوط اعمال می شود.

برای جزئیات نحوی، مرجع clamp در MDN را ببینید.

درس قبلی: متغیرهای CSS و ساخت سیستم رنگ و اندازه

درس بعدی: سایه ها، فیلترها و جلوه های بصری CSS | درس 47