Lewati ke konten utama
iotools.cloudiotools.cloud

Pembuat CSS Container Query

Hasilkan aturan @container CSS — query ukuran, inline-size, atau gaya — dari kontainer bernama, kondisi breakpoint atau custom-property, dan gaya yang akan diterapkan. Menyertakan pratinjau langsung yang dapat diubah ukurannya dengan drag.

Input

Menargetkan kontainer ini secara spesifik melalui @container <name> (...). Biarkan kosong untuk kontainer anonim yang cocok dengan ancestor terdekat yang memiliki container-type diatur.

Dibungkus dalam pemilih .card di dalam aturan @container — ini adalah yang berubah dalam pratinjau.

Output

Result will appear here.

Markup nyata dalam Shadow DOM terisolasi — drag handle resize (size/inline-size) atau gunakan toggle (style) untuk memicu kondisi.

CSS
Demo markup

Struktur .container / .card yang ditargetkan oleh CSS di atas, ditambah affordance resize/toggle pratinjau.

Stylesheet pratinjau

Yang menggerakkan pratinjau langsung di atas — CSS di atas, ditambah tampilan dasar kartu demo dan (untuk mode style-query) wiring checkbox.

Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-container-query-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "containerName": "sidebar",
    "containerType": "inline-size",
    "conditionType": "min-width",
    "minWidthPx": "400",
    "maxWidthPx": "700",
    "styleProperty": "--theme",
    "styleValue": "dark",
    "declarations": "display: flex;\n  flex-direction: row;\n  gap: 1re…"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-container-query-generator` tool (CSS Container Query Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-container-query-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Pembuat CSS Container Query — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Apa yang dilakukan

Pembuat CSS Container Query membangun aturan @container yang siap untuk ditempel — CSS yang memungkinkan komponen untuk mengubah gaya dirinya berdasarkan ukuran (atau custom property) dari kontainernya sendiri, bukan dari viewport browser. Pilih jenis kontainer, tetapkan breakpoint atau kondisi custom-property, dan ketik gaya yang harus diterapkan setelah cocok. Pratinjau langsung diperbarui saat Anda mengubah opsi apa pun: seret pegangan resize sampel kontainer untuk query size/inline-size, atau balik checkbox untuk query style.

Apa itu container query

Media query hanya pernah melihat viewport. Container query memungkinkan elemen merespons ukuran konteks containment terdekatnya sebagai gantinya — jadi komponen kartu yang sama dapat tata letak satu cara di sidebar yang lebar dan cara lain saat diperas ke dalam kolom sempit, terlepas dari ukuran layar keseluruhan:

.container {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

container-type memilih elemen ke dalam containment (inline-size untuk lebar saja, size untuk lebar dan tinggi); container-name bersifat opsional dan memungkinkan Anda menargetkan kontainer tertentu itu dengan nama daripada ancestor terdekat dengan container-type yang diatur.

Tiga jenis kontainer

  • Inline-size — pilihan paling umum. Membangun containment pada sumbu inline (lebar dalam mode penulisan horizontal) saja, jadi kondisi min-width/max-width dapat mempertanyakannya.
  • Size — containment pada kedua sumbu, jadi kondisi berbasis tinggi juga menjadi mungkin. Memerlukan kontainer untuk memiliki tinggi eksplisit atau terkendala; kontainer dengan tinggi otomatis tidak dapat dikontainmen ukuran.
  • Style — menanyakan nilai custom property bukan dimensi, melalui style(--prop: value). Tidak memerlukan container-type: size atau inline-size — kontainer apa pun membangun konteks query-style. Berguna untuk komponen yang harus mengubah gaya berdasarkan variabel tema atau status yang ditetapkan lebih tinggi di pohon.

Cara menggunakannya

  1. Secara opsional beri nama kontainer — biarkan kosong untuk kontainer anonim yang cocok dengan ancestor terdekat dengan containment yang diatur.
  2. Pilih Jenis Kontainer.
  3. Untuk Inline-size/Size, pilih kondisi (min-width, max-width, atau rentang min+max) dan tetapkan breakpoint dalam piksel. Untuk Style, tetapkan nama custom property dan nilai yang harus cocok.
  4. Ketik gaya yang berlaku setelah kondisi cocok — mereka dibungkus dalam pemilih .card di dalam blok @container, sesuai dengan pratinjau. Butuh bantuan membangun aturan flex atau grid itu sendiri? Coba Pembuat CSS Flexbox atau Pembuat CSS Grid dan tempel hasilnya di sini.
  5. Salin CSS, ditambah demo markup jika Anda ingin menggunakan kembali struktur pratinjau, dan sesuaikan pemilih .card agar sesuai dengan komponen Anda sendiri.

FAQ

Mengapa aturan @container saya memerlukan pemilih, tidak seperti @media? Query media hanya berbicara tentang viewport, jadi badannya dapat menahan deklarasi biasa. Query kontainer berbicara tentang ukuran elemen itu sendiri — dan elemen itu mungkin tidak membawa properti yang Anda ubah — jadi browser memerlukan pemilih di dalam blok untuk mengetahui apa yang harus diubah gaya-nya.

Mengapa size containment tidak bekerja pada elemen saya? container-type: size memerlukan elemen untuk memiliki tinggi pasti (atau aspect-ratio). Tanpanya, browser tidak dapat membangun size containment dan query tidak pernah cocok — beralih ke inline-size jika tinggi tidak tetap.

Bisakah saya menggabungkan kondisi size dan kondisi style? Tidak dalam satu aturan @container — pilih mana pun kondisi alat ini ditargetkan, kemudian sarangkan blok @container kedua dengan tangan jika Anda membutuhkan keduanya.

Apakah alat ini menyimpan atau mengunggah apa pun? Tidak. Segalanya, termasuk pratinjau langsung, berjalan secara lokal di browser Anda — tidak ada yang Anda ketik pernah meninggalkan perangkat Anda.

Bagaimana jika saya memerlukan breakpoint berbasis viewport sebagai gantinya? Gunakan Pembuat CSS Media Query — ide yang sama, tetapi dikunci ke viewport browser bukan kontainer elemen.

@containerelement querycomponent queryresponsive cardcontainer-typecontainer-namestyle queryinline-sizeweb design

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan