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

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

راشل اندرو

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

مشکل

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

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

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

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

روی مثال کلیک کنید و برگه‌های اطراف را ببینید تا ببینید چگونه ترتیب برگه‌ها از ترتیب چیدمان جدا می‌شود، این بار با چینش شبکه‌ای موارد خارج از نظم.

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

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

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

گروه کاری 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

در برخی از طرح‌بندی‌های شبکه‌ای و انعطاف‌پذیر، درک ترتیب چیدمان ساده است. به عنوان مثال، در یک طرح انعطاف پذیر که از ویژگی 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 برای تبدیل شدن به چیزی است که می تواند در مرورگرها پیاده سازی شود.

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