Menggunakan Teknik Gembala Kotak untuk Memesan Data dengan CSS

Menggunakan Teknik Gembala Kotak untuk Memesan Data dengan CSS

Gembala pandai merawat domba mereka, membawa ketertiban dan struktur untuk ternak mereka. Sekalipun ada ratusan hewan berbulu itu, seorang gembala masih menggiring mereka kembali ke peternakan pada akhir hari.

Ketika berhadapan dengan data, programmer sering tidak tahu apakah itu disaring atau diurutkan dengan benar. Ini sangat menyakitkan ketika iterasi pada array kemudian menampilkan data di situs tanpa mengetahui lokasi masing-masing elemen yang menerimanya. Grid Shepherd adalah teknik yang membantu memposisikan dan mengurutkan item yang Anda inginkan, menggunakan CSS Grid, bukan JavaScript.

Itulah yang akan kita lihat di pos ini. Teknik Grid Shepherd dapat menertibkan dan menyusun data yang kami kerjakan sambil memberi kami visibilitas yang lebih besar ke mana dan bagaimana data itu digunakan daripada yang bisa kami lakukan sebaliknya.

Mari kita gali.

Menyortir dengan JavaScript

Kita akan mulai dengan mengulangi susunan hewan ternak yang tidak teratur. Bayangkan bahwa sapi dan domba dengan gembira merumput di ladang. Mereka dapat dikelompokkan bersama secara terprogram dengan metode Array.prototype.sort dan terdaftar pada halaman:

let animals = [ { name: 'Edna',
 animal: 'cow' }, { name: 'Liam', animal: 'sheep' }, { name: 'Fink',
 animal: 'sheep' }, { name: 'Olga',
 animal: 'cow' }, ] let sortedAnimals =
 animals.sort((a, b) => { if (a.animal
 < b.animal) return -1 if (a.animal >
 b.animal) return 1 return 0 })
 console.log(sortedAnimals) /* Returns:
 [ { name: 'Elga', animal: 'cow' },
 { name: 'Olga', animal: 'cow' },
 { name: 'Liam', animal: 'sheep' },
 { name: 'Fink', animal: 'sheep' } ] */

 Memenuhi Grid Shepherd

Metode Grid Shepherd memungkinkan penyortiran data tanpa menggunakan JavaScript. Sebagai gantinya, kami mengandalkan CSS Grid untuk melakukan pengangkatan untuk kami.

Strukturnya persis sama dengan array JavaScript objek di atas, hanya diwakili dalam node DOM saja.

<pre><main> <div class="cow">Edna</div>
 <div class="sheep">Liam</div> <div
 class="sheep">Jenn</div> <div
 class="cow">Fink</div> </main></pre>

Lihat Pena
1. Mulai oleh David Bernegger (@ Achilles_2)
pada CodePen.

Untuk menggiring ternak, kita harus memagari mereka ke area bersama, itulah yang kita lakukan dengan elemen <main> untuk melakukannya. Dengan menyetel pagar dengan tampilan: kisi, kami membuat konteks pemformatan kisi tempat kami dapat menentukan kolom (atau baris) yang harus ditempati setiap hewan.

.sheep { grid-column: 1; } .cow
 { grid-column: 2; }

Dan dengan grid-auto-flow: padat, setiap hewan memesan sendiri ke tempat pertama yang tersedia dari setiap area yang ditentukan. Ini juga dapat digunakan dengan berbagai opsi pengurutan seperti yang Anda inginkan - cukup tentukan kolom lain dan data akan digembalakan secara ajaib ke dalamnya.

main display: grid;
 grid-auto-flow: dense; } .sheep
 { grid-column: 1; } .cow { grid-column:
 2; }

Lihat Pena
2. Final oleh David Bernegger (@ Achilles_2)
pada CodePen.

Pro Shepherding

Kita dapat mengambil contoh penggembalaan kita lebih jauh dengan Penghitung CSS. Dengan begitu, kita dapat menghitung berapa banyak hewan yang kita miliki di setiap kolom dan - menerapkan kueri kuantitas Heydon Pickering dari Lea Verou's Talk pada 2011 - secara kondisional gaya mereka tergantung pada berapa banyak.

Kueri kuantitas bergantung pada semacam pemilih untuk menghitung kelas - yang akan hebat dengan: nth-child (An + B [S]?) Notasi kelas pseudo, tetapi saat ini hanya tersedia di Safari). Itu berarti kita harus menggunakan pemilih: nth-of-type () sebagai solusi.

Kami membutuhkan beberapa jenis elemen baru agar ini berfungsi. Ini dapat direalisasikan melalui Komponen Web atau mengubah nama elemen HTML apa pun menjadi nama khusus. Ini berfungsi bahkan jika elemen-elemen ini tidak ada dalam spesifikasi HTML, karena browser menggunakan HTMLUnknownElement untuk tag tidak terdefinisi yang menghasilkan mereka berperilaku seperti div. Dokumen terlihat seperti ini:

 Lisa Bonnie Olaf Jenn 

Sekarang kita dapat mengakses jenis elemen khusus kami. Mari kita terapkan latar belakang merah ketika jumlah domba atau sapi sama dengan atau kurang dari 10.

sheep:nth-last-of-type(n+10),
 sheep:nth-last-of-type(n+10) ~ sheep,
 cow:nth-last-of-type(n+10),
 cow:nth-last-of-type(n+10) ~ cow,
 { background-color: red; }

Selain itu penghitung dapat direalisasikan hanya dengan menggunakan counter-reset: countsheep countcow; pada elemen induk dan menggunakan pemilih sebelumnya untuk menargetkan setiap elemen dan menghitung.

sheep::before { counter-increment:
 countsheep; content:
 counter(countsheep); }

Di sini, kami akan menjangkau Vue untuk menambahkan dan menghapus hewan secara dinamis menggunakan transisi Vue dengan dua opsi pengurutan yang berbeda. Saksikan saat hewan secara alami menempati kolom yang benar, bahkan saat lebih banyak ditambahkan dan beberapa dihilangkan:

Lihat Pena
3. Final dengan Vue Transitions oleh David Bernegger (@ Achilles_2)
pada CodePen.

Grid Shepherd juga dapat digunakan dengan data yang tidak dipesan untuk:

pisahkan dan hitung pemilih dalam jajak pendapat (mungkin dua bagian dengan gambar profilnya) dengan penyisipan langsung;

kelompokkan orang / rekan kerja sesuai dengan posisi, usia, tinggi badan mereka; dan

buat struktur hierarkis apa pun

#Shepherding dan aksesibilitas

grid-auto-flow: padat tidak mengubah struktur DOM dari grid - itu hanya menata ulang elemen yang terkandung secara visual. Efek samping dapat dilihat pada contoh terakhir ketika memesan secara alfabet ketika counternumber terlibat. Mengubah struktur DOM tidak hanya memengaruhi orang-orang yang menggunakan pembaca layar, tetapi juga efek tab traversal.

Perhatikan juga bahwa struktur dokumen datar mungkin tidak baik untuk pembaca layar. Sebagai gantinya, saya akan memperlakukan grid presentasi ini sebagai grafik dan memberikan informasi dengan alternatif tekstual yang lebih panjang.

Kuat Sekarang!

Sangat rapi untuk melihat bagaimana alat tata letak CSS yang kuat seperti kotak dapat dimanfaatkan untuk kasus penggunaan yang berada di luar kebutuhan tata letak tradisional dan ke dalam hal-hal di mana kita mungkin telah menjangkau bahasa lain di masa lalu. Dalam hal ini, kita dapat melihat bagaimana manfaat tata letak dari CSS Grid dan kemampuan penanganan data dinamis dari tumpang tindih JavaScript dan bagaimana hal itu memberi kita lebih banyak pilihan - dan kekuatan - untuk menekuk data yang diberikan sesuai keinginan kita.

Share this post