Hasilkan Kueri Kuantitas CSS dengan Pembuat QQ
Sedikit pengembang yang tahu atau gunakan Kueri kuantitas CSS di situs web mereka. Ini adalah fitur yang cukup rumit tetapi juga berguna saat Anda memiliki berbagai item dalam wadah.
Kueri kuantitas bisa ubah / perbarui properti CSS berdasarkan batas yang ditentukan sebelumnya untuk elemen anak. Misalnya, jika sudah lebih dari tiga item dalam daftar Anda mungkin membuat font lebih kecil untuk menghemat ruang. Contoh lain adalah memperbarui lebar tautan berdasarkan pada jumlah tautan dalam menu navigasi.
Tugas seperti ini bisa rumit dengan cepat tapi terima kasih kepada Pembuat Kueri Kuantitas Anda tidak perlu mengingat sintaks yang membingungkan.
Aplikasi web ini menghasilkan semua kode untuk Anda untuk menghemat waktu. Kamu butuh pilih dari tiga menu dropdown yang menyesuaikan kueri kuantitas Anda. Mereka bekerja seperti ini:
- Pemilih - elemen anak mana yang harus dihitung
- Jenis pertanyaan - Pilih diantara “paling banyak”, “setidaknya”, atau kombinasi dari “paling banyak” & “setidaknya”
- Jumlah - jumlah total item yang akan difilter
Ini kelihatannya membingungkan dalam kode tetapi ini konsep yang sangat sederhana. Kueri kuantitas memungkinkan Anda menerapkan properti CSS berdasarkan jumlah elemen anak.
Jadi kamu bisa tambahkan gaya CSS tertentu ketika ada, katakanlah, setidaknya 4 elemen anak (4 atau lebih). Atau kamu bisa tambahkan gaya hanya saat ada paling banyak 4 elemen anak (0-4 anak).
Selektor kombo memungkinkan Anda menentukan persis berapa banyak anak minimum & maksimum diperlukan untuk menampilkan properti CSS tertentu.
Pada contoh di tangkapan layar di atas, saya telah mengatur total “paling banyak” barang ke 2. Ini berarti ketika saya memiliki 0, 1, atau 2 anak blok berwarna merah. Jika saya menambahkan satu lagi untuk mendapatkan 3 anak maka semua blok menjadi biru.
Jika Anda tidak tahu apa yang sedang terjadi, Anda bisa klik kotak informasi kecil di bilah sisi. Ini akan memunculkan modal window dengan fakta dan sintaksis menjelaskan fitur kueri kuantitas.
Ini adalah alat yang sangat berguna untuk baik pemula maupun pengembang berpengalaman. Itu akan menghemat banyak waktu dalam jangka panjang dan itu akan membantu Anda buat situs web yang lebih dinamis.
Untuk memulai, kunjungi situs web pembuat QQ dan mulai menyesuaikan fitur Anda. Kamu bisa mainan dengan hasilnya dan periksa pratinjau langsung di panel kanan untuk mempelajari bagaimana perubahan Anda memengaruhi elemen anak.
Proyek ini juga tersedia di GitHub jadi kamu bebas untuk lihat kode sumbernya atau bahkan unduh salinan secara lokal. Dan jika Anda menyukai aplikasi ini atau memiliki pertanyaan / saran untuk pencipta Drew Minns, Anda dapat menembaknya dengan tweet cepat @drewisthe.
