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

Rachel Andrew

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

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

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

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

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

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

.flex {
  display: flex;
  flex-direction: row-reverse;
}

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

.flex {
  display: flex;
  flex-direction: row-reverse;
  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; }

آن را امتحان کنید

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

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

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

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

در مثال زیر، عناصر <div> دارای display: contents هستند. به همین دلیل، همه عناصر <button> برای شرکت در طرح‌بندی انعطاف‌پذیر ارتقا می‌یابند، و بنابراین 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 ایجاد کنید که برای بحث گروهی درباره این موضوع بسیار مفید خواهد بود. اگر در مورد آنچه که انتظار دارید اتفاق بیفتد فکر می کنید، این نیز مفید است. با این حال، مهمترین چیز دیدن موارد استفاده واقعی است.