حل طرح CSS و قطع ارتباط سفارش منبع

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

راشل اندرو

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

مشکل

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

برای مثال، استفاده از ویژگی order روی آیتم‌های flex، ترتیب چیدمان را تغییر می‌دهد اما ترتیب موجود در منبع را تغییر نمی‌دهد.

روی مثال کلیک کنید و با استفاده از ویژگی `order`، با کلید Tab به اطراف حرکت کنید تا ببینید که چگونه ترتیب Tab از ترتیب طرح‌بندی جدا شده است.

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

روی مثال کلیک کنید و با تب (tab) اطراف آن را ببینید تا ببینید که چگونه ترتیب تب‌ها از ترتیب طرح‌بندی جدا شده است، این بار با مرتب کردن شبکه‌ای موارد به صورت نامنظم.

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

روی مثال کلیک کنید و با حرکت Tab اطراف، ببینید که چگونه ترتیب Tabها با استفاده از ویژگی‌های قرارگیری شبکه، از ترتیب طرح‌بندی جدا شده است.

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

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

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

در موقعیت‌هایی که ترتیب چیدمان تصادفی ایجاد می‌شود، مانند زمانی که از بسته‌بندی متراکم در چیدمان شبکه‌ای استفاده می‌کنید، احتمالاً می‌خواهید مرورگر به جای ترتیب منبع، چیدمان را دنبال کند. برای ایجاد این اتفاق، آیتم‌های flex یا grid باید دارای ویژگی 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

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

مثال زیر یک طرح‌بندی flex را با استفاده از row-reverse نشان می‌دهد. آیتم‌های flex دارای reading-order: auto و container flex دارای 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 برای تبدیل شدن به چیزی است که می‌تواند در مرورگرها پیاده‌سازی شود.

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