‏پس‌زمینهٔ pattern بدون بریدگی با calc-size() و round()

احمد شدید تو این مقاله سراغ یه مشکل آشنای CSS می‌ره: یه section که پس‌زمینه‌ش یه pattern تکراریه (یعنی یه تصویر کوچیک که افقی و عمودی پشت هم تکرار می‌شه). وقتی ارتفاع section مضرب ارتفاع هر tile نباشه، ردیف آخر pattern نصفه بریده می‌شه و ظاهرش خوب نیست.

اولین راهی که به ذهن نویسنده رسید مقدار round برای background-repeat بود. این کار جواب می‌ده، ولی نویسنده ازش راضی نیست، چون round خود pattern رو کوچیک یا بزرگ می‌کنه تا تو فضا جا بشه. یعنی اندازهٔ tile دیگه ثابت نمی‌مونه و با تغییر محتوا مدام عوض می‌شه.

راه‌حل بهتر ترکیب calc-size() و round() ـه. calc-size() اجازه می‌ده روی ارتفاع auto (یعنی همون ارتفاعی که محتوا خودش می‌گیره) حساب‌وکتاب کنی. بعد round() اون عدد رو به نزدیک‌ترین مضرب ارتفاع tile گرد می‌کنه:

.section {
  --tile-height: 44px;
  height: calc-size(auto, round(up, size, var(--tile-height)));
}

به گفتهٔ نویسنده این کد در نگاه اول شبیه یه ارتفاع ثابته، ولی در عمل مثل min-height رفتار می‌کنه: اول ارتفاع auto رو حساب می‌کنه و بعد اونو گرد می‌کنه. پس با هر اندازه pattern کار می‌کنه و فقط کافیه ارتفاع tile رو بدی. به‌جای up می‌شه down هم گذاشت؛ نویسنده down رو ترجیح می‌ده چون بی‌دلیل ارتفاع رو زیاد نمی‌کنه.

برای padding عمودی هم همین ترفند به کار میاد: padding-block: round(up, 1rem, var(--tile-height)) باعث می‌شه padding بالا و پایین دقیقاً یه tile بشه. نویسنده می‌گه اینجا گرد کردن به پایین حس عجیبی داره، چون محتوا زیادی به لبه می‌چسبه، پس برای padding بهتره up بمونه. یه محدودیت مهم هم هست: calc-size() فعلاً فقط تو Chrome و Edge پشتیبانی می‌شه و Firefox و Safari هنوز ازش پشتیبانی نمی‌کنن.

نکات کلیدی:

• background-repeat: round بریدگی رو برطرف می‌کنه ولی اندازهٔ pattern رو کش میده.
• calc-size(auto, round(up, size, var(--tile-height))) ارتفاع رو به مضرب ارتفاع tile گرد می‌کنه.
• این ارتفاع مثل min-height رفتار می‌کنه، نه یه عدد ثابت.
• برای padding گرد کردن با up نتیجهٔ طبیعی‌تری میده.
• calc-size() الان فقط تو Chrome و Edge کار می‌کنه و Baseline نیست.