Aliran bacaan dan pesanan bacaan yang dicadangkan CSS sifat bertujuan untuk menentukan urutan sumber elemen HTML dalam pokok DOM, pada dasarnya menentukan bagaimana alat kebolehaksesan melihat urutan elemen. Ciri -ciri ini amat berguna untuk menyelaraskan urutan fokus elemen yang fokus dengan susunan visual mereka, seperti yang dikehendaki oleh garis panduan kebolehaksesan kandungan web (WCAG 2.2).

Sebelum kita menyelidiki lebih mendalam, pastikan anda menggunakan Chrome 137 atau lebih baru.

Membaca-aliran

Aliran bacaan mengawal urutan sumber elemen HTML dalam susun atur flex, grid, atau blok. Tujuan utamanya adalah untuk membantu alat aksesibiliti dalam menyampaikan pesanan fokus yang betul kepada pengguna.

Secara lalai, nilainya adalah normal (oleh itu, aliran bacaan: normal). Nilai yang sah lain termasuk:

• flex-visual
• Flex-Flow
• grid-baris
• grid-lajur
• grid-order
• pesanan sumber

Mari kita mulakan dengan nilai flex-visual. Bayangkan barisan flex yang mengandungi lima pautan. Dengan mengandaikan arah bacaan kiri-ke-kanan (yang boleh diubah menggunakan arah CSS Property), ia akan muncul seperti berikut:

Sekarang, jika kita menggunakan arah flex: Row-Reverse, pautan dipaparkan 5-4-3-2-1. Isu ini timbul kerana perintah fokus masih bermula dari 1 (tabbing melalui mereka!), Yang secara visual tidak betul untuk pembaca kiri ke kanan.

Walau bagaimanapun, memohon aliran bacaan: Flex-Visual memastikan urutan fokus juga menjadi 5-4-3-2-1, sejajar dengan urutan visual (keperluan aksesibiliti!):

 <a> 1 </a>
<a> 2 </a>
<a> 3 </a>
<a> 4 </a>
<a> 5 </a>

 div {
  Paparan: Flex;
  arah flex: berbaris baris;
  Aliran membaca: flex-visual;
}

Untuk kembali ke tingkah laku flex lalai, gunakan aliran bacaan: flex-flow. Ini sama dengan aliran bacaan: normal, kecuali bekas tetap menjadi bekas aliran bacaan, penting untuk pesanan bacaan (kami akan meneroka ini tidak lama lagi).

Buat masa ini, mari kita periksa nilai khusus grid. Di dalam grid di bawah, item grid digegarkan, yang membawa kepada urutan fokus yang tidak teratur.

Ini boleh diperbetulkan dalam dua cara. Satu kaedah adalah menetapkan aliran bacaan: grid-baris, yang menetapkan urutan fokus berturut-turut:

 <a> 1 </a>
<a> 2 </a>
<a> 3 </a>
<a> 4 </a>
<a> 5 </a>
 6 
 7 
 8 
 9 
 10 
 11 
 12 

 div {
  paparan: grid;
  Grid-template-lajur: Ulang (4, 1FR);
  Grid-Auto-Rows: 100px;
  Membaca-aliran: grid-row;
<p>A: Nth-Child (2) {
grid-baris: 2/4;
Grid-lajur: 3;
}</p><p> A: Nth-Child (5) {
grid-baris: 1/3;
Grid-lajur: 1/3;
}
}</p>

Sebagai alternatif, aliran bacaan: grid-lajur menetapkan urutan fokus lajur demi lajur.

Aliran Bacaan: Grid-Order menyediakan tingkah laku grid lalai (versi hancur). Ini serupa dengan aliran membaca: normal, kecuali bekas tetap menjadi bekas aliran bacaan, yang diperlukan untuk pesanan bacaan (kami akan menutupi ini).

Terdapat juga aliran bacaan: pesanan sumber, yang digunakan untuk flex, grid, dan bekas blok. Ia mengubah bekas ke dalam bekas aliran bacaan, membolehkan penggunaan pesanan bacaan. Secara terang-terangan, kecuali saya menghadap sesuatu, ini seolah-olah menjadikan nilai-nilai flex-aliran dan grid yang berlebihan.

pesanan bacaan

Fungsi pesanan bacaan sama juga dengan aliran bacaan tetapi memberi tumpuan kepada item flex atau grid tertentu, atau elemen dalam bekas blok mudah. Ia beroperasi seperti harta pesanan, walaupun kami mungkin menyamakannya dengan Tabindex.

Nota: Untuk menggunakan pesanan bacaan, bekas mesti mempunyai aliran bacaan yang ditetapkan ke mana-mana nilai selain daripada biasa.

Saya akan menunjukkan kedua-dua pesanan membaca dan memesan secara serentak. Berikut adalah bekas Flex di mana setiap item Flex mempunyai harta pesanan yang diberikan nombor rawak, menghasilkan urutan rawak. Walaupun kita telah melihat bahawa aliran bacaan boleh menentukan susunan fokus tanpa mengira pesanan visual, di sini kita menggunakan pesanan bacaan (berfungsi secara identik untuk memerintahkan):

 div {
Paparan: Flex;
Membaca-aliran: Sumber-Pesanan; / <em>Sebarang nilai tetapi normal</em> /<p> / <em>Ciri pada akhir kerana nilai yang lebih tinggi</em> /
A: Nth-Child (1) {
/ <em>Pesanan visual</em> /
Perintah: 567;
/ <em>Pesanan fokus</em> /
Pesanan membaca: 567;
}</p><p> A: Nth-Child (2) {
Perintah: 456;
Pesanan membaca: 456;
}</p><p> A: Nth-Child (3) {
Perintah: 345;
Pesanan membaca: 345;
}</p><p> A: Nth-Child (4) {
Perintah: 234;
Pesanan membaca: 234;
}</p><p> / <em>Ciri pada mulanya kerana nilai yang lebih rendah</em> /
A: Nth-Child (5) {
Perintah: -123;
Pesanan membaca: -123;
}
}</p>

Ini adalah nombor yang agak pelik. Saya telah memilih mereka untuk menyerlahkan bahawa nombor-nombor ini tidak menandakan kedudukan (contohnya, perintah: 3 atau pesanan bacaan: 3 tidak menyiratkan ketiga dalam perintah itu). Bilangan yang lebih rendah meletakkan unsur -unsur lebih dekat dengan permulaan pesanan, manakala angka yang lebih tinggi mendorong mereka ke arah akhir. Nilai lalai ialah 0. Item dengan nilai yang sama disusun mengikut urutan sumber.

Secara praktikal, pertimbangkan contoh ini:

 div {
Paparan: Flex;
Membaca-aliran: Sumber-Pesanan;<p> A: Nth-Child (1) {
Perintah: 1;
Pesanan membaca: 1;
}</p><p> A: Nth-Child (5) {
Pesanan: -1;
Pesanan membaca: -1;
}
}</p>

Di antara lima item Flex, yang pertama adalah dengan pesanan: -1 kerana nilai pesanan terendahnya. Yang terakhir adalah yang mempunyai perintah: 1 kerana ia mempunyai nilai pesanan tertinggi. Mereka tanpa pengisytiharan lalai untuk memerintahkan: 0 dan diposisikan mengikut perintah sumber, sesuai antara perintah: -1 dan perintah: 1 item flex. Prinsip yang sama berlaku untuk membaca pesanan, mencerminkan perintah dalam contoh di atas.

Walau bagaimanapun, apabila membalikkan arah item flex, ingatlah bahawa perintah dan pesanan bacaan berkelakuan berbeza. Sebagai contoh, pesanan bacaan: -1 menarik item flex ke permulaan urutan fokus seperti yang diharapkan. Sebaliknya, perintah: -1 menggerakkannya ke akhir urutan visual kerana urutan visual dibalikkan (oleh itu, kita memerlukan perintah: 1 sebaliknya, walaupun itu kelihatan tidak sah):

 div {
Paparan: Flex;
arah flex: berbaris baris;
Membaca-aliran: Sumber-Pesanan;<p> A: Nth-Child (5) {
/ <em>Oleh kerana berbalik baris, ini meletakkannya terlebih dahulu</em> /
Perintah: 1;
/ <em>Tetapi tingkah laku ini tidak berlaku untuk membaca pesanan</em> /
Pesanan membaca: -1;
}
}</p>

Pesanan membaca menggantikan aliran bacaan. Jika, sebagai contoh, kami menggunakan aliran bacaan: flex-visual, aliran bacaan: grid-baris, atau aliran bacaan: grid-lajur (apa-apa perisytiharan yang mengubah aliran bacaan), pesanan bacaan mengatasinya. Kita boleh mengatakan bahawa pesanan bacaan digunakan selepas aliran bacaan.

Bagaimana jika saya tidak menggunakan susun atur flexbox atau grid?

Jelas sekali, ini tidak termasuk semua nilai aliran bacaan flex-y dan grid-y; Walau bagaimanapun, anda masih boleh menetapkan aliran bacaan: pesanan sumber pada elemen blok dan menyesuaikan urutan fokus dengan pesanan bacaan (seperti yang ditunjukkan sebelumnya).

Bagaimanakah ini berkaitan dengan atribut HTML Tabindex?

Mereka tidak setara. Nilai tabindex negatif menjadikan sasaran tidak dapat difokuskan, dan nilai selain 0 dan -1 tidak disyorkan, sedangkan perisytiharan pesanan bacaan boleh menggunakan mana -mana nombor kerana ia secara konteks terikat dengan bekas aliran bacaan.

Untuk kesempurnaan, saya menguji pesanan bacaan bersama Tabindex, dan pesanan bacaan kelihatan menimpa Tabindex.

Melangkah ke hadapan, saya hanya menggunakan TabIndex (khususnya, TabIndex = "-1") untuk mengelakkan sasaran tertentu daripada menjadi fokus (atribut kurang upaya lebih sesuai untuk beberapa sasaran), dan kemudian menggunakan pesanan bacaan untuk segala-galanya.

Pemikiran terakhir

Menentukan perintah bacaan membuktikan bermanfaat, atau sekurang -kurangnya ia bermakna harta pesanan akhirnya dapat memenuhi tujuannya. Sehingga semua pelayar web menyokong aliran bacaan dan pesanan bacaan (kini berfungsi hanya dalam Chrome 137), perintah tidak praktikal kerana kami tidak dapat menyelaraskan perintah fokus dengan pesanan visual.

Atas ialah kandungan terperinci Apa yang kita tahu (setakat ini) mengenai pesanan membaca CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!