‏درست‌کردن لایوت full-bleed در CSS

نویسنده می‌گه لایوت full-bleed (همون که جاش کومو توضیحش داده) رو معمولاً با CSS grid و subgrid می‌شه ساخت، ولی گاهی نمی‌تونی کل صفحه رو گرید کنی. اینجاست که یوتیلیتی کلاس اندی بل به کار میاد که با width: 100vw و margin-left: calc(50% - 50vw) یه بلوک رو تا لبه‌های صفحه پهن می‌کنه.

ولی این روش بی‌عیب نیست. مشکل اینه که واحدهای viewport مشکل کلاسیک اسکرول‌بار رو حل نمی‌کنن. اگه روی macOS یا سیستمی با اسکرول‌بار شناور باشی چیزی نمی‌بینی، ولی روی ویندوز 100vw می‌تونه از عرض واقعی viewport پهن‌تر بشه و چند پیکسل از دو طرف بریده بشه. نویسنده می‌گه با اضافه‌کردن یه بردر یا سایه راحت‌تر دیده می‌شه، و روی مک هم می‌شه با تنظیم «Show scroll bars > Always» این باگ رو تست کرد.

اندی این مشکل رو تا حدی با overflow-x: hidden روی حل می‌کنه. یه راه دیگه هم scrollbar-gutter: stable روی htmlه که همیشه جا برای اسکرول‌بار کلاسیک رزرو می‌کنه، هرچند نویسنده می‌گه اگه اسکرول عمودی لازم نباشه یه‌کم عجیب به نظر میاد.

راه‌حل مدرن‌تری که نویسنده ترجیح می‌ده استفاده از CSS containment ه: بادی (یا هر فرزند با عرض ۱۰۰٪) رو به یه کانتینر تبدیل می‌کنی و واحدهای viewport رو با واحدهای کانتینری عوض می‌کنی. با این کار 100cqi عرض واقعی کانتینر رو بدون احتساب اسکرول‌بار می‌گیره:

body {
  container: body / inline-size;
  overflow-x: clip;
}

.full-bleed {
  inline-size: 100cqi;
  margin-inline-start: calc(50% - 50cqi);
}

نویسنده می‌گه اینجا دیگه مخفی‌کردن overflow ضروری نیست ولی خودش clip رو محض احتیاط می‌ذاره، و از خاصیت‌های منطقی مثل inline-size و margin-inline-start استفاده می‌کنه تا از راست‌به‌چپ (RTL) هم پشتیبانی بشه. یه مشکل باقی می‌مونه: 100cqi فرض می‌کنه بادی مستقیماً والد المان full-bleed ه. اگه کانتینرهای تودرتو داشته باشی این فرض می‌شکنه.

راه‌حل نویسنده برای حالت تودرتو یه ترفند با @propertyه: یه متغیر سفارشی مثل --body-size رو با at-rule تعریف می‌کنی تا مقدارش زمانی که تو کانتینر داخلی ست می‌شه (نه موقع استفاده) حساب بشه، جوری که 100cqi به کانتینر بادی اشاره کنه و full-bleed اون مقدار رو ارث ببره. نویسنده اعتراف می‌کنه فهمیدن این at-rule سخته و برای کانتینرهای بیشتر بهتره یه فرزند مستقیم بادی مثل مقدار --body-size رو ست کنه. در آخر می‌گه چیزی که CSS واقعاً لازم داره یه راه رسمی برای اشاره به یه کانتینر خاص موقع استفاده از واحدهای کانتینریه که پیشنهادش تو csswg مطرح شده ولی هنوز نیومده.

نکات کلیدی:

• یوتیلیتی full-bleed با 100vw روی ویندوز به‌خاطر اسکرول‌بار کلاسیک چند پیکسل از دو طرف رو می‌بره
• راه‌حل‌های موقت: overflow-x: hidden روی بادی یا scrollbar-gutter: stable روی html
• راه‌حل مدرن: بادی رو با container: body / inline-size کانتینر کنی و از 100cqi به‌جای 100vw استفاده کنی
• خاصیت‌های منطقی مثل inline-size و margin-inline-start پشتیبانی RTL رو هم می‌دن
• برای کانتینرهای تودرتو، ترفند @property روی --body-size مقدار درست رو از کانتینر بادی ارث می‌ده