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

Rachel Andrew

Tahun lalu, kami memublikasikan postingan blog Mengatasi perbedaan tata letak CSS dan urutan sumber. Proposal ini menjelaskan secara mendetail proposal yang sedang dibahas di CSS Working Group, yang bertujuan untuk menyelesaikan masalah saat menyusun ulang item dalam flexbox dan petak menyebabkan pengalaman penabisan yang terputus. Bagian awal postingan tersebut menguraikan masalah yang sedang coba diselesaikan oleh kelompok kerja. Sejak saat itu, banyak hal telah berubah, dan postingan ini memberikan ringkasan tentang posisi kami saat ini. Kami juga memiliki area khusus tempat kami memerlukan masukan Anda—bagaimana cara kami menangani item yang memiliki display-contents?

Pembaruan pada proposal

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

Properti ini menerima nilai berikut:

• normal: Ikuti 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 direction.
• 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 berbaris dari akhir penampung fleksibel dan urutan tab berpindah dari kanan ke kiri.

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

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

.flex {
  display: flex;
  flex-direction: row-reverse;
  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; }

Cobalah

Saat ini, properti CSS ini masih 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 mengaktifkan tanda.

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

Elemen dengan display: contents dan komponen web

Ada masalah yang belum terselesaikan bagi grup kerja CSS untuk memutuskan cara menangani situasi saat salah satu turunan elemen dengan reading-flow memiliki display: contents, dan demikian pula 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 fleksibel, dan oleh karena itu 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 mengetahui apakah Anda memiliki contoh nyata yang menyebabkan situasi yang terlihat dalam contoh ini. Apakah Anda pernah perlu mengurutkan ulang item yang berada di dalam elemen yang memiliki display: contents dengan item yang bukan saudara kandung, karena merupakan saudara kandung dari item yang memiliki display: contents.

Selain itu, saat kami berupaya menyelesaikan masalah terkait display: contents, akan sangat membantu jika kami melihat contoh kasus saat Anda 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 itu akan sangat berguna saat kita membahas masalah ini sebagai grup. Jika Anda memiliki pemikiran tentang apa yang Anda harapkan terjadi, hal itu juga berguna. Namun, yang paling penting adalah melihat kasus penggunaan yang sebenarnya.