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.

CSS igralište

Poništi stilove

Meta oznaka viewport

HTML

CSS

Pretpregled

Tehnički detalji

Kako radi CSS Playground

Što alat radi

CSS Playground daje vam dva uređivača — HTML i CSS — te sandboxirani iframe pregled koji se ažurira dok tipkate. Koristite ga za prototipiranje komponenti, testiranje selektora, provjeru fallback stilova ili izradu minimalnih reprodukcija za prijave grešaka. Prekidač 'Reset styles' dodaje mali CSS reset (box-sizing, razumne zadane postavke za body) kako se vaš CSS ne bi borio sa zadanim postavkama preglednika.

Uobičajeni slučajevi upotrebe za razvojne programere

Frontend developeri izrađuju izolirane primjere komponenti za dijeljenje u pull requestovima ili dokumentaciji. Dizajneri eksperimentiraju s gradijentima, sjenama, vremenima animacija i modernim značajkama poput grida, subgrida i container queryja. Edukatori demonstriraju CSS koncepte studentima bez otvaranja CodePen računa. QA inženjeri čisto reproduciraju bugove koji se tiču samo CSS-a u kontroliranom okruženju.

Formati podataka, vrste ili varijante

HTML uređivač prihvaća bilo koji sadržaj tijela dokumenta. CSS uređivač prihvaća bilo koji moderni CSS — prilagođena svojstva, ugniježđivanje, @container, @layer itd. Izlaz je potpuni samostalni HTML dokument s meta viewport oznakom (opcionalno) i inline style blokom, spreman za kopiranje kao potpuna datoteka. Iframe pregleda koristi sandbox='allow-same-origin' kako bi dopustio relativne URL-ove, uz blokiranje skripti i slanja obrazaca.

Uobičajene zamke i rubni slučajevi

Vanjski @font-face URL-ovi i @import izjave mogu biti blokirani sandboxom iframea. Lijepljenje CSS-a koji ovisi o naslijeđenim stilovima iz vanjskog dokumenta ovdje se neće ponašati isto jer je iframe izoliran. Animacije s vrlo dugim trajanjem nastavljaju se izvoditi u iframeu pregleda čak i kada uređivač nije u fokusu; pauzirajte ih pomoću animation-play-state ako debugirate vremensko usklađivanje.

Kada koristiti ovaj alat umjesto koda

Koristite alat u pregledniku za jednokratne eksperimente, izolirane minimalne reprodukcije ili brze nastavne demonstracije. U stvarnom projektu vaš dev poslužitelj, hot module replacement i devtools za komponente (React Refresh, Vue devtools) daju vam mnogo bogatiju povratnu petlju — koristite ovaj playground za skice za koje ne želite postavljati alatni lanac.