Pembuat Kueri Kontainer CSS

• Pembuat Kueri Kontainer Visual: Buat kueri kontainer CSS secara visual dengan pembuat kueri kontainer interaktif kami. Tetapkan jenis kontainer (ukuran sebaris, ukuran, atau normal), tambahkan kondisi kueri dengan operator dan unit khusus, dan tentukan gaya responsif - semuanya tanpa menulis satu baris CSS pun secara manual.
• Pribadi - Tidak Perlu Upload Server: Pembuat kueri kontainer berjalan sepenuhnya di browser Anda. Konfigurasi kontainer, kondisi kueri, dan gaya responsif Anda tidak pernah hilang dari perangkat Anda. Semua pembuatan CSS adalah 100% sisi klien tanpa unggahan data.
• Pratinjau Langsung dengan Kontrol Pengubahan Ukuran: Lihat dengan tepat bagaimana perilaku kueri kontainer Anda dengan panel pratinjau langsung yang dapat diubah ukurannya. Gunakan tombol lebar preset (320 piksel hingga 1024 piksel) atau penggeser interaktif untuk menguji kueri Anda pada lebar wadah apa pun. Pratinjau diperbarui secara instan untuk menunjukkan apakah kueri berlaku.
• Output CSS Siap Pakai: Salin aturan @container, deklarasi container, atau string kondisi kueri yang dihasilkan dengan satu klik. Pembuat kueri kontainer menghasilkan CSS siap produksi dengan pelolosan yang tepat untuk nama kontainer dan sintaksis kueri media yang diformat dengan benar.

• Responsif Komponen React: Pengembang React menggunakan pembuat kueri container untuk membuat komponen yang benar-benar responsif yang beradaptasi dengan container induknya, bukan viewport. Bangun komponen kartu, sidebar, dan dasbor yang mengatur ulang tata letaknya berdasarkan lebar kontainer yang tersedia - penting untuk pustaka komponen yang dapat digunakan kembali di mana komponen yang sama muncul dalam kontainer dengan lebar berbeda.
• Tata Letak Responsif Modern: Desainer web menggunakan pembuat kueri kontainer untuk membuat tata letak yang merespons elemen yang memuatnya, bukan area pandang. Hal ini sangat berguna untuk kisi dasbor, area widget, dan tata letak bersarang di mana elemen muncul dalam berbagai konteks dengan ukuran berbeda - kueri kontainer beradaptasi secara alami tanpa duplikasi kueri media.
• Widget Adaptif dan Sistem Panel: Bangun sistem widget dan panel samping yang menyesuaikan tata letak internalnya saat pengguna mengubah ukurannya. Pembuat kueri kontainer membantu membuat widget sidebar responsif, panel obrolan, dan panel pengaturan yang mengatur ulang konten - beralih dari tata letak bertumpuk ke tata letak berdampingan berdasarkan lebar kontainer, bukan lebar layar.
• Konten CMS dan Pembuat Halaman: Editor konten yang menggunakan WordPress, Drupal, atau pembuat halaman seperti Elementor dapat menggunakan pembuat kueri kontainer untuk membuat blok konten yang merespons lebar kolomnya. Tata letak dua kolom di desktop menjadi satu kolom di perangkat seluler - namun blok konten yang sama beradaptasi secara berbeda bergantung pada posisi lebar penuh atau sidebar.
• Adaptasi Komponen Sistem Desain: Arsitek sistem desain menggunakan pembuat kueri kontainer untuk menentukan varian responsif komponen sistem desain - kartu, tabel, bilah navigasi, dan tata letak formulir yang beradaptasi berdasarkan wadah induknya. Kueri kontainer menghilangkan kebutuhan akan props responsif yang rapuh dan mengaktifkan komponen yang benar-benar otonom.
• Kisi Kartu Produk E-niaga: Pengembang e-niaga menggunakan pembuat kueri kontainer untuk membuat kartu produk yang bertransisi dengan mulus antara tampilan kisi dan daftar seiring perubahan lebar kontainer. Gambar produk, judul, harga, dan tombol tambahkan ke troli diatur ulang secara otomatis ketika pengguna menyesuaikan jumlah kolom dalam kisi produk.

Kueri Kontainer CSS (bagian dari spesifikasi Modul Penahanan CSS Level 3) memungkinkan Anda menerapkan gaya pada elemen berdasarkan ukuran elemen yang memuatnya (kontainer), bukan pada area pandang. Ini adalah perubahan mendasar dari kueri media, yang merespons ukuran area pandang. Dengan kueri kontainer, komponen dapat menyesuaikan tata letak, tipografi, dan tampilannya berdasarkan seberapa banyak ruang yang disediakan oleh kontainer induknya - menjadikan komponen tersebut benar-benar responsif terhadap kontainer. Pembuat kueri kontainer kami membantu Anda membuat aturan ini secara visual tanpa menghafal sintaksis persisnya.

1. Tentukan Kontainer: Tetapkan nama kontainer dan tipe kontainer. Tipe yang paling umum adalah inline-size , yang menjadikan elemen sebagai wadah kueri yang merespons perubahan lebar. Gunakan ukuran jika Anda perlu menanyakan lebar dan tinggi. Gunakan normal untuk penahanan tanpa fungsionalitas kueri.
2. Tambahkan Kondisi Kueri: Tambahkan satu atau beberapa kondisi menggunakan properti seperti lebar, tinggi, ukuran sebaris, atau rasio aspek dengan awalan min atau maksimal. Beberapa kondisi digabungkan dengan dan . Pembuat kueri kontainer mendukung unit CSS standar (px, em, rem) serta unit kueri kontainer (cqw, cqi, cqh).
3. Tentukan Gaya Responsif dan Pratinjau: Tambahkan deklarasi CSS yang harus diterapkan ketika kueri cocok. Gunakan preset gaya (Kartu Ringkas, Kartu yang Diperluas, dll.) sebagai titik awal, atau masukkan pasangan nilai properti khusus. Ubah ukuran pratinjau langsung untuk melihat kapan tepatnya kondisi kueri Anda terpenuhi.

• Pelingkupan: Kueri media merespons ukuran area pandang - lebar jendela browser. Kueri kontainer merespons ukuran elemen induk tertentu. Hal ini membuat kueri kontainer ideal untuk komponen yang dapat digunakan kembali dan muncul dalam konteks berbeda.
• Dapat digunakan kembali: Komponen dengan kueri kontainer berfungsi dengan benar baik muncul di sidebar sempit (300 piksel), area konten utama (800 piksel), atau bagian pahlawan lebar penuh (1200 piksel). Kueri media mengharuskan komponen mengetahui konteks area pandangnya.
• Dukungan Browser: Kueri Kontainer CSS didukung di Chrome 105+, Firefox 110+, Safari 16+, dan Edge 105+. Mereka sekarang stabil dan siap produksi di semua browser modern. Gunakan pembuat kueri kontainer untuk menghasilkan gaya penyempurnaan progresif.
• Performa: Kueri kontainer bisa lebih berperforma dibandingkan kueri media untuk respons tingkat komponen karena kueri tersebut mencakup penghitungan ulang gaya ke subpohon kontainer, bukan seluruh dokumen.

Kueri kontainer CSS memperkenalkan unit relatif baru yang dihitung berdasarkan dimensi kontainer: cqw (1% dari lebar kontainer), cqi (1% dari ukuran sebaris kontainer), cqh (1% dari tinggi kontainer), cqb (1% dari ukuran blok kontainer), cqmin (yang lebih kecil dari cqi dan cqb), dan cqmax (yang lebih besar dari cqi dan cqb). Unit-unit ini sangat berguna untuk tipografi dan spasi yang dapat disesuaikan dengan wadah, bukan area pandang. Misalnya, ukuran font: penjepit(0.875rem, 2cqi, 1.5rem) menskalakan ukuran font dengan lancar antara 0.875rem dan 1.5rem seiring bertambahnya ukuran penampung dari sekitar 44 piksel menjadi 75 piksel.