این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

استفاده از جریان خواندن CSS برای ناوبری فوکوس متوالی منطقی، استفاده از جریان خواندن CSS برای ناوبری فوکوس متوالی منطقی، استفاده از جریان خواندن CSS برای ناوبری فوکوس متوالی منطقی، استفاده از جریان خواندن CSS برای ناوبری فوکوس متوالی منطقی

Di Zhang

Rachel Andrew

تاریخ انتشار: 1 می 2025

ویژگی‌های CSS reading-flow و reading-order از Chrome 137 در دسترس هستند. این پست دلایل طراحی این ویژگی‌ها و برخی جزئیات مختصر را برای شروع کار با آنها توضیح می‌دهد.

روش‌های چیدمان مانند grid و flex توسعه frontend را تغییر داده‌اند، اما انعطاف‌پذیری آنها می‌تواند برای برخی از کاربران مشکل ایجاد کند. ایجاد موقعیتی که ترتیب بصری با ترتیب مبدا در درخت DOM مطابقت نداشته باشد بسیار آسان است. از آنجایی که اگر شما با استفاده از صفحه کلید در سایت پیمایش کنید، این ترتیب منبع همان چیزی است که مرورگر دنبال می کند، برخی از کاربران در حین حرکت در یک صفحه با پرش غیرمنتظره ای روبرو می شوند.

ویژگی‌های reading-flow و reading-order طراحی شده و به مشخصات CSS Display اضافه شده است تا این مشکل طولانی مدت را حل کند.

`reading-flow`

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

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

`reading-order`

ویژگی reading-order CSS به شما این امکان را می دهد تا به صورت دستی ترتیب موارد را در یک محفظه جریان خواندن لغو کنید. برای استفاده از این ویژگی در داخل یک محفظه شبکه، انعطاف‌پذیر یا بلوک، مقدار reading-flow در ظرف را روی source-order تنظیم کنید و reading-order هر مورد را روی یک مقدار صحیح تنظیم کنید.

مثال در فلکس باکس

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

<div class="box">
 <a href="#">One</a>
 <a href="#">Two</a>
 <a href="#">Three</a>
</div>

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

.box :nth-child(1) {
  order: 2;
}

می توانید با استفاده از کلید TAB برای یافتن عنصر قابل فوکوس بعدی و کلیدهای TAB+SHIFT برای یافتن عنصر قابل تمرکز قبلی، این عناصر را پیمایش کنید. این موارد به ترتیب منبع دنبال می شود: یک، دو، سه.

از دیدگاه کاربر نهایی، این منطقی نیست و می تواند بسیار گیج کننده باشد. اگر از ابزار ناوبری فضایی دسترسی برای پیمایش در صفحه استفاده کنیم، همین اتفاق می افتد.

برای رفع این مشکل، ویژگی reading-flow تنظیم کنید:

.box {
  reading-flow: flex-visual;
}

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

اگر در عوض، ترجیح می دهید ترتیب فوکوس را همانطور که در ابتدا منظور شده بود حفظ کنید، به ترتیب معکوس، می توانید تنظیم کنید:

.box {
  reading-flow: flex-flow;
}

ترتیب فوکوس اکنون به ترتیب فلکس معکوس است: دو، سه، یک. در هر دو مورد، ویژگی order CSS حساب می شود.

مثال با طرح بندی شبکه ای

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

<div class="wrapper">
 <a href="#">One</a>
 <a href="#">Two</a>
 <a href="#">Three</a>
 <a href="#">Four</a>
 <a href="#">Five</a>
 <a href="#">Six</a>
 <a href="#">Seven</a>
 <a href="#">Eight</a>
 <a href="#">Nine</a>
 <a href="#">Ten</a>
 <a href="#">Eleven</a>
 <a href="#">Twelve</a>
</div>

شما می خواهید که فرزند پنجم بزرگترین فضا را در بالای صفحه بگیرد و پس از آن فرزند دوم به سمت وسط شبکه قرار گیرد. همه بچه های دیگر را می توان به صورت خودکار در شبکه زیر یک الگوی ستون قرار داد.

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
}
.wrapper a:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper a:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

سعی کنید این عناصر را با استفاده از کلید TAB برای یافتن عنصر قابل فوکوس بعدی و کلیدهای TAB+SHIFT برای یافتن عنصر قابل تمرکز قبلی هدایت کنید. این موارد به ترتیب منبع دنبال می شود: یک تا دوازده.

برای رفع این مشکل، ویژگی reading-flow تنظیم کنید:

.wrapper {
  reading-flow: grid-rows;
}

ترتیب تمرکز اکنون به این صورت است: پنج، یک، سه، دو، چهار، شش، هفت، هشت، نه، ده، یازده، دوازده. از ترتیب بصری، ردیف به ردیف پیروی می کند.

اگر می‌خواهید جریان خواندن از ترتیب ستون‌ها پیروی کند، می‌توانید به جای آن از مقدار کلمه کلیدی grid-columns استفاده کنید. سپس ترتیب فوکوس به پنج، شش، نه، هفت، ده، یک، دو، یازده، سه، چهار، هشت، دوازده می‌شود.

.wrapper {
  reading-flow: grid-columns;
}

همچنین می توانید از grid-order استفاده کنید. ترتیب فوکوس یک تا دوازده باقی می ماند. این به این دلیل است که هیچ دستور CSS روی هیچ موردی تنظیم نشده است.

ظرف بلوکی با استفاده از `reading-order`

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

.wrapper {
  display: block;
  reading-flow: source-order;
}

.top {
  reading-order: -1;
  inset-inline-start: 50px;
  inset-block-start: 50px;
}

ظرف بلوک زیر شامل پنج مورد است. هیچ قانون چیدمانی وجود ندارد که عناصر را از ترتیب منبع آن مجدداً مرتب کند، اما یک مورد خارج از جریان وجود دارد که باید ابتدا از آن بازدید کرد.

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
  <a class="top" href="#">Item 5</a>
</div>

با تنظیم reading-order این مورد روی -1 ، ترتیب تمرکز ابتدا از آن بازدید می کند قبل از اینکه برای بقیه موارد جریان خواندن به ترتیب منبع بازگردد.

می توانید نمونه های بیشتری را در سایت chrome.dev بیابید.

تعامل با tabindex

از لحاظ تاریخی، توسعه دهندگان از ویژگی سراسری tabindex HTML برای قابل تمرکز کردن عناصر HTML و تعیین ترتیب نسبی جهت پیمایش فوکوس متوالی استفاده کرده اند. با این حال، این ویژگی دارای اشکالات و نگرانی های دسترسی بسیاری است. نگرانی اصلی این است که ناوبری فوکوس مرتب شده بر اساس tabindex ایجاد شده با استفاده از tabindex مثبت توسط درخت دسترسی تشخیص داده نمی شود. در صورت استفاده نادرست، ممکن است در نهایت با ترتیب فوکوس جهشی مواجه شوید که با تجربه یک صفحه‌خوان مطابقت ندارد. برای رفع آن، سفارش را با استفاده از ویژگی HTML aria-owns دنبال کنید.

در مثال flex قبلی، برای به دست آوردن همان نتیجه با استفاده از reading-flow: flex-visual ، ممکن است موارد زیر را انجام دهید.

<div class="box" aria-owns="one three two">
  <a href="#" tabindex="1" id="one">One</a>
  <a href="#" tabindex="3" id="two">Two</a>
  <a href="#" tabindex="2" id="three">Three</a>
</div>

اما، اگر عنصر دیگری خارج از کانتینر نیز tabindex=1 داشته باشد، چه اتفاقی می‌افتد؟ سپس، قبل از اینکه به مقدار tabindex افزایشی بعدی برویم، همه عناصر با tabindex=1 با هم بازدید خواهند شد. این ناوبری متوالی پرش به تجربه کاربری بد منجر می شود. از این رو، کارشناسان دسترس‌پذیری توصیه می‌کنند از tabindex مثبت اجتناب کنید . ما سعی کردیم این مشکل را هنگام طراحی reading-flow برطرف کنیم.

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

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

به ما اطلاع دهید

نمونه‌های موجود در این پست و نمونه‌های reading-flow در chrome.dev را امتحان کنید و از این ویژگی‌های CSS در سایت‌های خود استفاده کنید. اگر بازخوردی دارید، آن را به عنوان یک مشکل در CSS Working Group Repo GitHub مطرح کنید. اگر بازخورد خاصی در مورد tabindex و رفتار محدوده تمرکز دارید، آن را به عنوان یک مشکل با مخزن HTML WHATNOT GitHub مطرح کنید. ما از نظرات شما در مورد این ویژگی خوشحال خواهیم شد.

Di Zhang

Rachel Andrew

تاریخ انتشار: 1 می 2025

ویژگی‌های reading-flow و reading-order طراحی شده و به مشخصات CSS Display اضافه شده است تا این مشکل طولانی مدت را حل کند.

`reading-flow`

`reading-order`

مثال در فلکس باکس

<div class="box">
 <a href="#">One</a>
 <a href="#">Two</a>
 <a href="#">Three</a>
</div>

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

.box :nth-child(1) {
  order: 2;
}

برای رفع این مشکل، ویژگی reading-flow تنظیم کنید:

.box {
  reading-flow: flex-visual;
}

.box {
  reading-flow: flex-flow;
}

ترتیب فوکوس اکنون به ترتیب فلکس معکوس است: دو، سه، یک. در هر دو مورد، ویژگی order CSS حساب می شود.

مثال با طرح بندی شبکه ای

<div class="wrapper">
 <a href="#">One</a>
 <a href="#">Two</a>
 <a href="#">Three</a>
 <a href="#">Four</a>
 <a href="#">Five</a>
 <a href="#">Six</a>
 <a href="#">Seven</a>
 <a href="#">Eight</a>
 <a href="#">Nine</a>
 <a href="#">Ten</a>
 <a href="#">Eleven</a>
 <a href="#">Twelve</a>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
}
.wrapper a:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper a:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

برای رفع این مشکل، ویژگی reading-flow تنظیم کنید:

.wrapper {
  reading-flow: grid-rows;
}

.wrapper {
  reading-flow: grid-columns;
}

ظرف بلوکی با استفاده از `reading-order`

.wrapper {
  display: block;
  reading-flow: source-order;
}

.top {
  reading-order: -1;
  inset-inline-start: 50px;
  inset-block-start: 50px;
}

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
  <a class="top" href="#">Item 5</a>
</div>

می توانید نمونه های بیشتری را در سایت chrome.dev بیابید.

تعامل با tabindex

در مثال flex قبلی، برای به دست آوردن همان نتیجه با استفاده از reading-flow: flex-visual ، ممکن است موارد زیر را انجام دهید.

<div class="box" aria-owns="one three two">
  <a href="#" tabindex="1" id="one">One</a>
  <a href="#" tabindex="3" id="two">Two</a>
  <a href="#" tabindex="2" id="three">Three</a>
</div>

به ما اطلاع دهید

Di Zhang

Rachel Andrew

تاریخ انتشار: 1 می 2025

ویژگی‌های reading-flow و reading-order طراحی شده و به مشخصات CSS Display اضافه شده است تا این مشکل طولانی مدت را حل کند.

`reading-flow`

`reading-order`

مثال در فلکس باکس

<div class="box">
 <a href="#">One</a>
 <a href="#">Two</a>
 <a href="#">Three</a>
</div>

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

.box :nth-child(1) {
  order: 2;
}

برای رفع این مشکل، ویژگی reading-flow تنظیم کنید:

.box {
  reading-flow: flex-visual;
}

.box {
  reading-flow: flex-flow;
}

ترتیب فوکوس اکنون به ترتیب فلکس معکوس است: دو، سه، یک. در هر دو مورد، ویژگی order CSS حساب می شود.

مثال با طرح بندی شبکه ای

<div class="wrapper">
 <a href="#">One</a>
 <a href="#">Two</a>
 <a href="#">Three</a>
 <a href="#">Four</a>
 <a href="#">Five</a>
 <a href="#">Six</a>
 <a href="#">Seven</a>
 <a href="#">Eight</a>
 <a href="#">Nine</a>
 <a href="#">Ten</a>
 <a href="#">Eleven</a>
 <a href="#">Twelve</a>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
}
.wrapper a:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper a:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

برای رفع این مشکل، ویژگی reading-flow تنظیم کنید:

.wrapper {
  reading-flow: grid-rows;
}

.wrapper {
  reading-flow: grid-columns;
}

ظرف بلوکی با استفاده از `reading-order`

.wrapper {
  display: block;
  reading-flow: source-order;
}

.top {
  reading-order: -1;
  inset-inline-start: 50px;
  inset-block-start: 50px;
}

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
  <a class="top" href="#">Item 5</a>
</div>

می توانید نمونه های بیشتری را در سایت chrome.dev بیابید.

تعامل با tabindex

در مثال flex قبلی، برای به دست آوردن همان نتیجه با استفاده از reading-flow: flex-visual ، ممکن است موارد زیر را انجام دهید.

<div class="box" aria-owns="one three two">
  <a href="#" tabindex="1" id="one">One</a>
  <a href="#" tabindex="3" id="two">Two</a>
  <a href="#" tabindex="2" id="three">Three</a>
</div>

به ما اطلاع دهید

Di Zhang

Rachel Andrew

تاریخ انتشار: 1 می 2025

ویژگی‌های reading-flow و reading-order طراحی شده و به مشخصات CSS Display اضافه شده است تا این مشکل طولانی مدت را حل کند.

`reading-flow`

`reading-order`

مثال در فلکس باکس

<div class="box">
 <a href="#">One</a>
 <a href="#">Two</a>
 <a href="#">Three</a>
</div>

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

.box :nth-child(1) {
  order: 2;
}

برای رفع این مشکل، ویژگی reading-flow تنظیم کنید:

.box {
  reading-flow: flex-visual;
}

.box {
  reading-flow: flex-flow;
}

ترتیب فوکوس اکنون به ترتیب فلکس معکوس است: دو، سه، یک. در هر دو مورد، ویژگی order CSS حساب می شود.

مثال با طرح بندی شبکه ای

<div class="wrapper">
 <a href="#">One</a>
 <a href="#">Two</a>
 <a href="#">Three</a>
 <a href="#">Four</a>
 <a href="#">Five</a>
 <a href="#">Six</a>
 <a href="#">Seven</a>
 <a href="#">Eight</a>
 <a href="#">Nine</a>
 <a href="#">Ten</a>
 <a href="#">Eleven</a>
 <a href="#">Twelve</a>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
}
.wrapper a:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper a:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

برای رفع این مشکل، ویژگی reading-flow تنظیم کنید:

.wrapper {
  reading-flow: grid-rows;
}

.wrapper {
  reading-flow: grid-columns;
}

ظرف بلوکی با استفاده از `reading-order`

.wrapper {
  display: block;
  reading-flow: source-order;
}

.top {
  reading-order: -1;
  inset-inline-start: 50px;
  inset-block-start: 50px;
}

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
  <a class="top" href="#">Item 5</a>
</div>

می توانید نمونه های بیشتری را در سایت chrome.dev بیابید.

تعامل با tabindex

در مثال flex قبلی، برای به دست آوردن همان نتیجه با استفاده از reading-flow: flex-visual ، ممکن است موارد زیر را انجام دهید.

<div class="box" aria-owns="one three two">
  <a href="#" tabindex="1" id="one">One</a>
  <a href="#" tabindex="3" id="two">Two</a>
  <a href="#" tabindex="2" id="three">Three</a>
</div>

به ما اطلاع دهید

نمونه‌های موجود در این پست و نمونه‌های reading-flow در chrome.dev را امتحان کنید و از این ویژگی‌های CSS در سایت‌های خود استفاده کنید. اگر بازخورد دارید ، آن را به عنوان مسئله ای در کارگروه CSS GitHub Repo مطرح کنید. اگر به طور خاص در مورد Tabindex بازخورد دارید و رفتار Scoping را تمرکز می کنید ، آن را به عنوان مسئله ای با HTML Whatnot GitHub repo مطرح کنید. ما بازخورد شما را در مورد این ویژگی دوست داریم.

reading-flow

reading-order

مثال در فلکس باکس

مثال با طرح بندی شبکه ای

ظرف بلوکی با استفاده از reading-order

تعامل با tabindex

به ما اطلاع دهید

reading-flow

reading-order

مثال در فلکس باکس

مثال با طرح بندی شبکه ای

ظرف بلوکی با استفاده از reading-order

تعامل با tabindex

به ما اطلاع دهید

reading-flow

reading-order

مثال در فلکس باکس

مثال با طرح بندی شبکه ای

ظرف بلوکی با استفاده از reading-order

تعامل با tabindex

به ما اطلاع دهید

reading-flow

reading-order

مثال در فلکس باکس

مثال با طرح بندی شبکه ای

ظرف بلوکی با استفاده از reading-order

تعامل با tabindex

به ما اطلاع دهید

`reading-flow`

`reading-order`

ظرف بلوکی با استفاده از `reading-order`

`reading-flow`

`reading-order`

ظرف بلوکی با استفاده از `reading-order`

`reading-flow`

`reading-order`

ظرف بلوکی با استفاده از `reading-order`

`reading-flow`

`reading-order`

ظرف بلوکی با استفاده از `reading-order`