Styling Checkbox Advanced dengan CSS Grid
The Modul Layout Grid CSS bukan sahaja dapat menyelesaikan masalah susun atur tetapi juga beberapa masalah mulut lama yang baik berurusan dengan untuk masa yang lama, seperti styling label kotak centang.
Walaupun terdapat kaedah yang agak mudah untuk gaya label apabila ia muncul selepas kotak semak, ia tidak begitu mudah apabila label muncul sebelum ini ia.
Gaya kotak centang tanpa CSS Grid
Menggayakan label selepas kotak semak adalah sesuatu yang kami lakukan sejak kami membacanya di suatu tempat. Teknik ini adalah salah satu contoh utama dan lama dari dinamik yang kuat yang boleh dimiliki oleh CSS.
Berikut adalah kod yang anda mungkin sudah biasa dengan itu gaya label selepas kotak semak yang diperiksa:
input: checked + label / * style me * /
A label gaya selepas kotak semak mungkin kelihatan seperti ini (namun, anda boleh menggunakan peraturan gaya lain juga):
Kod CSS di atas menggunakan pengkadap bersebelahan ditandakan oleh + kunci. Apabila kotak masuk berada di : diperiksa negeri, satu elemen selepas ia (biasanya label) boleh digelar menggunakan kaedah ini.
Seperti teknik yang mudah dan berkesan! Apa yang boleh kemungkinan pergi salah dengannya? Tiada apa-apa-sehingga anda mahu memaparkan label sebelum ini kotak semak.
Gabungan saudara yang bersebelahan memilih unsur seterusnya; ini bermakna label perlu datang selepas kotak semak dalam kod sumber HTML.
Jadi, untuk membuat label muncul sebelum ini kotak semak kepunyaan pada skrin, kita tidak boleh memindahkannya sebelum kotak semak dalam kod sumber, sebagai pemilih saudara sebelumnya tidak wujud dalam CSS.
Yang meninggalkan hanya satu pilihan: menyusun semula kotak semak dan label menggunakan ubah atau kedudukan atau margin atau lain-lain sifat CSS dengan beberapa jenis telekinetik, supaya label muncul di sebelah kiri kotak semak pada skrin.
Masalah dengan kaedah tradisional
Tidak ada apa apa majorly salah dengan teknik yang disebutkan di atas tetapi boleh jadi tidak cekap dalam kes tertentu. Saya maksudkan kes-kes di mana kedudukan semula kotak semak dan label tidak berfungsi lagi.
Fikirkan responsif, contohnya. Anda mungkin perlu mengubah saiz atau meletakkan semula kotak semak mengikut peranti yang dipaparkan padanya. Bila itu berlaku, anda akan perlu meletakkan semula label juga, kerana tidak akan ada penyusunan semula automatik yang dilakukan kepada label sebagai tindak balas kepada penyesuaian / saiz semula kotak semak.
Kita boleh menghilangkan kelemahan ini jika kita boleh menyediakan beberapa susun atur pepejal untuk kotak semak dan label, bukannya meletakkan kedudukan mereka pada halaman.
Tetapi, hampir semua sistem susun atur, seperti jadual atau lajur, memerlukan anda tambah label sebelum kotak semak dalam kod sumber untuk menjadikannya kelihatan sama dengan skrin. Itulah sesuatu yang kami tidak mahu lakukan kerana pemilih unsur seterusnya pada label akan berhenti berfungsi.
Grid CSS, sebaliknya, adalah sistem susunatur yang tidak bergantung pada penempatan / urutan unsur dalam kod sumber.
Keupayaan menyusun semula susun atur grid sengaja menjejaskan hanya rendering visual, meninggalkan pesanan ucapan dan navigasi berdasarkan perintah sumber. Ini membolehkan penulis untuk memanipulasi persembahan visual sambil meninggalkan perintah sumber utuh ... - Modul Layout CSS Grid Level 1, W3C
Oleh itu, grid CSS adalah penyelesaian ideal untuk gaya label yang muncul sebelum ini kotak semak.
Gaya kotak centang dengan CSS Grid
Mari bermula dengan kod HTML. Perintah kotak semak dan label akan tetap sama seperti sebelumnya. Kami hanya menambah kedua-dua mereka ke grid.
CSS yang disertakan adalah seperti berikut:
#cbgrid display: grid; grid-template-areas: "left right"; lebar: 150px; masukkan [jenis = kotak pilihan] grid-area: right; label grid-area: left;
Saya tidak akan mendalam tentang cara grid CSS berfungsi, seperti yang saya sudah tulis artikel terperinci mengenai perkara ini, bahawa anda boleh membaca di sini. Beberapa asas, bagaimanapun: paparan: grid harta berubah menjadi elemen ke dalam bekas grid, grid-area mengenal pasti kawasan grid unsur yang dimiliki, dan grid-template-areas membentuk susun atur grid, terdiri daripada kawasan grid berbeza.
Dalam kod di atas, ada dua kawasan grid: "ditinggalkan" dan "betul". Mereka membuatnya dua lajur baris grid. Kotak semak adalah kepunyaan "betul" kawasan dan label kepada "ditinggalkan". Inilah bagaimana mereka melihat pada skrin:
Oleh kerana kita tidak menukar penempatan relatif kotak semak dan label dalam kod sumber, kita boleh masih menggunakan kombinator saudara yang bersebelahan:
input: checked + label / * style me * /
Perhatikan bahawa item grid adalah sentiasa disekat; ia muncul dengan kotak sekeliling yang dikenali sebagai kotak peringkat grid. Jika anda tidak mahu itu, misalnya untuk label, letakkan pembalut pada item itu (bungkusnya dalam elemen lain) dan belok pembalut itu ke kawasan grid.
Itu sahaja, orang-orang. Grid CSS semoga membantu anda menggelapkan susun atur kotak-kotak curang ini.
