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. Dokumen ini menjelaskan proposal yang sedang dibahas di Grup Kerja CSS, yang bertujuan untuk menyelesaikan masalah saat mengurutkan ulang item di flexbox dan petak menyebabkan pengalaman tab yang terputus. Bagian awal postingan tersebut menguraikan masalah yang coba diselesaikan oleh grup kerja. 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 kami 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 fleksibel, 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. Dalam 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 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 untuk grup kerja CSS guna memutuskan cara menangani situasi saat salah satu turunan elemen dengan alur membaca memiliki display: contents, dan secara serupa jika itemnya 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 grup kerja CSS. Jika Anda memiliki contoh di situs aktif atau dapat membuat demo di CodePen atau JSFiddle, hal ini akan sangat berguna saat kita membahas masalah ini sebagai grup. Jika Anda memiliki pemikiran tentang apa yang akan terjadi, hal itu juga berguna. Namun, hal yang paling penting adalah melihat kasus penggunaan yang sebenarnya.