حل کردن مشکل قطع اتصال چیدمان CSS و ترتیب منبع

درباره راه‌حل پیشنهادی برای مشکل روش‌های چیدمان که موارد را به ترتیبی که با منبع سند ارتباطی ندارد مرتب می‌کند، بازخورد شما موردنیاز است.

Rachel Andrew Technical Writer

«گروه کاری CSS» درحال کار روی راه‌حلی برای وضعیتی است که در آن یک روش چیدمان می‌تواند عناصر را به ترتیبی که از منبع و درنتیجه از ترتیب خواندن و تمرکز سند جدا است مرتب کند. این مقاله مشکل و راهکار پیشنهادی را توضیح می‌دهد و از بازخورد شما استقبال می‌کنیم.

مشکل

ترتیب خواندن سند HTML از ترتیب منبع پیروی می‌کند. این یعنی صفحه‌خوان سند را همان‌طور که در منبع چیده شده است می‌خواند و فردی که از صفحه‌کلید برای پیمایش در سند استفاده می‌کند نیز از همان ترتیب منبع پیروی می‌کند. معمولاً این کار منطقی است و ترتیب منبع معقول برای سند برای ارائه محتوا در حالت خواندن، صفحه‌خوان‌ها، و هر دستگاهی با CSS محدود حیاتی است. بااین‌حال، CSS، و به‌ویژه flexbox و grid، می‌توانند چیدمان‌هایی ایجاد کنند که در آن‌ها چیدمان ترتیب خواندن دیداری را تعریف می‌کند که با منبع زیرین متفاوت است.

برای مثال، استفاده از ویژگی order در عناصر انعطاف‌پذیر ترتیب چیدمان را تغییر می‌دهد اما ترتیب در منبع را تغییر نمی‌دهد.

بااستفاده از چیدمان شبکه‌ای، ممکن است روش چیدمان انتخاب‌شده ترتیب برگه را به‌هم بریزد، مثلاً هنگام استفاده از grid-auto-flow: dense که ترتیب چیدمان تصادفی برای موارد ایجاد می‌کند.

توسعه‌دهنده نیز می‌تواند با قرار دادن موارد در شبکه با ترتیبی متفاوت از آنچه در منبع دیکته شده است، باعث این قطع ارتباط شود.

راه‌حل پیشنهادی

«گروه کاری CSS» راه‌حلی برای این مشکل پیشنهاد می‌کند و از توسعه‌دهندگان و انجمن دسترس‌پذیری می‌خواهد درباره این رویکرد بازخورد ارائه دهند.

دنبال کردن چیدمان‌های تصادفی با reading-order: auto

در شرایطی که ترتیب چیدمان تصادفی ایجاد می‌شود، مثلاً هنگام استفاده از بسته‌بندی متراکم در چیدمان جدولی، احتمالاً می‌خواهید مرورگر از چیدمان پیروی کند، نه از ترتیب منبع. برای اینکه این اتفاق بیفتد، عناصر انعطاف‌پذیر یا جدولی باید دارای ویژگی reading-order با مقدار auto باشند.

«سبک CSS» زیر باعث می‌شود ترتیب خواندن از جایگاه مواردی که به‌دلیل grid-auto-flow: dense به‌صورت فشرده بسته‌بندی شده‌اند پیروی کند.

.cards {
  display: grid;
  grid-auto-flow: dense;
}

.cards li {
  grid-column: auto / span 2;
  reading-order: auto;
}

دنبال کردن چیدمان‌های غیرتصادفی با reading-order-items

در برخی‌از چیدمان‌های شبکه‌ای و انعطاف‌پذیر، درک ترتیب چیدمان آسان است. برای مثال، در چیدمان انعطاف‌پذیری که از دارایی order برای تغییر ترتیب موارد استفاده می‌کند، ترتیب چیدمان واضحی وجود دارد که توسط دارایی order دیکته می‌شود. در چیدمان‌های دیگر، ترتیب چیدمان ایده‌آل کمتر واضح است و ممکن است بیش‌از یک انتخاب ممکن وجود داشته باشد. بنابراین، هنگام پیروی از چیدمان‌های غیرتصادفی، باید دارایی grid-order-items را به محتوی اضافه کنید و با مقادیر کلیدواژه هدف خود را برای ترتیب چیدمان توضیح دهید.

مثال زیر چیدمان انعطاف‌پذیری را بااستفاده از row-reverse نشان می‌دهد. عناصر انعطاف‌پذیر reading-order: auto و ظرف انعطاف‌پذیر reading-order-items: flex flow دارند تا نشان دهند که می‌خواهیم ترتیب خواندن نیز از جهت flex-flow پیروی کند، نه از ترتیب دیداری (که می‌توانیم با flex visual نشان دهیم).

.cards {
  display: flex;
  flex-flow: row-reverse;
  reading-order-items: flex flow;
}

.cards li {
  reading-order: auto;
}

در مثال بعدی، چیدمان جدولی بااستفاده از grid-template-areas ایجاد شده است و عناصر در ترتیب چیدمان متفاوتی نسبت به ترتیب منبع قرار گرفته‌اند. از دارایی reading-order-items برای نشان دادن اینکه باید از ترتیب چیدمان پیروی کنیم و هر ردیف را قبل‌از رفتن به ردیف بعدی پیمایش کنیم استفاده می‌شود. (grid column جهت مخالف را نشان می‌دهد).

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a a b b b b"
    "c c d d e e"
    "f f g g h h";
  reading-order-items: grid rows;
}

.a {
  grid-area: a;
  reading-order: auto;
}

آیا این بدان معنا است که ترتیب منبع اهمیتی ندارد؟

نه، ترتیب منبع همچنان مهم است. این قابلیت باید فقط در شرایط خاصی استفاده شود که ترتیب خواندن ممکن است با منبع متفاوت باشد. برای مثال، هنگام استفاده از روش‌های چیدمانی که می‌تواند باعث این قطع ارتباط شود، مثل بسته‌بندی شبکه متراکم، یا زمانی که ترتیب چیدمان متفاوت در یک نقطه شکست خاص منطقی باشد.

هنگام استفاده از این ویژگی‌ها، سند منبعی بااستفاده از ترتیبی ایجاد کنید که اگر صفحه بدون CSS ارائه شود منطقی باشد. این دارایی‌ها را فقط در مکان‌ها و در نقاط گسستی که به آن‌ها نیاز است اضافه کنید.

آیا ابزارهای نویسندگی باید این دارایی‌ها را اعمال کنند؟

ابزارهای تألیفی که به افراد امکان می‌دهند با کشیدن و رها کردن عناصر، چیدمان جدولی ایجاد کنند، باید همچنان افراد را به ایجاد سند منبع معقول تشویق کنند. بنابراین در اکثر موارد، مناسب‌تر است که منبع را براساس ترتیب چیدمان مجدداً مرتب کنید، نه اینکه از این ویژگی‌ها به‌عنوان روشی آسان برای مدیریت قطع ارتباط استفاده کنید.

لطفاً بازخوردتان را درباره این پیشنهاد هم‌رسانی کنید

ما بسیار مشتاق هستیم که درباره این موضوع بازخورد جمع‌آوری کنیم. به‌ویژه، اگر مورد استفاده‌ای دارید که احساس می‌کنید این مشکل را حل نمی‌کند، یا نگرانی دسترسی‌پذیری با این رویکرد دارید، لطفاً به گروه کاری CSS اطلاع دهید.

رشته‌ای درحال انجام است که شامل بسیاری از موارد استفاده و نظرات درباره این رویکرد است. آن رشته مکان خوبی برای افزودن نظرات و برجسته کردن مشکلات احتمالی این پیشنهاد است. توجه داشته باشید که پیشنهاد کنونی با پیشنهاد اولیه من که شروع‌کننده رشته بود بسیار متفاوت است. افراد علاقه‌مند ممکن است از همه مکالمه‌هایی که به وضعیت امروز ما منجر شده است لذت ببرند، زیرا این مکالمه‌ها نمونه خوبی از نحوه کار روی پیشنهادها در «گروه کاری CSS» برای تبدیل شدن به چیزی است که می‌تواند در مرورگرها پیاده‌سازی شود.

ریزعکس از Patrick Tomasso. از کریس هارلسون، تب اتکینز، و ایان کیلپاتریک برای بازخورد و مرور سپاس‌گزاریم.