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 propertiorder
, tetapi yang sebaliknya akan berfungsi sepertinormal
.
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;
}
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;
}
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; }
reading-flow: grid-rows
.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.