CSS igrišče

Kako deluje CSS Playground

Kaj orodje počne

CSS Playground vam ponuja dva urejevalnika — HTML in CSS — ter predogled v peskovniškem iframe, ki se posodablja med tipkanjem. Uporabite ga za prototipiranje komponent, testiranje selektorjev, preverjanje nadomestnih slogov ali izdelavo minimalnih reprodukcij za poročila o napakah. Preklop 'Reset styles' doda majhen CSS reset (box-sizing, smiselne privzete nastavitve za body), da se vaš CSS ne bori s privzetimi nastavitvami brskalnika.

Pogosti primeri uporabe za razvijalce

Frontend razvijalci izdelujejo izolirane primere komponent za deljenje v pull requestih ali dokumentaciji. Oblikovalci eksperimentirajo z gradienti, sencami, časovanji animacij in sodobnimi funkcijami, kot so grid, subgrid in container queries. Izobraževalci demonstrirajo CSS koncepte študentom brez ustvarjanja računov CodePen. QA inženirji čisto reproducirajo napake, povezane samo s CSS, v nadzorovanem okolju.

Podatkovni formati, tipi ali različice

Urejevalnik HTML sprejme poljubno vsebino body. Urejevalnik CSS sprejme poljuben sodoben CSS — lastne lastnosti, gnezdenje, @container, @layer itd. Izhod je celoten samostojen HTML dokument z meta viewport oznako (neobvezno) in vdelanim style blokom, pripravljen za kopiranje kot celotna datoteka. Predogledni iframe uporablja sandbox='allow-same-origin', da omogoči relativne URL-je, hkrati pa blokira skripte in oddaje obrazcev.

Pogoste pasti in robni primeri

Zunanji URL-ji v @font-face in izjave @import so lahko blokirani zaradi peskovnika iframe. Lepljenje CSS, ki je odvisen od podedovanih slogov iz zunanjega dokumenta, se tukaj ne bo obnašalo enako, ker je iframe izoliran. Animacije z zelo dolgimi trajanji se v predoglednem iframe nadaljujejo tudi, ko urejevalnik ni v fokusu; če odpravljate težave s časovanjem, jih začasno ustavite z animation-play-state.

Kdaj uporabiti to orodje namesto kode

Orodje v brskalniku uporabite za enkratne eksperimente, izolirane minimalne reprodukcije ali hitre učne demonstracije. V pravem projektu vam razvojni strežnik, hot module replacement in razvojna orodja za komponente (React Refresh, Vue devtools) nudijo veliko bogatejšo povratno zanko — ta playground uporabite za skice, za katere ne želite postavljati orodij.