Minta masukan dari developer tentang alur baca dan elemen dengan tampilan: konten

Rachel Andrew

Tahun lalu, kami memublikasikan postingan blog tersebut Menyelesaikan masalah tata letak CSS dan urutan sumber. Ini adalah proposal yang rinci yang sedang didiskusikan di CSS Working Group, yang bertujuan untuk menyelesaikan masalah terkait pengurutan ulang item di flexbox dan petak menyebabkan pengalaman tabbing yang terputus. Tujuan bagian awal dari posting itu menguraikan masalah yang dihadapi kelompok kerja tersebut coba pecahkan. Semenjak saat itu, banyak hal berubah dan postingan ini memberikan ringkasan pembaruan mengenai posisi kita sekarang ini. Kami juga memiliki area khusus di mana kami memerlukan masukan—bagaimana cara menangani item yang memiliki display-contents?

Pembaruan pada proposal

Sekarang ada draf spesifikasi teks dalam spesifikasi CSS Display Level 4. Tindakan ini memperkenalkan properti baru yang disebut reading-flow. Properti ini ditambahkan ke elemen penampung untuk tata letak fleksibel atau petak (elemen dengan display: grid atau display: flex).

Properti menerima nilai berikut:

• normal: Mengikuti urutan elemen di DOM, yang merupakan dokumen saat ini perilaku model.
• flex-visual: Hanya berlaku pada penampung fleksibel. Ikuti urutan pembacaan visual item fleksibel, dengan mempertimbangkan mode penulisan.
• flex-flow: Hanya berlaku pada penampung fleksibel. Mengikuti alur yang fleksibel arah.
• grid-rows: Hanya berlaku pada penampung petak. Mengikuti visualisasi urutan item {i>grid<i} menurut baris, dengan mempertimbangkan mode penulisan.
• grid-columns: Hanya berlaku pada penampung petak. Mengikuti urutan visual item {i>grid<i} menurut kolom, dengan mempertimbangkan mode penulisan.
• grid-order: Hanya berlaku pada penampung petak. Memperhitungkan properti order, tetapi yang sebaliknya akan berfungsi seperti normal.

Misalnya, jika Anda memiliki tiga item fleksibel dalam satu penampung, dan menyetel flex-direction-nya ke row-reverse, keduanya sejajar dari ujung penampung fleksibel dan urutan tab bergerak dari kanan ke kiri.

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

Alur default item fleksibel dengan row-reverse.

Tambahkan flex-flow: visual lalu alur pembacaan akan mengikuti urutan visual dalam Inggris, karenanya dari kiri ke kanan.

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

Dengan reading-flow:flex-visual.

Dalam tata letak petak, gunakan reading-flow untuk mengikuti baris atau kolom visual, bukan daripada urutan sumber. Pada contoh berikut, alur membaca mengikuti baris.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
                       "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

Dengan reading-flow: grid-rows.

Catatan: Untuk contoh dan informasi lainnya, tonton diskusi saya dari CSS Day— Tata letak dan urutan pembacaan. Peristiwa ini direkam pada bulan Mei, jika nama properti adalah reading-order-items, bukan reading-flow, tetapi selain penamaannya, semua contoh sudah benar.

Cobalah

Properti CSS ini saat ini bersifat eksperimental, tetapi dapat diaktifkan untuk pengujian. Untuk mencobanya, instal Chrome Dev atau Canary versi 128 atau yang lebih tinggi, serta mengaktifkan tanda runtime CSSReadingFlow. Ada beberapa contoh untuk membantu Anda memulai, yang semuanya bekerja di Canary dengan flag diaktifkan.

Perilaku untuk kasus display: contents masih dalam proses pengembangan dan mungkin berubah berdasarkan umpan balik yang Anda berikan setelah membaca bagian berikut dari postingan ini.

Elemen dengan display: contents dan komponen web

Ada masalah yang belum terselesaikan kelompok kerja CSS untuk memutuskan bagaimana menghadapi situasi di mana salah satu turunan elemen dengan alur baca memiliki display: contents, dan juga jika itemnya adalah <slot>.

Pada contoh berikut, elemen <div> memiliki display: contents. Karena ini, semua elemen <button> dipromosikan untuk berpartisipasi dalam tata letaknya, sehingga reading-flow akan memperhitungkan urutannya.

 .wrapper {
   display: flex;
   reading-flow: flex-visual;
 }

<div class="wrapper">
   <div style="display: contents" id="contents1">
     <button style="order: 3" id="o3">3</button>
     <button style="order: 1" id="o1">1</button>
     <div style="display: contents" id=contents2>
       <button style="order: 4" id="o4">4</button>
       <button style="order: 2" id=o2>2</button>
     </div>
   </div>
 </div>

Kami ingin tahu apakah Anda memiliki contoh di dunia nyata yang menyebabkan situasi tersebut kita lihat dalam contoh ini. Apakah Anda perlu memesan ulang item yang ada di dalam elemen yang memiliki display: contents dengan item yang bukan saudara, karena adalah saudara dari item yang memiliki display: contents.

Selain itu, seiring upaya kami untuk menyelesaikan masalah seputar display: contents akan sangat membantu untuk melihat contoh di mana Anda mungkin ingin menggunakan Properti reading-flow dengan display: contents. Memahami dunia nyata yang Anda miliki akan membantu kami merancang solusi yang sesuai dengan kebutuhan Anda.

Tambahkan kasus penggunaan ke Masalah kelompok kerja CSS. Jika Anda memiliki contoh di situs live atau dapat membuat demo di CodePen atau JSFiddle yang akan sangat berguna saat kita membahas masalah ini secara berkelompok. Jika Anda memiliki pemikiran tentang apa yang Anda harapkan terjadi, yang juga berguna. Namun, yang paling penting adalah melihat kasus penggunaan yang sebenarnya.