‏حالا می‌شه فاصلهٔ بین آیتم‌ها رو تو CSS استایل داد

تیم‌های Microsoft Edge و Google Chrome با همکاری هم قابلیت CSS gap decorations رو از نسخهٔ ۱۴۹ کروم و اج به‌صورت پیش‌فرض و بدون نیاز به فلگ در دسترس گذاشتن. حالا می‌تونی فاصلهٔ بین آیتم‌های grid، flexbox و چیدمان‌های چندستونی رو مستقیم استایل بدی، بدون این‌که سراغ border یا شبه‌المان بری.

تو مقاله اومده که استایل‌دادن به این فاصله‌ها همیشه دردسر داشته. راه‌حل‌های قدیمی مثل border روی هر آیتم یا شبه‌المان، به ساختار مارک‌آپ وابسته بودن، المان‌های اضافی به درخت دسترس‌پذیری اضافه می‌کردن، نگه‌داری‌شون سخت بود و با گره‌های DOM بیشتر به کارایی هم ضربه می‌زدن. پراپرتی column-rule قبلاً فقط برای چیدمان چندستونی کار می‌کرد.

حالا grid و flexbox هم column-rule رو می‌پذیرن و یه پراپرتی جدید به اسم row-rule برای فاصله‌های افقی اضافه شده. هر دو همون شکل کوتاه عرض، استایل و رنگ رو قبول می‌کنن، و با شورت‌هند rule می‌تونی هر دو رو با هم تنظیم کنی. این تزئین‌ها کاملاً بصری‌ان و رو چیدمان فعلی اثری ندارن.

.flex-split {
  column-rule-width: 2px;
  column-rule-style: dashed, solid;
  column-rule-color: #d4d0c8;
}

فقط همینم نیست؛ کنترل‌های دقیق‌تری هم اضافه شده. با column-rule-break و row-rule-break می‌تونی تعیین کنی خط‌ها سر تقاطع‌ها چی‌کار کنن: با مقدار none پیوسته رد می‌شن و با intersection همون‌جا که خط‌های سطر و ستون همدیگه رو قطع می‌کنن می‌شکنن. عرض، رنگ و inset خط‌ها هم قابل انیمیشن‌ان، مثلاً می‌تونی روی hover رنگشون رو عوض کنی.

سینتکس repeat() هم پشتیبانی می‌شه، درست مثل چیزی که تو تعریف track گرید هست، تا بتونی استایل خط‌ها رو بین فاصله‌های مختلف به‌شکل کوتاه متفاوت کنی. علاوه‌بر این column-rule-inset و row-rule-inset تعیین می‌کنن خط چقدر داخل فاصله کشیده بشه، و *-visibility-items کنترل می‌کنه خط فقط بین آیتم‌های مجاور دیده بشه یا تو همهٔ فاصله‌ها حتی خالی‌ها.

تو مقاله اومده که اگه از زمان دورهٔ آزمایشی توسعه‌دهنده (کروم ۱۳۹) این قابلیت رو امتحان کردی، بعضی اسم پراپرتی‌ها عوض شدن؛ مثلاً column-rule-outset و row-rule-outset شدن column-rule-inset و row-rule-inset. چون این تزئین‌ها صرفاً بصری‌ان، یه بهبود تدریجی حساب می‌شن: تو مرورگرهای بدون پشتیبانی، فاصله‌ها عادی رندر می‌شن و خبری از خط نیست، و یه polyfill هم در حال ساخته شدنه.

نکات کلیدی:

• از کروم و اج نسخهٔ ۱۴۹، gap decorations پایدار و بدون فلگ در دسترسه
• column-rule حالا به grid و flexbox هم اومده و row-rule برای خط‌های افقی اضافه شده
• جایگزین border و شبه‌المان می‌شه و به دسترس‌پذیری و کارایی ضربه نمی‌زنه
• با rule-break، rule-inset و rule-visibility-items کنترل دقیق داری
• عرض، رنگ و inset قابل انیمیشن‌ان و سینتکس repeat() پشتیبانی می‌شه