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

Rachel Andrew

Tahun lalu, kami memublikasikan postingan blog Memecahkan masalah pemutusan koneksi tata letak CSS dan urutan sumber. Ini menjelaskan proposal yang sedang dibahas di Grup Kerja CSS, yang bertujuan untuk menyelesaikan masalah saat pengurutan ulang item di flexbox dan petak menyebabkan pengalaman penggunaan tab yang terputus. Bagian awal dari postingan tersebut menguraikan masalah yang coba dipecahkan oleh grup kerja tersebut. Sejak saat itu, banyak hal yang telah berubah, dan postingan ini memberikan update singkat tentang posisi kami saat ini. Kami juga memiliki area tertentu yang memerlukan masukan Anda—bagaimana cara menangani item yang memiliki display-contents?

Pembaruan pada proposal

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

Properti ini menerima nilai berikut:

  • normal: Mengikuti urutan elemen dalam DOM, yang merupakan perilaku saat ini.
  • flex-visual: Hanya berlaku pada penampung fleksibel. Mengikuti urutan pembacaan visual item flex, dengan mempertimbangkan mode penulisan.
  • flex-flow: Hanya berlaku pada penampung fleksibel. Mengikuti arah flex-flow.
  • grid-rows: Hanya berlaku pada penampung petak. Mengikuti urutan visual item petak menurut baris, dengan mempertimbangkan mode penulisan.
  • grid-columns: Hanya berlaku pada penampung petak. Mengikuti urutan visual item petak menurut kolom, dengan mempertimbangkan mode penulisan.
  • grid-order: Hanya berlaku pada penampung petak. Mempertimbangkan properti order, tetapi bertindak seperti normal.

Misalnya, jika Anda memiliki tiga item fleksibel dalam penampung, dan menetapkan flex-direction-nya ke row-reverse, item tersebut akan sejajar dari akhir penampung fleksibel dan urutan tab akan berpindah dari kanan ke kiri.

.flex {
  display: flex;
  flex-direction: row-reverse;
}
Alur default item fleksibel dengan row-reverse.

Tambahkan flex-flow: visual, lalu alur membaca akan mengikuti urutan visual dalam bahasa Inggris, sehingga 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 urutan sumber. Pada contoh berikut, alur pembacaan 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.

Cobalah

Properti CSS ini saat ini bersifat eksperimental, tetapi Anda dapat mengaktifkannya untuk pengujian. Untuk mencobanya, instal Chrome Dev atau Canary versi 128 atau yang lebih baru, dan aktifkan flag runtime CSSReadingFlow. Ada beberapa contoh untuk membantu Anda memulai, yang semuanya berfungsi di Canary dengan flag diaktifkan.

Perilaku untuk kasus display: contents masih dalam proses dan dapat berubah berdasarkan masukan yang Anda berikan setelah membaca bagian berikut dari postingan ini.

Elemen dengan display: contents dan komponen web

Ada masalah yang belum terselesaikan bagi kelompok kerja CSS untuk memutuskan cara menangani situasi ketika salah satu turunan elemen dengan alur baca memiliki display: contents, dan juga jika item tersebut adalah <slot>.

Dalam contoh berikut, elemen <div> memiliki display: contents. Oleh karena itu, semua elemen <button> dipromosikan untuk berpartisipasi dalam tata letak flex, sehingga reading-flow 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 nyata yang menyebabkan situasi yang terlihat dalam contoh ini. Pernahkah Anda perlu mengurutkan ulang item yang berada di dalam elemen yang memiliki display: contents dengan item yang bukan saudara, karena merupakan saudara dari item yang memiliki display: contents.

Selain itu, saat kami berupaya menyelesaikan masalah seputar display: contents, akan lebih baik jika Anda melihat contoh saat ingin menggunakan properti reading-flow dengan display: contents. Memahami kasus penggunaan dunia nyata yang Anda miliki akan membantu kami mendesain solusi yang memenuhi kebutuhan Anda.

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