Styling Kotak centang Tingkat Lanjut dengan CSS Grid
Itu Modul Tata Letak Kotak CSS tidak hanya bisa menyelesaikan masalah tata letak yang sangat besar tetapi juga beberapa masalah mulish yang baik yang pernah kami alami berurusan dengan untuk waktu yang lama, seperti menata label kotak centang.
Meskipun ada metode yang relatif mudah untuk mendesain label ketika muncul setelah kotak centang, itu tidak mudah ketika label muncul sebelum saya t.
Gaya kotak centang tanpa CSS Grid
Menata label setelah kotak centang adalah sesuatu yang telah dilakukan pengembang sejak kami membacanya di suatu tempat. Teknik ini adalah salah satu contoh utama dan lama dari dinamika kuat yang dapat dimiliki CSS.
Ini kode yang mungkin sudah Anda kenal, itu menata label setelah kotak centang yang dicentang:
input: dicentang + label / * style me * /
SEBUAH label berlabel setelah kotak centang mungkin terlihat seperti ini (namun, Anda dapat menggunakan aturan gaya lainnya juga):
Kode CSS di atas menggunakan kombinator saudara yang berdekatan ditandai dengan + kunci. Ketika kotak centang ada di : dicentang negara, sebuah elemen setelah saya t (biasanya label) dapat ditata menggunakan metode ini.
Teknik yang sederhana dan efektif! Apa yang bisa mungkin salah dengan itu? Tidak ada apa-apa - sampai Anda ingin menampilkan label sebelum kotak centang.
Combinator saudara yang berdekatan memilih elemen berikutnya; ini berarti label harus datang setelah kotak centang dalam kode sumber HTML.
Jadi, untuk membuat label muncul sebelum kotak centang milik pada layar, kita tidak bisa hanya memindahkannya sebelum kotak centang dalam kode sumber, sebagai a pemilih saudara sebelumnya tidak ada di CSS.
Yang hanya menyisakan satu opsi: reposisi kotak centang dan label menggunakan mengubah atau posisi atau batas atau properti CSS lain dengan semacam kekuatan telekinetik, sehingga label muncul di sebelah kiri kotak centang di layar.
Masalah dengan metode tradisional
Tidak ada apa-apa jurusan salah dengan teknik tersebut tetapi bisa saja tidak efisien dalam kasus-kasus tertentu. Maksud saya kasus di mana posisi ulang kotak centang dan label tidak berfungsi lagi.
Pikirkan responsif, contohnya. Anda mungkin harus mengubah ukuran atau memposisikan ulang kotak centang sesuai dengan perangkat tempat ia ditampilkan. Ketika itu terjadi, Anda akan melakukannya perlu memposisikan ulang label juga, karena tidak akan ada penyelarasan otomatis yang dilakukan pada label sebagai tanggapan atas reposisi / pengubahan ukuran kotak centang.
Kita dapat menghilangkan kerugian ini jika kita bisa memberikan beberapa tata letak yang solid untuk kotak centang dan label, alih-alih memposisikannya secara kasar di laman.
Namun, hampir semua sistem tata letak, seperti tabel atau kolom, mengharuskan Anda melakukannya tambahkan label sebelum kotak centang dalam kode sumber untuk membuatnya tampil dengan cara yang sama di layar. Itu sesuatu yang tidak ingin kami lakukan karena pemilih elemen berikutnya pada label akan berhenti bekerja.
CSS Grid, di sisi lain, adalah sistem tata letak tidak tergantung pada penempatan / urutan elemen dalam kode sumber.
Kemampuan menata ulang tata letak grid sengaja mempengaruhi hanya rendering visual, meninggalkan perintah bicara dan navigasi berdasarkan urutan sumber. Hal ini memungkinkan penulis untuk memanipulasi presentasi visual sambil membiarkan urutan sumber tetap utuh ... - CSS Grid Layout Module Level 1, W3C
Dengan demikian, kisi-kisi CSS adalah solusi ideal untuk gaya label yang muncul sebelum kotak centang.
Kotak centang styling dengan CSS Grid
Mari kita mulai dengan kode HTML. Urutan kotak centang dan label akan tetap sama seperti sebelumnya. Kami hanya menambahkan keduanya ke kotak.
CSS yang menyertainya adalah sebagai berikut:
#cbgrid display: grid; grid-templat-area: "kiri kanan"; lebar: 150px; input [type = checkbox] grid-area: right; label area kotak: kiri;
Saya tidak akan menjelaskan secara mendalam tentang cara kerja kotak CSS, karena saya sudah menulis a artikel rinci tentang masalah ini, yang bisa Anda baca di sini. Namun, beberapa dasar: tampilan: kisi properti mengubah elemen menjadi wadah kotak, area grid mengidentifikasi area kisi yang dimiliki elemen, dan kotak-templat-bidang membentuk tata letak kisi, terdiri dari area kisi yang berbeda.
Dalam kode di atas, ada dua area kisi: "kiri" dan "kanan". Mereka berbaikan dua kolom dari satu baris kisi. Kotak centang itu milik "kanan" area dan label ke "kiri". Ini dia bagaimana mereka terlihat di layar:
Karena kami tidak mengubah penempatan relatif kotak centang dan label dalam kode sumber, kami bisa masih menggunakan kombinator saudara yang berdekatan:
input: dicentang + label / * style me * /
Perhatikan bahwa item kisi adalah selalu diblokir; muncul dengan kotak di sekitarnya yang dikenal sebagai kotak tingkat grid. Jika Anda tidak menginginkannya, misalnya untuk label, letakkan pembungkus pada item itu (bungkus dengan elemen lain) dan ubah pembungkus itu menjadi area kisi.
Itu dia, teman-teman. Mudah-mudahan kotak CSS membantu Anda menemukan tata letak kotak centang yang kurang ajar itu.
