CSS igralište
HTML
CSS
Pregled
Tehnički detalji
Kako radi CSS Playground
Šta alat radi
CSS Playground vam daje dva editora — HTML i CSS — i sandbox-ovani iframe pregled koji se ažurira dok kucate. Koristite ga za prototipovanje komponenti, testiranje selektora, proveru fallback stilova ili pravljenje minimalnih reprodukcija za prijave bagova. Prekidač „Reset styles“ dodaje mali CSS reset (box-sizing, razumne podrazumevane vrednosti za body) kako se vaš CSS ne bi „borio“ sa podrazumevanim stilovima pregledača.
Uobičajeni slučajevi upotrebe za programere
Frontend programeri prave izolovane primere komponenti za deljenje u pull request-ovima ili dokumentaciji. Dizajneri eksperimentišu sa gradijentima, senkama, tajmingom animacija i modernim funkcijama kao što su grid, subgrid i container queries. Predavači demonstriraju CSS koncepte studentima bez otvaranja CodePen naloga. QA inženjeri čisto reprodukuju bagove koji su samo u CSS-u u kontrolisanom okruženju.
Formati podataka, tipovi ili varijante
HTML editor prihvata bilo koji sadržaj za body. CSS editor prihvata bilo koji moderan CSS — custom properties, nesting, @container, @layer, itd. Izlaz je kompletan samostalan HTML dokument sa meta viewport oznakom (opciono) i inline style blokom, spreman za kopiranje kao kompletan fajl. Preview iframe koristi sandbox='allow-same-origin' da omogući relativne URL-ove, dok blokira skripte i slanje formi.
Uobičajene greške i rubni slučajevi
Spoljni @font-face URL-ovi i @import izjave mogu biti blokirani iframe sandbox-om. Lepljenje CSS-a koji zavisi od nasleđenih stilova iz spoljnog dokumenta neće se ovde ponašati isto jer je iframe izolovan. Animacije sa veoma dugim trajanjem nastavljaju da rade u preview iframe-u čak i kada editor nije u fokusu; pauzirajte ih pomoću animation-play-state ako debagujete tajming.
Kada koristiti ovaj alat umesto koda
Koristite alat u pregledaču za jednokratne eksperimente, izolovane minimalne reprodukcije ili brze nastavne demonstracije. U stvarnom projektu, vaš dev server, hot module replacement i devtools za komponente (React Refresh, Vue devtools) daju mnogo bogatiju povratnu petlju — koristite ovaj playground za skice za koje ne želite da podešavate alatni lanac.