Taman Permainan CSS
HTML
CSS
Pratonton
Butiran teknikal
Cara CSS Playground Berfungsi
Apa yang Alat Ini Lakukan
CSS Playground memberikan anda dua editor — HTML dan CSS — serta pratonton iframe bersandbox yang dikemas kini semasa anda menaip. Gunakannya untuk memprototaip komponen, menguji pemilih, mengesahkan gaya sandaran, atau membina repro minimum untuk laporan pepijat. Togol 'Reset styles' menambah reset CSS kecil (box-sizing, lalai body yang munasabah) supaya CSS anda tidak bertembung dengan lalai pelayar.
Kes Penggunaan Pembangun yang Lazim
Pembangun frontend membina contoh komponen terasing untuk dikongsi dalam pull request atau dokumentasi. Pereka bereksperimen dengan gradien, bayang-bayang, pemasaan animasi, dan ciri moden seperti grid, subgrid, dan pertanyaan kontena. Pendidik mendemokan konsep CSS kepada pelajar tanpa perlu menyediakan akaun CodePen. Jurutera QA menghasilkan semula pepijat CSS sahaja dengan kemas dalam persekitaran terkawal.
Format Data, Jenis, atau Varian
Editor HTML menerima sebarang kandungan body. Editor CSS menerima sebarang CSS moden — sifat tersuai, nesting, @container, @layer, dan lain-lain. Output ialah dokumen HTML berdiri sendiri penuh dengan tag meta viewport (pilihan) dan blok style sebaris, sedia untuk disalin sebagai fail lengkap. Iframe pratonton menggunakan sandbox='allow-same-origin' untuk membenarkan URL relatif sambil menyekat skrip dan penghantaran borang.
Perangkap Lazim dan Kes Tepi
URL @font-face luaran dan pernyataan @import mungkin disekat oleh sandbox iframe. Menampal CSS yang bergantung pada gaya diwarisi daripada dokumen luar tidak akan berkelakuan sama di sini kerana iframe terasing. Animasi dengan tempoh yang sangat panjang terus berjalan dalam iframe pratonton walaupun editor tidak difokuskan; jedakannya dengan animation-play-state jika anda sedang menyahpepijat pemasaan.
Bila Perlu Menggunakan Alat Ini Berbanding Kod
Gunakan alat pelayar untuk eksperimen sekali jalan, reproduksi minimum terasing, atau demo pengajaran pantas. Dalam projek sebenar, pelayan dev anda, hot module replacement, dan devtools komponen (React Refresh, Vue devtools) memberikan gelung maklum balas yang jauh lebih kaya — gunakan playground ini untuk lakaran yang anda tidak mahu sediakan tooling untuknya.