Menata Elemen Terpilih secara Bersyarat dalam Wadah Kotak

Kalender, keranjang belanja, galeri, penjelajah file, dan perpustakaan online adalah beberapa situasi di mana item yang dapat dipilih ditampilkan dalam kisi (yaitu kisi persegi). Anda tahu, bahkan pemeriksaan keamanan yang meminta Anda untuk memilih semua gambar dengan penyeberangan atau apa pun.

Saya menemukan cara yang rapi untuk menampilkan opsi yang dapat dipilih dalam kotak. Tidak, tidak membuat ulang reCAPTCHA itu, tetapi hanya dapat memilih beberapa item. Dan ketika dua atau lebih item yang berdampingan dipilih, kita dapat menggunakan smart :nth-of-type kombinator, elemen semu, dan :checked pseudo-class untuk menatanya sedemikian rupa sehingga terlihat dikelompokkan bersama.

Seluruh ide kombinator dan pseudo untuk mendapatkan kotak centang bulat berasal dari a artikel sebelumnya saya tulis. Itu adalah desain satu kolom sederhana:

Namun kali ini, efek pembulatan diterapkan pada elemen di sepanjang sumbu vertikal dan horizontal pada kisi. Anda tidak perlu membaca artikel terakhir saya tentang gaya kotak centang untuk ini karena saya akan membahas semua yang perlu Anda ketahui di sini. Tetapi jika Anda tertarik dengan apa yang kami lakukan di artikel ini, maka yang satu itu layak untuk dicoba.

Sebelum kita mulai…

Akan berguna bagi Anda untuk memperhatikan beberapa hal. Misalnya, saya menggunakan HTML dan CSS statis dalam demo saya demi kesederhanaan. Bergantung pada aplikasi Anda, Anda mungkin harus membuat kisi dan item di dalamnya secara dinamis. Saya mengabaikan pemeriksaan praktis untuk aksesibilitas untuk fokus pada efeknya, tetapi Anda pasti ingin mempertimbangkan hal semacam itu di lingkungan produksi.

Juga, saya menggunakan CSS Grid untuk tata letak. Saya akan merekomendasikan hal yang sama tetapi, tentu saja, ini hanya preferensi pribadi dan jarak tempuh Anda mungkin berbeda. Bagi saya, menggunakan kisi memungkinkan saya untuk dengan mudah menggunakan pemilih saudara untuk menargetkan item ::before dan ::after pseudo.

Oleh karena itu, standar tata letak apa pun yang mungkin ingin Anda gunakan dalam aplikasi Anda, pastikan pseudo masih dapat ditargetkan di CSS dan pastikan tata letak tetap bijaksana di berbagai browser dan layar.

Ayo mulai sekarang

Seperti yang mungkin Anda perhatikan di demo sebelumnya, mencentang dan menghapus centang pada elemen kotak centang akan mengubah desain kotak, bergantung pada status pemilihan kotak centang lain di sekitarnya. Ini dimungkinkan karena saya menata setiap kotak menggunakan elemen semu dari elemen yang berdekatan, bukan elemennya sendiri.

Gambar berikut menunjukkan bagaimana ::before pseudo-elemen kotak di masing-masing kolom (kecuali kolom pertama) tumpang tindih dengan kotak di sebelah kirinya, dan bagaimana ::after pseudo-elemen kotak di masing-masing baris (kecuali baris pertama) tumpang tindih dengan kotak di atas.

Berikut kode dasarnya

Markupnya cukup mudah:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

Ada sedikit lagi yang terjadi di CSS awal. Tapi, pertama, grid itu sendiri:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

Itu adalah kisi lima baris dan empat kolom yang berisi kotak centang. Saya memutuskan untuk menghapus tampilan default kotak centang, lalu memberi mereka latar belakang abu-abu terang dan batas super bulat:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

Perhatikan juga bahwa kotak centang itu sendiri adalah kisi. Itu kunci untuk menempatkan mereka ::before dan ::after elemen semu. Omong-omong, mari kita lakukan sekarang:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

Kami hanya memilih elemen semu dari kotak centang yang tidak ada di kolom pertama atau baris pertama kisi. input:not(:nth-of-type(4n+1)) dimulai pada kotak centang pertama, lalu pilih ::before dari setiap item keempat dari sana. Tapi perhatikan yang kami katakan :not(), jadi sebenarnya yang kami lakukan adalah melewatkan itu ::before pseudo-element dari setiap kotak centang keempat, mulai dari yang pertama. Kemudian kita menerapkan gaya ke ::after pseudo dari setiap kotak centang dari yang kelima.

Sekarang kita bisa menata keduanya ::before dan ::after pseudo untuk setiap kotak centang yang tidak berada di kolom atau baris pertama kisi, sehingga masing-masing dipindahkan ke kiri atau ke atas, menyembunyikannya secara default.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

Menata gaya :checked negara

Kini hadir dengan menata kotak centang saat berada di a :checked negara. Pertama, beri mereka warna, katakan limegreen Latar Belakang:

input:checked { background: limegreen; }

Kotak centang harus dapat menata ulang semua kotak centang yang berdekatan. Dengan kata lain, jika kita memilih kotak centang kesebelas di kisi, kita juga harus dapat memberi gaya pada kotak yang mengelilinginya di bagian atas, bawah, kiri, dan kanan.

Ini dilakukan dengan menargetkan elemen semu yang benar. Bagaimana kita melakukannya? Yah, itu tergantung pada jumlah kolom yang sebenarnya di grid. Inilah CSS jika dua kotak yang berdekatan dicentang dalam kisi 5⨉4:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

Jika mau, Anda dapat membuat kode di atas secara dinamis. Namun, kisi khas, katakanlah galeri gambar, jumlah kolom akan kecil dan kemungkinan jumlah item tetap, sedangkan baris mungkin terus bertambah. Apalagi jika didesain untuk layar ponsel. Itu sebabnya pendekatan ini masih merupakan cara yang efisien untuk dilakukan. Jika karena alasan tertentu aplikasi Anda memiliki baris terbatas dan kolom yang diperluas, maka pertimbangkan untuk memutar grid ke samping karena, dengan aliran item, CSS Grid mengaturnya dari kiri ke kanan dan dari atas ke bawah (yaitu baris demi baris) .

Kita juga perlu menambahkan gaya untuk kotak centang terakhir di kisi — tidak semuanya tertutup oleh elemen semu karena merupakan item terakhir di setiap sumbu.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

Itu adalah beberapa pemilih yang rumit! Yang pertama…

input:nth-of-type(4n-1):checked + input:checked

… pada dasarnya mengatakan ini:

Dicentang <input> elemen di sebelah yang dicentang <input> di kolom kedua terakhir.

Dan nth-of-type dihitung seperti ini:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

Jadi, kita mulai dari kotak centang ketiga dan memilih setiap yang keempat dari sana. Dan jika kotak centang dalam urutan itu dicentang, maka kami juga memberi gaya pada kotak centang yang berdekatan, jika mereka juga dicentang.

Dan baris ini:

input:nth-of-type(4n):checked + * + * + * + input:checked

Mengatakan ini:

An <input> elemen yang dicentang, berbatasan langsung dengan suatu elemen, yang berbatasan langsung dengan elemen lain, yang juga berbatasan langsung dengan elemen lain, yang, pada gilirannya, berbatasan langsung dengan suatu <input> elemen yang dalam keadaan dicentang.

Artinya, kami memilih setiap kotak centang keempat yang dicentang. Dan jika kotak centang dalam urutan itu dicentang, maka kami memberi gaya kotak centang keempat berikutnya dari kotak centang itu jika juga dicentang.

Menggunakannya

Apa yang baru saja kita lihat adalah prinsip umum dan logika di balik desain. Sekali lagi, seberapa bergunanya dalam aplikasi Anda akan bergantung pada desain kisi.

Saya menggunakan batas bulat, tetapi Anda dapat mencoba bentuk lain atau bahkan bereksperimen dengan efek latar belakang (Temani sudahkah Anda mencari ide?). Sekarang setelah Anda tahu cara kerja formula, sisanya terserah imajinasi Anda.

Berikut adalah contoh tampilannya dalam kalender sederhana:

Sekali lagi, ini hanyalah prototipe kasar menggunakan markup statis. Dan, akan ada banyak sekali pertimbangan aksesibilitas yang perlu dipertimbangkan dalam fitur kalender.

---

Itu bungkus! Cukup rapi, bukan? Maksud saya, tidak ada yang benar-benar "baru" tentang apa yang terjadi. Tapi itu adalah contoh yang baik dari memilih hal-hal di CSS. Jika kita memiliki pegangan pada teknik pemilihan yang lebih maju yang menggunakan kombinator dan pseudo, maka kekuatan penataan kita dapat mencapai jauh melampaui penataan satu item — seperti yang kita lihat, kita dapat menata item secara kondisional berdasarkan keadaan elemen lain.

---

Menata Elemen Terpilih secara Bersyarat dalam Wadah Kotak awalnya diterbitkan pada Trik CSS. Kamu harus dapatkan buletin.

• Coinsmart. Pertukaran Bitcoin dan Crypto Terbaik Eropa.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. AKSES GRATIS.
• CryptoHawk. Radar Altcoin. Uji Coba Gratis.
• Sumber: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/