What is the CSS Playground?

A live sandbox for experimenting with HTML and CSS together. Edit either pane, and the preview iframe updates instantly. Useful for trying out new CSS features, debugging selectors, or building isolated component examples.

Is the preview sandboxed?

Yes — the preview runs in an iframe with the sandbox attribute restricting scripts and network access. Your code never leaves the browser; nothing is uploaded.

Can I import external fonts or CSS?

External @import or URLs are blocked by the sandbox. Paste the relevant CSS directly into the editor, or use system fonts for previews.

Playground CSS

Atur ulang gaya

Meta viewport

HTML

CSS

Pratinjau

Detail teknis

Cara Kerja CSS Playground

Apa yang Dilakukan Alat Ini

CSS Playground memberi Anda dua editor — HTML dan CSS — serta pratinjau iframe tersandbox yang diperbarui saat Anda mengetik. Gunakan untuk membuat prototipe komponen, menguji selector, memvalidasi gaya fallback, atau membuat repro minimal untuk laporan bug. Toggle 'Reset styles' menambahkan reset CSS kecil (box-sizing, default body yang masuk akal) agar CSS Anda tidak bertarung dengan default browser.

Kasus Penggunaan Umum untuk Developer

Developer frontend membuat contoh komponen terisolasi untuk dibagikan dalam pull request atau dokumentasi. Desainer bereksperimen dengan gradasi, bayangan, timing animasi, dan fitur modern seperti grid, subgrid, dan container queries. Pendidik mendemokan konsep CSS kepada siswa tanpa perlu membuat akun CodePen. Engineer QA mereproduksi bug khusus CSS secara bersih dalam lingkungan yang terkontrol.

Format Data, Tipe, atau Varian

Editor HTML menerima konten body apa pun. Editor CSS menerima CSS modern apa pun — custom properties, nesting, @container, @layer, dan sebagainya. Output berupa dokumen HTML mandiri lengkap dengan tag meta viewport (opsional) dan blok style inline, siap disalin sebagai file lengkap. Iframe pratinjau menggunakan sandbox='allow-same-origin' untuk mengizinkan URL relatif sambil memblokir skrip dan pengiriman formulir.

Kesalahan Umum dan Kasus Tepi

URL @font-face eksternal dan pernyataan @import mungkin diblokir oleh sandbox iframe. Menempelkan CSS yang bergantung pada gaya turunan dari dokumen luar tidak akan berperilaku sama di sini karena iframe terisolasi. Animasi dengan durasi sangat panjang akan terus berjalan di iframe pratinjau bahkan ketika editor tidak fokus; jeda dengan animation-play-state jika Anda sedang men-debug timing.

Kapan Menggunakan Alat Ini vs Kode

Gunakan alat browser untuk eksperimen sekali jalan, reproduksi minimal yang terisolasi, atau demo pengajaran cepat. Dalam proyek nyata, dev server Anda, hot module replacement, dan devtools komponen (React Refresh, Vue devtools) memberi loop umpan balik yang jauh lebih kaya — gunakan playground ini untuk sketsa yang tidak ingin Anda siapkan toolchain-nya.