Dave Rupert dengan beberapa keajaiban CSS modern yang menangani salah satu teka-teki klasik itu: apa yang terjadi ketika CSS untuk komponen tidak dapat menangani konten yang kita lempar?
Situasi spesifiknya adalah ketika kisi tata letak mengharapkan jumlah item genap, tetapi diberikan dengan angka ganjil. Kami pergi dengan elemen "menggantung" di akhir yang membuang tata letak. Kedengarannya seperti yang dibutuhkan adalah beberapa CSS Pertahanan dan Dave menyelesaikannya.
Dia meraih :has() untuk menulis pemilih bagus yang mengendus item terakhir dalam kotak yang berisi jumlah item ganjil:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Memecah itu:
- Kami memiliki wadah induk dari
.items. - Jika wadah
:has()an.itemanak yang terakhir dari jenisnya, - …dan itu
.itemkebetulan menjadi instance bernomor ganjil, - …lalu pilih yang pertama
.itemelemen jenis itu dan gaya itu!
Dalam hal ini, yang terakhir .item dapat diatur ke lebar penuh untuk mencegah lubang di tata letak.
Jika… maka… CSS memiliki kekuatan logika bersyarat! Kami hanya berbicara tentang dukungan untuk Safari TP dan Edge/Chrome Canary saat ini, tapi itu cukup mengagumkan.
Kebetulan, Temani Afif baru-baru ini membagikan trik yang dia pelajari saat bereksperimen dengan grid implisit. Dengan memanfaatkan algoritme penempatan otomatis Grid CSS, kita bahkan tidak perlu secara eksplisit mendeklarasikan jumlah kolom dan baris tetap untuk kisi — CSS akan membuatnya untuk kita jika diperlukan!
Tidak, teknik Temani bukanlah solusi alternatif untuk dilema "penyok" Dave. Tetapi menggabungkan pendekatan Temani ke pola tata letak grid yang dapat diulang dengan penggunaan CSS defensif Dave dari :has(), kami mendapatkan kisi yang cukup kuat dan tampak rumit yang ringan dan mampu menangani sejumlah item apa pun sambil mempertahankan pola yang seimbang dan berulang.
