‏flow-start و flow-end: کلمه‌های تازهٔ هم‌ترازی تو CSS

طبق CSS Box Alignment Level 3، دو کلمهٔ کلیدی تازهٔ flow-start و flow-end به CSS اضافه شده. این‌ها نام مستعار (alias) همون flex-start و flex-end هستن، یعنی تو مرورگری که پشتیبانی کنه، کد زیر دقیقاً مثل justify-content: flex-end آیتم‌ها رو به انتهای container می‌بره. فایدهٔ اصلیش اینه که حالا همین کلمه‌ها تو grid lanes (اسم جدید masonry تو CSS) هم قابل استفاده‌ان.

.box {
  display: flex;
  justify-content: flow-end;
}

Rachel Andrew تو این پست می‌گه این اولین بار نیست. ویژگی gap اولش grid-gap بود و فقط برای grid ساخته شده بود، ولی بعداً عمومی شد. اگه توسعه‌دهنده‌ها قبل از تغییر از اسم قدیمی استفاده کرده باشن، اون اسم برای همیشه به‌عنوان alias می‌مونه تا وب خراب نشه؛ برای همین grid-gap هنوز کار می‌کنه. به گفتهٔ نویسنده، آینده رو همیشه نمی‌شه دید و گاهی محدود کردن یه ویژگی به یه نوع چیدمان واقعاً مفیده.

تو جلسه‌های CSS Working Group در TPAC دوبلین چند مورد از همین جنس بررسی شد. اولیش reading-flow بود، ویژگی‌ای که ترتیب فوکوس آیتم‌ها (یعنی ترتیبی که با Tab بینشون جابه‌جا می‌شی) رو تو grid، flex و block کنترل می‌کنه. برای grid lanes دو مقدار مخصوص grid-lanes-flow و grid-lanes-track تصویب شد. نویسنده می‌گه مقدارهای مشترک گیج‌کننده می‌شدن، چون مثلاً فقط grid هم سطر داره هم ستون.

یه دلیل دیگه برای مقدارهای جدا اینه که reading-flow با ترتیب فوکوس ور می‌ره و باید با دقت استفاده بشه. نویسنده می‌گه بیشتر چیدمان‌های grid اصلاً بهش نیاز ندارن، چون ترتیب HTML معمولاً بهترین ترتیب فوکوسه. این اصطکاک کوچیک جلوی این رو می‌گیره که کسی بی‌فکر یه ترتیب «بصری» رو برای کل سایت روشن کنه.

مورد دوم subgrid تو grid lanes بود. grid lanes یه مقدار جدا برای display گرفته، ولی ویژگی‌هایی مثل grid-template-columns و grid-template-rows رو از grid قرض می‌گیره و کل پیچیدگی‌شون، از جمله subgrid، هم باهاش میاد. بحث فعلاً به این سمت می‌ره که فقط subgridهای هم‌نوع با والد مجاز باشن. تو جلسه تصمیمی گرفته نشد و نویسنده از توسعه‌دهنده‌ها خواسته اگه کاربرد واقعی دارن، تو issue مربوطه تو GitHub بنویسن.

دلیل آخر، تشخیص پشتیبانیه. @supports فقط چک می‌کنه یه جفت ویژگی و مقدار parse می‌شه یا نه. پس می‌شه reading-flow: grid-lanes-track رو جدا تست کرد که الان تو Chrome رد می‌شه، در حالی که reading-flow: grid-columns قبول می‌شه. با gap همین مشکل پیش اومد: پشتیبانی gap تو flexbox قابل تست نبود چون برای grid از قبل parse می‌شد. named-feature() برای حل این مشکل اومده، ولی باید از قبل براش اسم تعریف بشه.

نکات کلیدی:

• flow-start و flow-end تو CSS Box Alignment Level 3 alias برای flex-start و flex-end هستن و تو grid lanes هم کار می‌کنن.
• grid-gap هنوز به‌عنوان alias ویژگی عمومی gap کار می‌کنه.
• برای reading-flow تو grid lanes مقدارهای grid-lanes-flow و grid-lanes-track تصویب شد.
• grid lanes مقدار جدای display داره ولی grid-template-columns و grid-template-rows رو از grid قرض می‌گیره.
• دربارهٔ subgrid تو grid lanes هنوز تصمیمی گرفته نشده و پیشنهاد فعلی فقط subgrid هم‌نوع با والده.
• @supports فقط parse شدن جفت ویژگی و مقدار رو تست می‌کنه و named-feature() برای همین محدودیت اومده.