درخواست بازخورد توسعه‌دهنده در مورد جریان خواندن و عناصر با نمایش: محتوا

راشل اندرو

سال گذشته ما پست وبلاگ «حل مشکل عدم اتصال طرح‌بندی CSS و ترتیب منبع» را منتشر کردیم. این پست، جزئیات پیشنهادی را که در گروه کاری CSS مورد بحث قرار گرفته بود، شرح می‌داد. هدف این پست، حل مشکلی بود که در آن، مرتب‌سازی مجدد آیتم‌ها در flexbox و grid باعث ایجاد یک تجربه تب‌بندی غیرمرتبط می‌شد. بخش ابتدایی آن پست، مشکلی را که گروه کاری در تلاش برای حل آن است، تشریح می‌کند. از آن زمان تاکنون، اوضاع تغییر کرده است و این پست به‌روزرسانی مختصری از وضعیت فعلی ما ارائه می‌دهد. ما همچنین یک حوزه خاص داریم که به بازخورد شما نیاز داریم - چگونه با آیتم‌هایی که display-contents دارند، برخورد کنیم؟

به‌روزرسانی‌های مربوط به پیشنهاد

اکنون متن مشخصات پیش‌نویس در مشخصات نمایش سطح ۴ CSS وجود دارد. این یک ویژگی جدید به نام reading-flow را معرفی می‌کند. این ویژگی به عنصر حاوی طرح‌بندی flex یا grid (عنصری با display: grid یا display: flex ) اضافه می‌شود.

این ویژگی مقادیر زیر را می‌پذیرد:

  • normal : از ترتیب عناصر در DOM پیروی می‌کند، که رفتار فعلی است.
  • flex-visual : فقط روی کانتینرهای flex اعمال می‌شود. با در نظر گرفتن حالت نوشتاری، ترتیب خواندن بصری آیتم‌های flex را دنبال می‌کند.
  • flex-flow : فقط روی کانتینرهای flex اعمال می‌شود. از جهت flex-flow پیروی می‌کند.
  • grid-rows : فقط روی کانتینرهای شبکه‌ای اعمال می‌شود. با در نظر گرفتن حالت نوشتاری، ترتیب بصری آیتم‌های شبکه‌ای را بر اساس ردیف دنبال می‌کند.
  • grid-columns : فقط روی کانتینرهای شبکه‌ای اعمال می‌شود. ترتیب بصری آیتم‌های شبکه‌ای را بر اساس ستون دنبال می‌کند و حالت نوشتاری را در نظر می‌گیرد.
  • grid-order : فقط روی کانتینرهای گرید اعمال می‌شود. ویژگی order را در نظر می‌گیرد، اما در غیر این صورت مانند normal عمل می‌کند.

برای مثال، اگر سه آیتم flex در یک کانتینر داشته باشید و flex-direction آنها را روی row-reverse تنظیم کنید، آنها از انتهای کانتینر flex در یک خط قرار می‌گیرند و ترتیب تب‌ها از راست به چپ تغییر می‌کند.

.flex {
  display: flex;
  flex-direction: row-reverse;
}
جریان پیش‌فرض آیتم‌های flex با row-reverse .

اگر flex-flow: visual اضافه کنید، روند خواندن از ترتیب بصری در انگلیسی پیروی می‌کند، بنابراین از چپ به راست خواهد بود.

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}
با reading-flow:flex-visual .

در طرح‌بندی‌های شبکه‌ای، reading-flow برای دنبال کردن سطرها یا ستون‌های بصری به جای ترتیب منبع استفاده کنید. در مثال زیر، جریان خواندن سطرها را دنبال می‌کند.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
                       "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
با reading-flow: grid-rows . (با جریان خواندن: ردیف‌های شبکه)

امتحانش کن.

این ویژگی CSS در حال حاضر آزمایشی است، با این حال می‌توان آن را برای آزمایش فعال کرد. برای امتحان کردن آن، Chrome Dev یا Canary نسخه ۱۲۸ یا بالاتر را نصب کنید و پرچم زمان اجرا CSSReadingFlow را فعال کنید. چند مثال برای شروع وجود دارد که همگی در Canary با پرچم فعال کار می‌کنند.

رفتار مربوط به موارد display: contents هنوز در دست بررسی است و ممکن است بر اساس بازخوردی که پس از خواندن بخش بعدی این پست ارائه می‌دهید، تغییر کند.

عناصر با display: contents و اجزای وب

یک مسئله‌ی لاینحل برای گروه کاری CSS وجود دارد که باید در مورد چگونگی برخورد با موقعیتی که یکی از فرزندان یک عنصر با جریان خواندن دارای display: contents است و به طور مشابه اگر آن عنصر یک <slot> باشد، تصمیم‌گیری کنند.

در مثال زیر، عناصر <div> دارای display: contents هستند. به همین دلیل، تمام عناصر <button> برای شرکت در طرح‌بندی flex ارتقا می‌یابند و بنابراین reading-flow ترتیب آنها را در نظر می‌گیرد.

 .wrapper {
   display: flex;
   reading-flow: flex-visual;
 }

<div class="wrapper">
   <div style="display: contents" id="contents1">
     <button style="order: 3" id="o3">3</button>
     <button style="order: 1" id="o1">1</button>
     <div style="display: contents" id=contents2>
       <button style="order: 4" id="o4">4</button>
       <button style="order: 2" id=o2>2</button>
     </div>
   </div>
 </div>

ما می‌خواهیم بدانیم که آیا مثال‌های واقعی دارید که باعث ایجاد وضعیتی که در این مثال دیده می‌شود، شده باشد. آیا تا به حال نیاز داشته‌اید که آیتم‌هایی را که درون عنصری با display: contents و با آیتم‌هایی که هم‌نیا نیستند، به دلیل هم‌نیا بودن با آیتمی که display: contents دارد، مرتب کنید؟

علاوه بر این، همزمان با تلاش برای حل مشکلات مربوط به display: contents مشاهده‌ی مثال‌هایی که ممکن است بخواهید از ویژگی reading-flow با display: contents استفاده کنید، مفید خواهد بود. درک موارد استفاده‌ی دنیای واقعی شما به ما کمک می‌کند تا راه‌حلی متناسب با نیازهای شما طراحی کنیم.

موارد استفاده را به موضوع گروه کاری CSS اضافه کنید. اگر مثال‌هایی در سایت‌های زنده دارید یا می‌توانید یک نسخه آزمایشی در CodePen یا JSFiddle ایجاد کنید، وقتی که به صورت گروهی در مورد این موضوع بحث می‌کنیم، فوق‌العاده مفید خواهد بود. اگر در مورد آنچه انتظار دارید اتفاق بیفتد، نظری دارید، آن هم مفید است. با این حال، مهمترین چیز این است که موارد استفاده واقعی را ببینید.