Menjana Permintaan Kuantum CSS dengan Pembina QQ
Beberapa pemaju tahu atau menggunakannya Pertanyaan kuantiti CSS di laman web mereka. Ia adalah ciri yang agak kompleks tetapi juga berguna apabila anda mempunyai item berbeza dalam bekas.
Pertanyaan kuantiti boleh ubah / kemas kini sifat CSS berdasarkan had yang telah ditetapkan untuk elemen kanak-kanak. Sebagai contoh, jika anda ada lebih daripada tiga item dalam senarai anda mungkin membuat font lebih kecil untuk menjimatkan bilik. Contoh lain ialah mengemaskini lebar pautan berdasarkan pada bilangan pautan dalam menu navigasi.
Tugas seperti ini boleh menjadi rumit dengan cepat tetapi terima kasih kepada Pembina Kueri Kuantiti anda tidak perlu menghafal sebarang sintaks yang mengelirukan.
Aplikasi web ini menjana semua kod untuk anda untuk menjimatkan masa. Anda perlu pilih dari tiga dropdown menu yang menyesuaikan kuantiti kuantiti anda. Mereka bekerja seperti ini:
- Pemilih - elemen kanak-kanak yang perlu dikira
- Jenis pertanyaan - pilih antara “kebanyakannya”, “sekurang-kurangnya”, atau kombo “kebanyakannya” & “sekurang-kurangnya”
- Jumlah - jumlah item untuk ditapis
Ini seolah-olah mengelirukan dalam kod tetapi ia adalah konsep yang sangat mudah. Kuantiti pertanyaan membolehkan anda menggunakan sifat CSS berdasarkan jumlah bilangan unsur kanak-kanak.
Jadi anda boleh tambah gaya CSS tertentu apabila ada, katakan, sekurang-kurangnya 4 elemen kanak-kanak (4 atau lebih). Atau, anda boleh tambah gaya hanya apabila ada kebanyakannya 4 elemen kanak-kanak (0-4 kanak-kanak).
Pemilih combo membolehkan anda menentukan berapa banyak kanak-kanak minimum & maksimum adalah perlu untuk memaparkan sifat CSS tertentu.
Dalam contoh pada tangkapan skrin di atas, saya telah menetapkan jumlahnya “kebanyakannya” barangan kepada 2. Ini bererti apabila saya mempunyai 0, 1, atau 2 kanak-kanak blok itu merah. Jika saya menambah satu lagi untuk mendapatkan 3 kanak-kanak maka semua blok menjadi biru.
Jika anda tidak tahu apa yang berlaku, anda boleh klik kotak maklumat kecil dalam bar sisi. Ia akan membawa a tingkap modal dengan fakta dan sintaks menjelaskan ciri pertanyaan kuantiti.
Ini adalah alat yang sangat berguna untuk kedua-dua pemula dan pemaju yang berpengalaman. Ia akan menjimatkan banyak masa dalam jangka panjang dan ia akan membantu anda membuat laman web yang lebih dinamik.
Untuk memulakan, lawati tapak web pembina QQ dan mula menyesuaikan ciri anda. Awak boleh mainan dengan hasilnya dan semak pratonton langsung di panel sebelah kanan untuk mengetahui bagaimana perubahan anda mempengaruhi elemen kanak-kanak.
Projek ini juga boleh didapati di GitHub jadi anda bebas semak kod sumber atau bahkan muat turun salinan secara tempatan. Dan jika anda suka aplikasi ini atau mempunyai sebarang pertanyaan / saran untuk pencipta Drew Minns anda boleh menembak dia tweet cepat @drewisthe.
