‏بازی با Gap Decorations؛ خط‌کشی توی فاصله‌های CSS

تمانی عفیف تو این مقاله سراغ یه قابلیت نسبتاً تازهٔ CSS می‌ره: Gap Decorations. همون‌طور که از اسمش پیداست، بهت اجازه می‌ده فاصله‌ها (gap) رو تو انواع لِی‌اوت — فلکس‌باکس، گرید و مالتی‌کالمن — تزئین کنی و با چند خط کد، خط‌های جداکننده بین المان‌ها بذاری. به گفتهٔ نویسنده، موقع نوشتن مقاله فقط Chrome و Edge از این قابلیت‌ها پشتیبانی کامل دارن.

پایه‌ش خیلی سرراسته: یه گرید معمولی بگیر و بهش rule بده. سینتکسش هم شبیه border ـه:

.grid {
  /* basic grid setup... + */
  gap: 20px;
  rule: 4px solid darkred;
}

تو فلکس‌باکس هم می‌شه فقط منطق ستون رو تعریف کرد (column-rule) تا بین آیتم‌ها خط جداکننده بیفته. نویسنده می‌گه همین کارِ ساده، چیزیه که قبلاً کد پیچیده می‌خواست — و بعد تصمیم می‌گیره قابلیت رو به روش خودش، یعنی «هکی»، تا ته فشار بده.

اولین ترفند، زیرخط فانتزیـه: یه h1 رو display: grid می‌کنی، بهش gap و rule می‌دی و یه سودوالمان ::after با محتوای خالی اضافه می‌کنی. حالا گرید دو آیتم داره (متن و سودوالمان)، پس بینشون یه gap هست و همون gap با rule تزئین می‌شه — نتیجه یه زیرخط. سؤال منطقی اینه که چرا به‌جاش border-bottom نزنیم؟ جوابش rule-inset ـه: با مقدار مثبت خط رو از دو طرف کوتاه می‌کنی (زیرخط ناقص)، با مقدار منفی درازترش می‌کنی، و با دو مقدار هر طرف رو جدا کنترل می‌کنی. تنها ایرادش اینه که درصد عملاً جواب نمی‌ده و تو بیشتر حالت‌ها به صفر resolve می‌شه.

یه نکتهٔ گیج‌کننده که نویسنده روش تأکید می‌کنه: نقش rule-width و rule-inset به جهت gap بستگی داره. وقتی gapها عمودی‌ان، خط‌ها افقی می‌شن و ضخامت (ارتفاع) خط با rule کنترل می‌شه و rule-inset عرض رو تعیین می‌کنه. وقتی gapها افقی می‌شن، خط‌ها عمودی می‌شن، rule-width عرض رو می‌ده و rule-inset ارتفاع رو. چون درصد در دسترس نیست، برای محاسبه از واحد lh (ارتفاع خط متن) استفاده می‌کنه تا مثلاً یه خط افقی نازک از دل یه بلوک ضخیم دربیاره.

بخش سرگرم‌کننده‌تر، الگوهای پس‌زمینهست: یه گرید تمام‌صفحه با auto-fill می‌سازه، بهش gap و rule می‌ده و کل صفحه پر از خط می‌شه. بعد نشون می‌ده که rule-width و rule-color می‌تونن چند مقداری باشن و الگو تکرار می‌شه — مثلاً دو خط 1px بعد یه خط 3px — و حتی می‌شه از تابع repeat() آشنای گرید هم استفاده کرد، یا با rule-style بعضی خط‌ها رو dashed کرد. پراپرتی rule-break هم با مقدار intersection تقاطع خط‌ها رو خاموش می‌کنه و به‌جای یه خط ممتد، کلی خط کوتاه با فاصله‌های ریز می‌ده.

کاربرد عملی‌تر، جداکنندهٔ ریسپانسیو لیستـه: خط فقط بین دو آیتم مجاور میاد و هیچ‌وقت اول یا آخر ردیف نمی‌شینه — همون رفتاری که قبلاً با هک به دستش می‌آوردیم. با ترکیب column-rule و rule-inset می‌شه خط رو افقی کرد، و اگه استایل رو dotted بذاری، مرورگر چند نقطه می‌کشه. برای اینکه فقط یک نقطه بیفته، باید فضای رزروشدهٔ تزئین دقیقاً مربع باشه؛ یعنی ارتفاع خط برابر قطر نقطه:

ul {
  --s: .5em; /* the dot size */

  column-rule: var(--s) dotted purple;
  rule-inset: calc(0.5lh - var(--s)/2);
}

نویسنده آخرش صادقانه می‌گه بیشتر این کارها با ابزارهای جاافتاده مثل گرادیان، سودوالمان یا border-image هم شدنیه و قصدش جایگزینی اونا نیست؛ این یه تمرین سرگرم‌کننده برای شناختن قابلیت جدید بوده. به گفتهٔ اون بهترین راه کشف یه فیچر تازه، همین بیرون‌زدن از چارچوب و هک‌کردنشه — شاید بعضی از همین ایده‌ها فردا به ترفندهای رایج تبدیل بشن.

نکات کلیدی:

• Gap Decorations با پراپرتی rule (شبیه border) فاصله‌های گرید، فلکس‌باکس و مالتی‌کالمن رو تزئین می‌کنه
• rule-inset طول خط رو کم/زیاد می‌کنه؛ درصد تقریباً هیچ‌وقت اون‌طور که می‌خوای کار نمی‌کنه
• نقش rule-width و rule-inset بسته به افقی یا عمودی بودن gap جابه‌جا می‌شه
• rule-width/rule-color/rule-style چندمقداری‌ان و با repeat() می‌شه الگو ساخت؛ rule-break: intersection تقاطع خط‌ها رو حذف می‌کنه
• با dotted و تنظیم اندازه به کمک واحد lh می‌شه جداکنندهٔ تک‌نقطه‌ای ساخت
• فعلاً پشتیبانی کامل فقط تو Chrome و Edge