digtools
📦
css-container-query-generator

CSS Container Query
Generator

Bangun container query CSS secara visual dengan GUI. Dilengkapi pengaturan container, breakpoint, 6 preset, dan konverter media query. Tanpa registrasi.

✨
Intuitive GUI
Visually build complex queries
👁️
Live Preview
Instantly verify with resizable preview
🔄
Media Query Converter
Easily replace existing @media rules

Pengaturan Kontainer

Prasetel

Breakpoint

Pratinjau Langsung

Kode yang Dihasilkan

🔄 Media Query → Container Query

Anda mungkin juga suka

✨

Pembuat CSS View Transition

🎨

Konverter Warna

🎨

Pemilih Warna Gambar

about,

Tentang Generator Container Query CSS

Generator Container Query CSS adalah alat yang memungkinkan pengembang untuk membangun "container query" secara visual, standar baru dalam desain responsif, menggunakan GUI. Sementara media query bergantung pada lebar viewport, container query bergantung pada lebar elemen induk, memungkinkan perubahan tata letak per komponen.

Alat ini menangani pengaturan container-type, penambahan breakpoint, dan pratinjau langsung. Juga menyediakan fitur konversi massal untuk media query yang ada.

how to,

Cara Menggunakan

LANGKAH 1

Konfigurasi Kontainer

Atur selektor dan container-type (biasanya inline-size). Tambahkan Breakpoint dan masukkan gaya CSS untuk diterapkan saat kontainer mencapai ukuran tertentu.

LANGKAH 2

Uji Pratinjau

Seret tepi kanan area pratinjau untuk mengubah ukuran kontainer dan verifikasi bahwa gaya berubah dengan benar. Anda dapat menguji dengan HTML kustom Anda.

LANGKAH 3

Ekspor Kode

Salin kode CSS yang dihasilkan ke proyek Anda. Gunakan konverter untuk mengganti sintaks @media dengan @container dengan mudah.

glossary,

Glosarium Container Query

Container Query (@container)
Fitur CSS untuk mengubah gaya berdasarkan ukuran elemen induk.
container-type
Mendefinisikan elemen sebagai kontainer.
container-name
Menamai kontainer secara eksplisit.
Containment
Mengisolasi tata letak elemen dari sisa DOM.
Sumbu Inline
Sumbu tempat teks mengalir (lebar dalam penulisan horizontal).
Media Query (@media)
Menerapkan gaya berdasarkan ukuran jendela.
cqw / cqh
Unit relatif berdasarkan dimensi kontainer.
faq,

Pertanyaan yang Sering Diajukan

Q.Apakah data dikirim ke server?
Tidak. Alat ini berjalan sepenuhnya di browser Anda. Data tidak dikirim ke server eksternal.
Q.Kapan menggunakan media query vs container query?
Gunakan media query untuk tata letak halaman global, dan container query untuk komponen seperti kartu yang beradaptasi dengan ruang yang tersedia.
Q.Bagaimana dukungan browsernya?
Didukung di semua browser modern utama sejak 2023 (Chrome 105+, Safari 16+).
Q.Peringatan saat menggunakan container-type: size?
Anda harus mengatur tinggi elemen secara eksplisit, jika tidak, elemen mungkin runtuh menjadi tinggi nol.
Q.Bagaimana HTML kustom diisolasi?
Kami menggunakan Shadow DOM untuk memastikan CSS alat tidak memengaruhi HTML pratinjau.
use cases,

Kasus Penggunaan

📦

Komponen Kartu yang Dapat Digunakan Kembali

Kartu yang menyesuaikan tata letaknya secara mandiri.

🧩

Integrasi CMS

Blok WordPress yang menyesuaikan tata letak terlepas dari lebar area widget.

📊

UI Dasbor Kompleks

Mengoptimalkan penempatan grafik secara dinamis di panel.

🔄

Modernisasi Kode

Konversi blok media query lama dengan mudah.

tech,

Dokumentasi Teknis

Container Query dicapai dengan menggabungkan aturan @container dan properti container-type.

Perbedaan dengan Media Query

Media query mengubah gaya berdasarkan viewport. Container query mengubah gaya berdasarkan kontainer induk, menerapkan tata letak yang benar secara otomatis di lokasi yang berbeda.

Alat Terkait

Generator CSSLihat semua
✨

Pembuat CSS View Transition

Simulasikan animasi View Transition API dan buat kode untuk SPA dan MPA.

🎨

Konverter Warna

Konversi kode HEX/RGB/HSL/CMYK dan buat palet warna.

🎨

Pemilih Warna Gambar

Ekstrak warna dari gambar dan dapatkan kode warna (HEX/RGB)

↔️

Pembuat CSS Clamp

Secara otomatis menghitung nilai fungsi clamp() fluida untuk desain responsif.

✂️

Pembuat clip-path CSS

Buat bentuk clip-path CSS dengan mudah menggunakan operasi seret dan hasilkan kode.

🖼️

Generator Filter & Blend CSS

Gabungkan filter secara visual, hasilkan kode, dan simpan gambar.

🎨

Generator Gradien CSS

Hasilkan gradien linear, radial, conic, dan pola secara intuitif.

📐

Generator Layout Flexbox/Grid

Buat kode layout dengan GUI visual

☁️

Generator Box-Shadow

Buat bayangan multi-lapis yang indah secara intuitif

Semua Kategori

Alat Web & Pengembang Generator CSS Alat Gambar & Foto Alat Video & Audio SEO & Pemasaran Jaringan & Infrastruktur Analisis & Pemrosesan Teks Alat Keuangan & Gaji Alat Tanggal & Kalender Alat Dokumen & Bisnis Permainan & Acara Kehidupan & Kesehatan Halaman Utama

🔍 Layar Penuh

Kirim Umpan Balik

Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.

Sanggahan

Semua alat yang disediakan di situs ini sepenuhnya gratis untuk digunakan, namun harap gunakan dengan risiko Anda sendiri. Kami tidak memberikan jaminan apa pun terkait keakuratan, kelengkapan, atau keamanan hasil perhitungan, hasil konversi, atau data yang dihasilkan. Harap diketahui bahwa operator tidak bertanggung jawab atas segala kerusakan atau masalah yang disebabkan oleh penggunaan alat-alat ini. Sebagian besar alat memproses file dan perhitungan secara lokal di browser Anda, artinya data yang Anda masukkan tidak dikirim atau disimpan di server kami.